JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,现在随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.
JavaScript 引入方式
◆代码引入◆
第一种引入方式就是在body标签的区域内直接使用<script></script>方式来引用代码.
<body>
<script type="text/javascript">
alert("hello lyshark")
</script>
</body>
第二种引入方式,也就是在需要使用的地方直接引入一个外部js文件,通常写在<head>标签里.
<head>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js" type="text/javascript"></script>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
◆定义变量◆
定义局部变量: 如下函数内局部变量必须以var开头,如果在函数内未使用var,系统默认也是定义局部变量.
<body>
<script type="text/javascript">
function func() {
names = "lyshark"; //函数内部默认转成局部变量
var age = 21; //定义局部变量标准写法
gender = "Man"; //默认局部变量
alert("姓名:" + names);
alert("年龄:" + age);
alert("性别:" + gender);
}
func() //调用函数,不掉用则不执行
</script>
</body>
定义全局变量: 如果我们想要定义全局变量,只需要在函数体外部定义,解释器默认将外部变量当成全局变量.
<body>
<script type="text/javascript">
var func_names = "lyshark" //定义全局变量
func_novar = "hello" //定义全局变量
function func() {
alert("打印全局变量:" + func_names)
alert("打印全局变量:" + func_novar)
}
func() //调用函数,不掉用则不执行
</script>
</body>
JavaScript 数据类型
◆数值类型◆
整数变量: 使用显式方式声明三个变量,num1=1024,num2=5E2,num3=1.23e-3.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 0x1A;
var num3 = 10;
var num4 = 20;
document.write("两个数相加:" + (num3 + num4 ))
</script>
</body>
浮点数变量: 分别声明四个浮点数变量,其中表示方式可以有以下四种形式.
<body>
<script type="text/javascript">
var num1 = 3.5659;
var num2 = -8.1E12;
var num3 = .1e12;
var num4 = 32E-12;
document.write("输出一个浮点数:" + num2)
</script>
</body>
特殊的数值: 除了上面的数值表示类型外,JS默认定义了一些常量用来表示更多的类型值.
<body>
<script type="text/javascript">
document.write("表示无穷大的特殊值:" + Infinity)
document.write("特殊的非数字值:" + NaN)
document.write("表示最大值:" + Number.MAX_VALUE)
document.write("表示最小值:" + Number.MIN_VALUE)
document.write("特殊的非数字值:" + Number.NaN)
document.write("表示正无穷大的特殊值:" + Number.POSITIVE_INFINITY)
document.write("表示负无穷大的特殊值:" + Number.NEGATIVE_INFINITY)
</script>
</body>
数字转换: parseInt(..)方法,可以实现将一个字符串转换成整数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseInt(str) //将字符串转成数值,赋值给num
console.log(num) //打印这个数值
</script>
</body>
转浮点数转换: parseFloat(..)方法,可以实现将一个字符串转换成浮点数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseFloat(str) //将字符串转成浮点数,赋值给num
console.log(num) //打印这个数值
</script>
</body>
常用数值函数: 这里举三个例子,分别代表判断有限值,保留小数点,和保留小数点后几位.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 3.16159;
var num3 = 100;
document.write("判断是否为有限值: " + isFinite(num1) + "<br>")
document.write("指定要保留的小数点位数: " + num2.toFixed(2) + "<br>")
document.write("保留小数点后2位: " + num3.toFixed(2))
</script>
</body>
◆字符串型◆
obj.length 获取字符串长度
obj.toString() 将数组转换成字串
obj.trim() 移除字符串中空白
obj.trimLeft() 移除字符串中左边空白
obj.trimRight() 移除字符串中右边空白
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 两个或者多个字符串拼接
obj.indexOf(substring,start) 返回指定字符串在字符串中首次出现的位置
obj.lastIndexOf(substring,start) 返回该元素在字符串中最后一次出现的位置
obj.substring(from,to) 提取字符串中介于两个指定下标之间的字符
obj.slice(start,end) 从已有字符串数组中返回选定的元素,切片
obj.split(delimiter,limit) 用于把一个字符串分割成字符串数组,分割
obj.toLowerCase() 将小写字符串转换成大写
obj.toUpperCase() 将大写字符串转换成小写
obj.search(regexp) 从头开始匹配,返回匹配成功的第一个字符串位置,g无效
obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个
obj.replace(regexp,replacement) 正则替换,正则中有g则替换所有,否则只替换第一个匹配项
$数字：匹配的第n个组内容
$&：当前匹配的内容
$`：位于匹配子串左侧的文本
$'：位于匹配子串右侧的文本
$$：直接量$符号
统计字串长度: 使用length方法获取字符串的长度,并返回,可以直接返回,也可以赋值给变量.
<body>
<script type="text/javascript">
var string = " hello lyshark 欢迎来到中国!";
var num = string.length;
document.write("统计字符串长度: " + string.length + "<br>")
document.write("另一种统计长度的方法: " + num)
</script>
</body>
移除字串空格: 通过使用trim()移除字符串两边空格,trimLeft(),trimRight()可以分别移除左边和右边空格.
<body>
<script type="text/javascript">
var obj = " lyshark ";
document.write("统计字符串大小: " + obj.length + "<br>")
document.write("去除两边的空格: " + obj.trim() + "<br>")
document.write("统计字符串大小: " + obj.length + "<br>")
</script>
</body>
字符串拼接: 使用concat(,)将两个或者多个字符串拼接在一起形成一个新的字符串.
<body>
<script type="text/javascript">
var string1 = "hello ";
var string2 = "lyshark";
var string3 = "welcome";
document.write("拼接一个字串: " + string1.concat(string2) + "<br>")
document.write("拼接多个字串: " + string1.concat(string2,string3) + "<br>")
</script>
</body>
字符串提取: 使用indexOf定位首次出现的位置,lastIndexOf定位最后出现的位置,substring实现提取任意字符串.
<body>
<script type="text/javascript">
var str = "Hello World!";
document.write("Hello 首次出现的位置: " + str.indexOf("Hello") + "<br/>")
document.write("World 首次出现的位置: " + str.indexOf("World") + "<br/>")
document.write("如果没有出现过默认-1: " + str.indexOf("world"))
</script>
</body>
<body>
<script type="text/javascript">
var str = "Hello World! Hello lyshark!";
document.write("Hello 最后出现的位置: " + str.lastIndexOf("Hello") + "<br/>")
document.write("World 最后出现的位置: " + str.lastIndexOf("World") + "<br/>")
document.write("如果没有出现过默认-1: " + str.lastIndexOf("world"))
</script>
</body>
<body>
<script type="text/javascript">
var str = "Hello World!";
document.write("从0偏移取数据,向后取5个: " + str.substring(0,5) + "<br>")
document.write("从0偏移取数据,向后取11个: " + str.substring(0,11) + "<br>")
document.write("从3偏移取数据,向后取7个: " + str.substring(3,7))
</script>
</body>
切片与分割: 通过使用slice()方法切割数组,split()方法用来切割字符串转换成数组.
<body>
<script type="text/javascript">
var array = new Array(5)
array[0] = "LyShark";
array[1] = "Admin";
array[2] = "John";
array[3] = "Adrew";
document.write("返回整个数组: " + array + "<br>")
document.write("返回[1]-[2]元素: " + array.slice(1,3) + "<br>")
</script>
</body>
<body>
<script type="text/javascript">
var str = "hello world my names lyshark !";
var test = "a:b:c:d:e:f:g:h"
document.write("以空格作为分隔符分割字串: " + str.split(" ") + "<br>")
document.write("将每个字母单独变成一个数组: " + str.split("") + "<br>")
document.write("以空格分隔,只分割前三个单词: " + str.split(" ",3) + "<br>")
document.write("以冒号作为分隔符,分割元素: " + test.split(":"))
</script>
</body>
字符串查找: 查找字符串并返回所在位置,search() 和 match()方法作用基本一致,查找时支持正则匹配.
<body>
<script type="text/javascript">
var string = "hello world my names lyshark my world !";
document.write("精确查找字符串: " + string.search("lyshark") + "<br>")
document.write("精确检索字符串: " + string.search(/my/) + "<br>")
document.write("忽略大小写检索: " + string.search(/world/i) + "<br>")
</script>
</body>
<body>
<script type="text/javascript">
var string = "hello world my names lyshark my world 123 456 !";
document.write("精确查找字符串: " + string.match("lyshark") + "<br>")
document.write("全局匹配d数字: " + string.match(/d+/g) + "<br>")
</script>
</body>
字符串替换: 查找并替换字符串,可以使用replace()方法,该方法也支持正则表达式.
<body>
<script type="text/javascript">
var string = "hello world welcome to mkdirs.com hello lyshark HELLO mkdirs!";
document.write("查找welcome替换成xxxx: " + string.replace(/welcome/,"xxxx") + "<br>")
document.write("全局查找替换hello并替换: " + string.replace(/hello/g,"oooo") + "<br>")
document.write("匹配替换并区分大小写: " + string.replace(/HELLO/,"gggg") + "<br>")
</script>
</body>
◆数组类型◆
obj.length 获取数组的大小
obj.push(ele) 给数组尾部追加元素
obj.pop() 从尾部获取一个元素
obj.unshift(ele) 在数组头部插入元素
obj.shift(ele) 在数组头部移除元素
obj.slice() 数组元素的切片
obj.concat(val,..) 多个数组相连接
obj.join(sep) 将数组连接起来变成字符串
obj.sort() 对数组元素进行排序
obj.reverse() 反转数组中的元素
obj.splice(n,0,val) 在数组指定位置插入元素
obj.splice(n,1,val) 在数组指定位置替换元素
obj.splice(n,1) 在数组指定位置删除元素
定义一维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后打印结果.
<body>
<script type="text/javascript">
var array = [1,2,3,4,5]; //创建数组,并有5个元素
var array1 = []; //创建空数组
var array2 = new Array() //同样创建空数组
array1[0] = "hello";
array1[2] = "world";
array2[0] = null;
document.write("数组array大小: " + array.length + "<br>")
document.write("数组array1大小: " + array1.length + "<br>")
document.write("数组array2大小: " + array2.length)
</script>
</body>
定义二维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后通过循环语句打印数组值.
<body>
<script type="text/javascript">
var value = [[1,2,3],[4,5,6],[7,8,9,10]]; //创建二维数组
document.write("数组value大小: " + value.length + "<br>") //打印数组大小
document.write("数组value[2]大小: " + value[2].length + "<br>") //打印数组大小
for(var i=0;i<3;i++) //循环输出数组元素
{
for(j in value[i]) //输出每个数组元素的值
{
document.write(" " + value[i][j]);
}
document.write("<br>")
}
</script>
</body>
插入修改与删除: 通过使用splice()方法,实现对元素的插入,增加,修改,删除.
<body>
<script type="text/javascript">
var array = new Array(5)
array[0] = "admin";
array[1] = "guest";
array[2] = "lyshark";
array[3] = "wall";
document.write("当前列表: " + array + "<br>")
array.splice(2,1,"替换成我") //把第2个元素提换,替换1次
document.write("替换列表: " + array + "<br>")
array.splice(5,1,"插入元素") //在第5个位置上插入新元素
document.write("插入列表: " + array + "<br>")
array.splice(1,3,"删除元素") //删除第2个位置以后2个元素
document.write("删除列表: " + array + "<br>")
</script>
</body>
PUSH/POP操作元素: 通过该命令可实现在数组结尾追加新元素,也可从结尾删除元素.
<body>
<script type="text/javascript">
var list = [1,2,3,4,5];
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.push(6)
list.push(7) //在结尾添加新元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.pop()
list.pop() //在结尾删除元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
</script>
</body>
Shift/Unshift: 该命令可以实现在数组元素的头部添加元素,或者是删除头部的元素.
<body>
<script type="text/javascript">
var list = [4,5,6];
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.unshift(3)
list.unshift(2)
list.unshift(1) //在开头添加元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
list.shift()
list.shift() //从开头删除一个元素
document.write("数组元素: " + list + " 总大小:" + list.length + "<br>")
</script>
</body>
切片与连接: 使用slice()方法实现数组的切片,concat()实现数组连接,join()数组转成字符串.
< ----------------------------[数组切片]---------------------------- >
<body>
<script type="text/javascript">
var array = new Array()
array[0] = "admin";
array[1] = "lyshark";
array[2] = "Thomas";
array[3] = "John";
array[4] = "George";
document.write("数组切片(从1号索引开始显示元素): " + array.slice(1) + "<br>")
document.write("数组切片(从3号索引开始显示元素): " + array.slice(3) + "<br>")
document.write("数组切片(只显示1-2号元素切片): " + array.slice(1,3) + "<br>")
</script>
</body>
< ----------------------------[数组连接]---------------------------- >
<body>
<script type="text/javascript">
var array = new Array();
var a = [1,2,3,4,5];
var b = [7,8,9,10];
document.write("将数组连接: " + array.concat(a,b) + "<br>")
document.write("直接连接并打印: " + a.concat(b) + "<br>")
</script>
</body>
< ----------------------------[数组转换]---------------------------- >
<body>
<script type="text/javascript">
var array = new Array(3);
array[0] = "admin";
array[1] = "guest";
array[2] = "lyshark";
document.write("直接连接成字符串: " + array.join() + "<br>")
document.write("连接成字符串并添加一个分隔符: " + array.join("*") + "<br>")
</script>
</body>
数组元素排序: 使用sort()方法实现数组的正向排列,reverse()则实现数组的反向排列.
<body>
<script type="text/javascript">
var array = [12,65,77,89,32,-19,54,33,78]
document.write("未排序前: " + array + "<br>")
document.write("正向排序: " + array.sort() + "<br>")
document.write("反向排序: " + array.reverse() + "<br>")
</script>
</body>
◆布尔类型◆
相等于不相等: 使用==双等于号判断两数字是否相等,使用!=不等于号判断两数字是否不相等.
<body>
<script type="text/javascript">
num1 = 1;
num2 = 0;
if(num1 == num2){
document.write("两数相等...")
}else if(num1 != num2){
document.write("两数不相等...")
}
</script>
</body>
与运算与或运算: 使用||或运算符实现或运算,使用&&与运算符实现与运算.
<body>
<script type="text/javascript">
num1 = "true";
num2 = "false";
num3 = "ok";
if(num1 == num2 || num2 == num2){
document.write("或运算的比较结果...")
}
if(num1 == num1 && num2 == num2){
document.write("与运算的比较结果...")
}
</script>
</body>
◆类型转换◆
基本类型转换: 基本类型转换String:将字数字转成字符串,Number:将其他类型转为整数,Boolean:其他类型转成布尔类型.
<body>
<script type="text/javascript">
document.write("其他类型转换为字符串: " + String(1024) + "<br>");
document.write("其他类型转换为数值:" + Number("hello") + "<br>");
document.write("其他类型转换为布尔:" + Boolean(1) + "<br>");
</script>
</body>
字符串转成整数: 字符串之间的数据转换,与进制转换实例.
<body>
<script type="text/javascript">
document.write("将a转换成整数: " + parseInt("a") + "<br>");
document.write("将a转换成8进制,整数: " + parseInt("a",8) + "<br>");
document.write("将a转换成2进制,整数: " + parseInt("a",2) + "<br>");
document.write("将a转换成浮点数: " + parseFloat("a") + "<br>");
</script>
</body>
eval()计算: EVAL用于计算字符串表达式或语句的值.
<body>
<script type="text/javascript">
var num = 10;
var str = "1024";
document.write("eval连接字符串: " + eval(str+num) + "<br>");
</script>
</body>
JavaScript 流程控制
if-else: 判断if(num1>num2)如果条件满足则执行,否则判断if(num2>num3),满足执行否则执行else里面的代码.
<body>
<script type="text/javascript">
var num1 = 100;
var num2 = 200;
var num3 = 10;
if(num1 > num2){
var temp = num1 - num2;
document.write("num1 大于 num2" + " 比num2多出:" + temp)
}else if(num2 > num3){
var temp = num2 - num3
document.write("num2 大于 num3" + " 比num2多出:" + temp)
}else{
document.write("没有合适的结果..")
}
</script>
</body>
switch: switch通常用于选择结构,以下代码用户输入一个数值,进入选择结构根据输入数值执行相应代码片段.
<body>
<script type="text/javascript">
var temp;
temp = prompt("请选择输入(1,2,*):","");
switch(temp){
case "1":
document.write("你选择了1号");
break;
case "2":
document.write("你选择了2号");
break;
default:
document.write("你选择了其他选项");
break;
}
</script>
</body>
while: 循环执行结构,while会一直循环下去,直到满足(num <=100)的条件则跳出循环,语句语法结构如下.
<body>
<script type="text/javascript">
var num = 0;
var sum = 0;
while(num <=100){
sum = sum +num;
num = num +1;
document.write("当前循环: "+ num + " 当前累加: " + sum);
document.write("<br>")
}
document.write("从1+100...结果是:" + sum)
</script>
</body>
for: 以下案例,通过for循环遍历names列表,每次循环i++递增,直到满足(i<names.length)则退出循环.
<body>
<script type="text/javascript">
var names = ["admin","guest","lyshark","alex"]
for(var i=0;i<names.length;i++){
document.write("当前位置: "+ i +"元素值: " + names[i])
document.write("<br>")
}
</script>
</body>
for in: 这是一种类似python的语法格式,使用效果和python中的循环语句并无差异.
<body>
<script type="text/javascript">
var names = ["admin","guest","lyshark","alex"]
for(var index in names){
document.write("当前位置: "+ index +"元素值: " + names[index])
document.write("<br>")
}
</script>
</body>
try..catch: 异常处理,当try里面代码出现问题的时候自动执行catch抛出异常,最后无论是否异常都会执行finally.
<body>
<script type="text/javascript">
try {
// 这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch(e){
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行
// e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally{
// 无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行
}
</script>
</body>
JavaScript 关于函数
◆函数的定义◆
普通无参函数: 以下代码,通过使用关键字function声明了func()无参数的函数.
<body>
<script type="text/javascript">
function func(){
document.write("这个无参数函数被执行了..." + "<br>");
return "ok";
}
var ret = func() //调用函数,并将返回值赋值给ret变量
document.write("函数的返回值是: " + ret);
</script>
</body>
普通有参函数: 以下代码,通过使用关键字function声明了func()有参数的函数,其中形式参数有name,age,sex.
<body>
<script type="text/javascript">
function func(name,age,sex){
document.write("姓名: " + name + "年龄:" + age + "性别: " + sex + "<br>");
return 0;
}
var ret = func("lyshark","22","Man") //调用函数
document.write("函数的返回值是: " + ret);
</script>
</body>
传递数组地址: 我们不仅仅可以传递单个的参数,还可以将一个预定义好的数组传递到函数体内部.
<body>
<script type="text/javascript">
function show(temp)
{
for(i in temp)
document.write(temp[i] + " ");
document.write("<br>");
}
var array = new Array(1,2,3,4,5,6,7,8,9,10);
show(array) //传递一个数组到函数体,并执行
</script>
</body>
定义匿名函数: 匿名函数,就是没有名字的函数,需要我们手动进行调用,一般情况不会使用.
<body>
<script type="text/javascript">
var func = function(x,y){
document.write("参数1= " + x + "参数2= " + y);
}
func(10,20) //调用匿名函数
</script>
</body>
自执行函数: 自执行函数,也就是说无论我们是否调用它,它都会被执行,适合做初始化工作.
<body>
<script type="text/javascript">
(function(name,url){
document.write("姓名: " + name + "URL: " + url);
})("lyshark","mkdirs.com")
</script>
</body>
arguments: 使用特殊对象arguments,开发者无需明确指出参数名,就能访问数据的内部元素.
<body>
<script type="text/javascript">
function func() {
document.write("当前参数长度: " + arguments.length + "<br>");
}
func(1,2,3,4,5);
</script>
</body>
◆嵌套与递归◆
函数的嵌套: 函数的嵌套是指在函数体的内部再次嵌套一层函数体,并依次返回执行结果,就是嵌套函数.
<body>
<script type="text/javascript">
function ext_func(){
function func(){
document.write("内部函数执行结果...." + "<br>")
return 1024;
}
ret = func()
return ret
}
ret = ext_func()
document.write("内部函数返回值: " + ret)
</script>
</body>
函数的递归: 函数的递归是指函数不停地调用自身,直到满足一定得条件才会自动的跳出循环体.
<body>
<script type="text/javascript">
function func(temp){
if(temp == 1){
return 1;
}else{
return func(temp-1)+2;
}
}
ret = func(5)
document.write("内部函数返回值: " + ret)
</script>
</body>
函数的闭包: 通常情况下,我们想调用一个函数内部的嵌套方法,我们可以使用闭包的形式来实现.
<body>
<script type="text/javascript">
function func1(){
var array = [1,2,3,4,5];
function func2() {
return array;
}
return func2;
}
temp = func1() //调用语句返回函数func2对象
document.write("函数返回对象: " + temp + "<br>");
ret = temp() //调用这个对象,最终得到结果
document.write("最终返回值: " + ret);
</script>
</body>
◆常用内置函数◆
encodeURI: 返回一个对URI字符串编码后的结果,URI表示的范围比URL要大.
<body>
<script type="text/javascript">
var urlstr = encodeURI("http://www.mkdirs.com/index.html country=中国")
document.write("URI中的转义字符: " + urlstr + "<br>")
var urlstr = encodeURIComponent("http://www.mkdirs.com/index.html country=中国")
document.write("转义URI组件中的字符: " + urlstr)
</script>
</body>
decodeURI: 对一个编码后的URI字符串进行解释,翻译成一个正常格式.
<body>
<script type="text/javascript">
var urlstr = decodeURI("http://www.mkdirs.com/index.html%20country=%E4%B8%AD%E5%9B%BD")
document.write("URI翻译: " + urlstr + "<br>")
var urlstr = decodeURIComponent("%2Findex.html%20country%3D%E4%B8%AD%E5%9B%BD")
document.write("URI组件翻译: " + urlstr)
</script>
</body>
字符串转换: 使用escape()方法对字符串进行转义处理,unescape()则负责将代码解码.
<body>
<script type="text/javascript">
var encode = escape("中国")
document.write("字符串转换: " + encode + "<br>")
var decode = unescape("%u4E2D%u56FD")
document.write("字符串解码: " + decode)
</script>
</body>
JSON序列化: 使用JSON方法将数组序列化存储,方便数据传输.
<body>
<script type="text/javascript">
array = [1,2,3,4,5]
ret = JSON.stringify(array) //序列化,将其他类型转换成字符串
document.write("序列化后的类型: " + typeof(ret) + "<br>")
document.write("反序列化,加载结果: " + JSON.parse(ret))
</script>
</body>
JavaScript 对象编程
对象是编程语言中很重要的特征之一,JS是基于对象的编程语言,所以支持面向对象的所有特性,灵活使用这些对象能够实现丰富而强大的功能,下面我们首先来看如何创建一个自定义类,代码如下:
<body>
<script type="text/javascript">
function MyClass(name,age){ //定义类,类名MyClass
this.name = name;
this.age = age;
this.print = function(name,age){ //定义的一个函数体
document.write("姓名: " + this.name + "年龄: " + this.age);
}
}
var temp = new MyClass("lyshark",22); //实例化一个对象
temp.print() //调用对象中的函数体
</script>
</body>
上述代码执行后会打印出姓名和年龄,但是这种写法在实例化对象时,系统会为每个对象中均保存了一个相同的print()函数,从而浪费内存,使用原型写法可以解决该问题,改进代码如下:
<body>
<script type="text/javascript">
function MyClass(name,age){
this.name = name;
this.age = age;
}
MyClass.prototype = {
print:function(){
document.write("姓名: " + this.name + "年龄: " + this.age);
}
}
var temp = new MyClass("lyshark",22); //实例化一个对象
temp.print() //调用对象中的函数体
</script>
</body>
◆Date 对象◆
读取日期方法: 下面是几个常用的日期获取方法和说明信息,设置日期一般不会用到.
<body>
<script type="text/javascript">
var now = new Date();
document.write("当前年份: " + now.getFullYear() + "<br>");
document.write("当前月份: " + now.getMonth() + "<br>");
document.write("当前日期: " + now.getDate() + "<br>");
document.write("当前周几: " + now.getDay() + "<br>");
document.write("当前小时: " + now.getHours() + "<br>");
document.write("当前分钟: " + now.getMinutes() + "<br>");
document.write("当前秒数: " + now.getSeconds() + "<br>");
document.write("当前时间戳: " + now.getTime() + "<br>");
</script>
</body>
data对象转换: 将获取到的日期时间戳,通过不同的方式展示出来.
<body>
<script type="text/javascript">
var now = new Date();
document.write("采用UTC时区表示: " + now.toUTCString(now.getTime()) + "<br>");
document.write("采用本地时区表示: " + now.toLocaleString(now.getTime()) + "<br>");
document.write("采用本地时区表示日期: " + now.toDateString(now.getTime()) + "<br>");
document.write("采用本地中国标准时间: " + now.toTimeString(now.getTime()) + "<br>");
document.write("采用本地时区表示2019/02/21: " + now.toLocaleDateString(now.getTime()) +"<br>");
document.write("采用本地时区表示4:01:55 : " + now.toLocaleTimeString(now.getTime()) +"<br>");
</script>
</body>
◆Math 对象◆
Math常用方法: 一些常用的Math数值计算方法.
<body>
<script type="text/javascript">
document.write("产生随机数[0-9]: " + parseInt(10 * Math.random()) + "<br>");
document.write("产生随机数[任意数字]: " + String.fromCharCode(97 * Math.random()) + "<br>");
document.write("返回数值的绝对值: " + Math.abs(3.161592654) + "<br>");
document.write("返回x和y中较大的一个数: " + Math.max(10,87) + "<br>");
document.write("返回x和y中较小的一个数: " + Math.min(10,87) + "<br>");
document.write("返回x的y次方根: " + Math.pow(10,87) + "<br>");
document.write("对x进行四舍五入: " + Math.round(12.425) + "<br>");
document.write("返回x的平方根: " + Math.sqrt(10) + "<br>");
</script>
</body>
◆RegExp 对象◆
正则匹配: 一些常用的正则匹配函数,正则表达式是通用的,请自行百度.
<body>
<script type="text/javascript">
var string = "hello123world567mynames;"
document.write("Match全局匹配: " + string.match(/d+/g) + "<br>");
document.write("Search取出第一个结果的索引值: " + string.search(/d+/g) + "<br>");
document.write("Split取出第一个结果的索引值: " + string.split(/d+/g) + "<br>");
var reg = RegExp("d+",g);
document.write("测试字符是否存在: " + reg.test("names123123lyshark456,789") + "<br>");
</script>
</body>
◆Window 对象◆
打开关闭窗口: 利用window.open()打开网页,window.close()关闭打开的网页.
msg.html
<body bgcolor="#bc8f8f">
<table width="300" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"> 网页通知
<p> 这是一个通知信息,您可以忽略掉</p>
</td>
</tr>
</table>
</body>
index.html
<body>
<input type="button" value="弹出通知" onclick="msg()">
<input type="button" value="关闭通知" onclick="msg_close()">
<script type="text/javascript">
function msg(){
open("msg.html","通知",height=50,width=30,top=20,left=10);
}
function msg_close() {
close()
}
</script>
</body>
弹出提示框: 点击按钮自动弹出Window.alert()提示消息框.
<body>
<input type="button" value="点击弹窗" onclick="msg()">
<script type="text/javascript">
function msg(){
alert("这是一个提示框...")
}
</script>
</body>
弹出选择框: Window.confirm()弹出一条信息让用户确认,包括确认和取消按钮.
<body>
<input type="button" value="弹窗口" onclick="msg()">
<script type="text/javascript">
function msg(){
if(confirm("请输入你的选项..")){
alert("感谢您的参与..") //确认按钮执行语句
}else{
alert("取消语句..") //取消按钮执行语句
}
}
</script>
</body>
弹出输入框: window.prompt()用于弹出一个输入框,可以让用户输入一些信息.
<body>
<script type="text/javascript">
var passwd = prompt("请输入密码(密码是123): ","");
while(passwd !="123"){
passwd = prompt("密码错误,请重新输入: ");
}
if(passwd =="123"){alert("密码正确...")}
</script>
</body>
设置单次定时器: 以下案例,实现当点击删除按钮时,屏幕提示删除成功,在5秒后自动的隐藏标签.
<body>
<div id="status" style="color: red;"> </div>
<input type="button" value="删除定时" onclick="DeleteStatus()">
<script type="text/javascript">
function DeleteStatus(){
var temp = document.getElementById("status");
temp.innerText = "删除成功了...";
setTimeout(function(){
temp.innerText = "";
},50000); //设置5秒后执行清空标签
}
</script>
</body>
设置循环定时器: setIntercal()设置定时器,clearInterval()清除定时器,定时器用于周期性执行.
<body>
<input type="text" id="clock">
<input type="button" value="开始执行" onclick="begin_func()">
<input type="button" value="取消执行" onclick="end_func()">
<script type="text/javascript">
function begin(){
var now = new Date();
var stime = now.getTime()
var ret = document.getElementById("clock");
ret.value=stime;
}
var ID; //定义全局变量,后期用于清楚定时器
function begin_func(){
ID =setInterval(begin,1000); //每隔1秒执行一次,设置定时器
}
function end_func(){
clearInterval(ID); //取消一秒内执行,清除定时器
ID = undefined;
}
</script>
</body>
JavaScript DOM编程
文档对象模型 (Document Object Model,DOM) DOM把网页和脚本以及其他的编程语言联系了起来
◆DOM 查找元素◆
GetElementById: 根据ID号获取一个标签,这种方式是最常用的.
<body>
<div id="MyDiv"> hello world </div>
<script type="text/javascript">
var temp = document.getElementById("MyDiv");
document.write("获取到的结果: " + temp.innerText);
</script>
</body>
getElementsByName: 根据自定义标签alex=MyDiv属性获取标签集合.
<body>
<div alex="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByName("alex"); //通过自定义的名称找标签
names.innerText = "www.baidu.com"; //改变元素标签名称
document.write("修改后的内容:" + names.innerText);
</script>
</body>
getElementsByClassName: 根据class类名称属性获取标签集合.
<body>
<div clas="MyClass"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByClassName("MyClass"); //通过类名称找出标签
names.innerText = "www.baidu.com"; //改变元素标签名称
document.write("修改后的内容:" + names.innerText);
</script>
</body>
getElementsByTagName: 根据标签名name="MyDiv"来获取标签集合.
<body>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByName("MyDiv"); //通过标签名称找出标签
names.innerText = "www.baidu.com"; //改变元素标签名称
document.write("修改后的内容:" + names.innerText);
</script>
</body>
◆DOM 标签操作◆
innerText: 该方式只能对单纯的标签进行操作,如果标签中嵌入了其他标签,那么该方式会自动过滤掉标签格式.
<body>
<div id="lyshark">hello world</div>
<script type="text/javascript">
var temp = document.getElementById("lyshark"); //通过标签ID获取标签句柄
document.write("原来的内容: " + temp.innerText + "<br>"); //获取标签中原始的内容
temp.innerText = "alex" //修改标签中的内容为alex
document.write("修改后的内容: " + temp.innerText + "<br>"); //获取修改后的标签内容
</script>
</body>
innerHTML: 该方式不但可以修改文本,还可以同时修改HTML的嵌套标签,修改时应加上标签格式.
<body>
<div id="lyshark"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var temp = document.getElementById("lyshark"); //通过标签ID获取标签句柄
document.write("原来的内容: " + temp.innerHTML + "<br>"); //获取标签中原始的内容
temp.innerHTML = '<b> hello alex </b>' //修改标签中的内容为alex
document.write("修改后的内容: " + temp.innerHTML + "<br>"); //获取修改后的标签内容
</script>
</body>
inner 循环修改: 通过使用数组的形式,可以实现循环修改元素,比如以下循环修改name="MyDiv"的所有标签内容.
<body>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<div name="MyDiv"> <b> hello lyshark </b> </div>
<script type="text/javascript">
var names = document.getElementsByName("MyDiv"); //通过标签名称找出标签
//id.innerText = "www.mkdirs.com"; 不生效:原因是标签名称重复,需要使用数组
names[0].innerText = "www.mkdirs.com"; //改变第1个元素标签名称
names[1].innerText = "www.mkdirs.com"; //改变第2个元素标签名称
//------------------------------------------------
//通过循环修改多个标签
document.write("总共有标签数: " + names.length); //可以统计总共标签数量
for(var item in names){
names[item].innerText = "www.mkdirs.com"; //这里写批量修改的内容
}
</script>
</body>
CreateElement 创建标签: 使用最原始的方式创建标签,实现在父容器div id=tags中,动态的添加a标签.
< -------------------------[方式1]------------------------- >
<body>
<div id="MyDiv"> </div> <!--指定一个父容器-->
<script type="text/javascript">
var tag = document.createElement("a"); //指定标签格式:这里是a标签
tag.innerText = "点我跳转"; //设置标签名称
tag.href = "http://www.baidu.com"; //设置跳转地址
var id1 = document.getElementById("MyDiv"); //获取标签的对象
id1.appendChild(tag) //放到标签里面
</script>
</body>
< -------------------------[方式2]------------------------- >
<body>
<div id="MyDiv"> </div> <!--指定一个父容器-->
<script type="text/javascript">
var tag = "<a class='c1' href='http://www.baidu.com'>点我啊</a>";
var id1 =document.getElementById("MyDiv"); //加到这个标签的里面
id1.innerHTML = tag; //直接通过inner追加进去
</script>
</body>
◆DOM 属性操作◆
修改类属性: 分别新建两个CSS属性,并通过className方法,实现后期对类属性的修改.
<head>
<style type="text/css">
.show_table{
display: block;
background-color: red;
}
.hide_table{
display: none;
}
</style>
</head>
<body>
<div id="MyDiv" class="show_table"> hello world </div> <!--指定修改的标签-->
<script type="text/javascript">
var ids = document.getElementById("MyDiv"); //通过ID找到标签
ids.className = "hide_table"; //指定使用hid_table的CSS属性
</script>
</body>
修改标签属性: 修改DIV标签id=MyDiv的标签属性,将name=lyshark修改为name=hello.
<body>
<div id="MyDiv" name="lyshark"> hello world </div> <!--准备修改的标签-->
<script type="text/javascript">
var ids = document.getElementById("MyDiv"); //找到DIV标签
document.write("当前 Name= " + ids.getAttribute('name')); //找到div1标签里面的name属性
ids.setAttribute('name','hello'); //将name属性修改为name=hello
document.write("修改后 Name= " + ids.getAttribute('name')); //修改后,再次打印出结果
</script>
</body>
修改标签样式: 修改标签的CSS代码的格式,可以修改多个,但是标签中必须存在该字段,否则无法修改.
<body>
<div id="MyDiv" name="lyshark" style="background-color: red "> hello world </div>
<script type="text/javascript">
var ids = document.getElementById("MyDiv"); //找到DIV标签
ids.style.backgroundColor = "green"; //将背景色改成绿色
</script>
</body>
伪造表单提交: 自己实现一个submit的表单提交功能,自己定义提交按钮的功能.
<body>
<form id="MyForm">
<input type="text">
<input type="submit" value="submit提交">
<a onclick="Submit()">自定义提交</a>
</form>
<script type="text/javascript">
function Submit(){
var form = document.getElementById("MyForm");
form.submit();
}
</script>
</body>
JavaScript 事件绑定
◆键盘事件◆
keyDown: 当键盘按下某个键时会触发KeyDown事件,用于浏览器窗体,图像,超链接,文本区域.
<body>
<input type="text" name="text" onkeydown="func_keydown()">
<script type="text/javascript">
function func_keydown() {
alert("你按下了一个键..")
}
</script>
</body>
keyUp: 当键盘松开某个键时会触发Keyup事件,用于浏览器窗体,图像,超链接,文本区域.
<body>
<input type="text" name="text" onkeyup="func_keyup()">
<script type="text/javascript">
function func_keyup() {
alert("你按松开了一个键..")
}
</script>
</body>
KeyPress: 当键盘上同时按下一个键并且同时弹出,则执行指定的函数.
<body>
<input type="text" name="text" onkeypress="func_keypress()">
<script type="text/javascript">
function func_keypress() {
alert("同时按下并弹出..")
}
</script>
</body>
Resize: 当浏览器窗口或帧的大小发生变化时触发Resize事件.
<body onresize="mesg()">
<script type="text/javascript">
function mesg() {
document.write("窗口大小已被改变了..." + "<br>")
}
</script>
</body>
keycode: 用户在body区域中按下空格键,触发弹出信息框.
<body onkeypress="keycode()">
<script type="text/javascript">
function keycode() {
if(window.event.keyCode == 32){
alert("您按下了空格...");
}
}
</script>
</body>
◆鼠标事件◆
Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.
<body>
<input type="button" id="button1" value="按钮1" onclick="alert('按钮1被按下了...')">
<input type="button" id="button2" value="按钮2" onclick="alert('按钮2被按下了...')">
<script type="text/javascript">
</script>
</body>
MouseDown&MouseUP: 当我们按下鼠标,系统触发MouseDown事件,释放鼠标时自动触发MouseUP事件.
<body>
<input type="button" value="点我" onmousedown="down()">
<input type="button" value="点我" onmouseup="up()">
<script type="text/javascript">
function down() {
document.write("你按下了按键...")
}
function up() {
document.write("你释放了按键...")
}
</script>
</body>
MouseOver&MouseOut: 鼠标指针到达一个对象之上时,触发MouseOver事件,鼠标离开时触发MouseOut事件.
<body>
<input type="submit" value="鼠标在按钮上" onmouseover="in_over()"></input>
<input type="submit" value="鼠标离开按钮" onmouseout="out_over()"></input>
<script type="text/javascript">
function in_over() {
alert("鼠标在按钮上...")
}
function out_over(){
alert("鼠标离开按钮...")
}
</script>
</body>
◆其他事件◆
OnClick: 通用事件,可以绑定到任何可以操作的标签中,当事件触发后,执行对应的函数体.
<body>
<input type="button" value="弹窗" onclick="show()">
<script type="text/javascript">
function show(){
alert("触发弹窗一个窗口提示...")
}
</script>
</body>
Focus&Blur: 当屏幕上的光标进入对象区域内时触发focus事件,反之当光标离开时触发blur事件.
<body>
<input onfocus="Focus(this);" onblur="Blur(this);"
id="search" value="请输入关键字" style="color: gray;" />
<script type="text/javascript">
function Focus(ths){ //光标来到执行
ths.style.color = "black";
if(ths.value == '请输入关键字' || ths.value.trim() == ""){
ths.value = "";
}
}
function Blur(ths){ //光标离开执行
if(ths.value.trim() == ""){
ths.value = '请输入关键字';
ths.style.color = 'gray';
}else{
ths.style.color = "black";
}
}
</script>
</body>
Submit(1): 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.
<body>
<form name="forms" method="post" onsubmit="return check()">
<input type="text" name="texts" size="20">
<input type="submit" value="提交">
</form>
<script type="text/javascript">
function check() {
if(document.forms.texts.value == ""){
document.forms.focus()
alert("用户没有输入任何内容...")
return false
}else
{
alert("用户输入了内容...")
return true
}
}
</script>
</body>
Submit(2): 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.
<body>
<form action="https://www.baidu.com">
<input type="text" id="username">
<input type="submit" value="提交" onclick="return MySub()">
</form>
<script type="text/javascript">
function MySub(){
var user = document.getElementById("username");
if(user.value.length > 0){
alert("编辑框内有数据,允许提交数据..")
return true;
}else
{
alert("用户名输入不能为空...")
return false;
}
}
</script>
</body>
Reset: 通常情况下和form标记配合使用,其起到的作用是,当用户完成信息输入后,按下按钮自动清空已经输入的数据.
<body>
<form name="forms" method="post" >
<input type="text">
<input type="password">
<input type="reset" value="重置" onreset="reset()">
</form>
<!--<script type="text/javascript">-->
<!--function reset(){-->
<!--alert("内容已经清空了...")-->
<!--return 1-->
<!--}-->
<!--</script>-->
</body>
Change: 当文本区域中的鼠标指针移离该对象时,若对象内容与原来内容不同,则就会触发Change事件.
<body>
<textarea name="text" rows="3" cols="30" value=""
onchange="show()"></textarea>
<script type="text/javascript">
function show(){
alert("您在文本框中添加了新的内容...")
}
</script>
</body>
Select: 当一个文本框,文本区域对象中的文本被选中时就会触发Select事件,未被选择则不会出现提示框.
<body>
<input type="text" value="hello lyshark" onselect="show()">
<script type="text/javascript">
function show(){
alert("您选中了文本框中的文本内容...")
}
</script>
</body>
Error: 当网页因为某种原因出现错误时就会触发,在错误处理程序中可以绑定操作,该标签常用与<body>,<img>配合.
<body>
<img src="temp.jpg" onerror="error_msg()">
<script type="text/javascript">
function error_msg(){
alert("图片加载失败了...")
}
</script>
</body>
JQuery常用选择器
ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.
<body>
<div id="1000"> hello lyshark </div>
<div id="2000"> hello lyshark </div>
<div id="3000"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#2000").css("background","red"); //通过ID号选择指定元素
var temp = $("#1000").text(); //获取到文本的内容
document.write("文本内容: " + temp); //打印出这个文本的内容
</script>
</body>
标签选择器: 通过使用$("element")标识前缀,匹配页面中所有P标签,并设置成红色.
<body>
<div id="1000"> hello lyshark </div>
<p id="2000"> hello p</p>
<div id="3000"> hello lyshark </div>
<p id="4000"> hello p</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("p").css("background","red"); //通过p标签定位修改所有P标签
</script>
</body>
类选择器: 通过使用$("ClassName")标识前缀,匹配页面中所有class="MyClass"的类属性.
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<div class="lyshark"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass").css("background","green"); //通过.MyClass找到一类属性并修改
</script>
</body>
通配符选择器: 通过使用$("body*")标识前缀,匹配页面中所有开头是div的标签,并设置成绿色.
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<h1 class="lyshark"> hello lyshark </h1>
<div class="lyshark"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("div*").css("background","green"); //修改所有div标签的属性
</script>
</body>
组合选择器: 使用组合选择器可以扩大选择器的选择范围,可以通过逗号分隔符分割多个不同的选择器.
<body>
<h1 class="MyClass"> hello lyshark </h1>
<div class="MyClass">
<div id="MyID1">hello MyID1 </div>
<div id="MyID2">hello MyID2 </div>
</div>
<div id="lyshark"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass #MyID1 , h1 , #lyshark").css("background","green");
</script>
</body>
属性选择器: 根据元素的属性及其值作为过滤条件,来匹配DOM元素,它以中括号作为分界符.
<body>
<input type="text" name="Text" value="标签1">
<input type="password" name="Text">
<p id="id1"> hello P </p>
<p id="id2" alex="sb"> hello P </p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("input[type='text']").css("color","red"); //修改input,且类型是text的标签
$("p[id='id1']").text("修改id1的标题"); //修改标题,是p标签且id=id1的
$("input[name='Text']").val("修改成我"); //将标签中的value属性修改掉
$("p[alex='sb']").css("background","red"); //也可以自定义查找标签
</script>
</body>
后代选择器: 该选择器常用于批量修改,匹配所有的后代,所有选中的DIV标签后代都会应用变化.
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass div").css("background","green"); //修改指定.MyClass下的所有DIV标签
</script>
</body>
子代选择器: 子代选择器常用于缩小查询范围,在匹配的父元素下,选择所有匹配的子元素.
<body>
<div class="MyClass">
<div class="div1"> hello div div1</div>
<div class="divA">hello div A</div>
<div class="div2">
<div class="divA">hello div A</div>
<div class="divA">hello div B</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".MyClass > .div2").css("background","green"); //修改.MyClass类里面的,div2的所有子元素
</script>
</body>
相邻选择器: 在所有匹配的元素后选择同级别相邻元素,如下匹配所有跟在.outer后面的所有P标签,并设置成红色.
<body>
<div class="outer">
<p class="outer"> hello p1</p>
<p class="outer"> hello p2</p>
<p class="outer"> hello p3</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer + p").css("color","red"); //匹配所有.outer类中,第一个p标签相邻的元素.
</script>
</body>
兄弟选择器: 兄弟选择器就是在所有匹配的元素后选择同级的所有元素,如下匹配.outer类后面的所有同级DIV标签.
<body>
<div class="outer"> hello div1</div>
<div class="outer"> hello div2</div>
<div class="outer"> hello div3</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".outer~div").css("color","red"); //将属于outer类中的所有同级DIV设置成红色.
</script>
</body>
JQuery 元素的操作
◆文档处理◆
Text(): 该函数常用于设置或者是读取标签里面的内容.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").text(); //查找指定的标签元素内容
document.write("获取到标签的内容: " + temp);
$(".MyAge").text("hello world"); //修改指定的标签元素内容
</script>
</body>
html(): 该函数常用于设置或者是读取标签内容,但是可以在设置标签内容的同时添加格式属性.
<body>
<div class="MyDiv">
<div class="MyName"> hello lyshark </div>
<div class="MyAge"> age:22 </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var temp = $(".MyDiv .MyName").html(); //查找指定的标签元素内容
document.write("获取到标签的内容: " + temp);
$(".MyAge").html("<b> hell html </b>"); //修改指定的标签元素内容
</script>
</body>
val(): 用于获取或者是设置指定标签的value值.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="标签1">
<input type="text" name="MyText2" value="标签2">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText1']").val(); //定位并获取文本的value选项
document.write("获取到文本name属性的值: " + data);
$("input[name='MyText2']").val("lyshark"); //修改文本的value属性为lyshark
</script>
</body>
append(): 给指定的标签添加内容,分别可以在开头插入$().prepend,结尾插入$().append等.
<body>
<div class="MyDiv"> hello lyshark ---></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").append("结尾加入"); //在标签结尾插入新数据
$(".MyDiv").prepend("开头加入"); //在标签开头插入新输入
$(".MyDiv").prepend("<b> hello </b>"); //开头插入带格式的文本
</script>
</body>
appendTo(): 该函数可以实现将外部的标签插入到一个块级标签里面,动态添加元素.
<body>
<div class="MyDiv">
<h1 id="Myh1"> hello h1</h1>
</div>
<p> hello p1</p>
<p> hello p2</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("p").appendTo("div"); //将p标签加入到div标签里面
$("p").appendTo("div");
$("div").prependTo("h1")
</script>
</body>
empty()/remove()： 使用empty()可以清空标签中的内容,remove()用于彻底移除标签.
<body>
<p class="p1"> hello p1</p>
<p class="p2"> hello p2</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".p1").empty();
$(".p2").empty(); //清空标签内的内容.
$(".p2").remove(); //彻底移除标签.
</script>
</body>
before()/after(): 可以实现在指定标签的上方(.before)插入内容,或者下(.after)方插入内容.
<body>
<div class="MyDiv">
<div class="div1"> hello div </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv div").before("<h1> before </h1>") //在div上方插入内容
$(".MyDiv div").after("<h1> after </h1>") //在div下方插入内容
</script>
</body>
insertBefore()/insertAfter(): 在每个DIV标签前面(insertBefore)插入新标签,或者在后面(insertAfter)插入.
<body>
<div class="MyDiv"> hello div</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("<span> hello span </span>").insertBefore("div"); //在div前面插入span标签
$("<h1> hello h1</h1>").insertAfter("div"); //在每个div标签后面插入h1
</script>
</body>
replaceWith(): 查找与替换,将所有的类属性是class=".MyDiv"的标签替换成粗体的hello div.
<body>
<div class="MyDiv"> hello div1 </div>
<div class="MyDiv"> hello div2 </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyDiv").replaceWith("<b> hello div </b>"); //将所有div标签替换成粗体的hello div
</script>
</body>
clone: 克隆并追加一个DIV标签,追加到body页面中.
<body>
<div class="MyDiv"> hello div1 </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("body").append($("div").clone()); //克隆并追加到body中.
$("body").append($("div").clone());
</script>
</body>
◆属性操作◆
attr(): 可实现获取和设置,指定标签的属性信息.
<body>
<div class="MyDiv">
<input type="text" name="MyText1" value="标签1">
<input type="text" name="MyText2" value="标签2">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var names = $("input[name='MyText2']").attr("name"); //获取MyText2标签的name字段内容
var types = $("input[type='text']").attr("type"); //获取Type标签的type字段内容
document.write("标签name字段内容: " + names + "<br>");
document.write("标签type字段内容: " + types + "<br>");
$("input[name='MyText2']").attr("name","lyshark"); //将MyText2标签的name字段修改成lyshark
</script>
</body>
removeAttr(): 找到指定的字段并可以自定义移除相关字段.
<body>
<input type="text" name="MyText" value="标签1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='MyText']").attr("value"); //找到value字段的内容
document.write("当前value值: " + data);
$("input[name='MyText']").removeAttr("value"); //移除value字段的内容
</script>
</body>
prop(): 设置标签的属性,常用于设置单选框和复选框.
<body>
<input type="checkbox" name="check">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("input[name='check']").prop("checked"); //获取checkbox默认状态
document.write("选择框默认状态:" + data)
$("input[name='check']").prop("checked",true); //设置checkbox为选中状态
$("input[name='check']").prop("disabled",true); //设置checkbox为禁用状态
</script>
</body>
removeprop： 删除由prop设置的属性集,(不明白)
<body>
<input type="checkbox" name="check">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("input[name='check']").prop("disabled",true);
$("input[name='check']").removeProp("");
</script>
</body>
addClass(): 动态的将一个CSS属性添加到一些标签中.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="MyClass"> hello lyshark </div>
<div class="MyClass"> hello lyshark </div>
<script type="text/javascript">
$(".MyClass").addClass("mode"); //对所有的MyClass标签,添加mode的属性.
</script>
</body>
removeClass: 动态的将一个CSS属性在标签中删除.
<head>
<style type="text/css">
.mode{
background-color: #17a2b8;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<div class="mode"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("div").removeClass("mode"); //删除所有div标签中的mode类属性.
</script>
</body>
toggleClass: 实现了动态的切换类的样式.使标签不可见.
<style type="text/css">
.show{
background-color: #17a2b8;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("div").toggleClass("hidden"); //切换成隐藏属性
</script>
</body>
hasClass(): 该函数用来判断当前的样式,存在返回真,不存在返回假.
<style type="text/css">
.mode{
background: red;
}
</style>
</head>
<body>
<div class="mode"> hello lyshark </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("div").hasClass("mode");
document.write(data)
</script>
</body>
◆样式操作◆
修改CSS属性:
<body>
<div class="MyClass1" style="background-color: rebeccapurple"> hello lyshark</div>
<div class="MyClass2" style="font-size: 30px"> hello lyshark</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css("background-color","red"); //修改MyClass1的背景属性
$(".MyClass2").css("font-size","10px"); //修改MyClass2的字体大小
</script>
</body>
追加CSS属性:
<body>
<div class="MyClass1"> hello lyshark</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyClass1").css({"background-color":"red","font-size":"20px"});
</script>
</body>
JQuery 常用筛选器
◆过滤筛选器◆
first()/last(): first()筛选出所有li标签中第一个标签,last()筛选出所有标签中的最后一个标签.
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:first").text(); //找出第一个标签的标签内容
document.write("第一个标签内容是:" + data + "<br>");
var data = $("li:last").text(); //找出最后一个标签的标签内容
document.write("最后一个标签内容是:" + data + "<br>");
$("li:last").remove(); //实现移除最后一个标签
$("li:last").append("<li>添加</li>"); //实现添加一个新标签
</script>
</body>
even()/odd(): even()筛选出所有li标签中偶数标签,odd()筛选出所有li标签中基数标签.
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul li:even").text();
document.write("基数标签为: " + data + "<br>");
var count = $(".MyClass ul li:even");
document.write("基数标签个数: " + count.length + "<br>");
var data = $(".MyClass ul li:odd").text();
document.write("偶数标签为: " + data + "<br>");
var count = $(".MyClass ul li:odd");
document.write("偶数标签个数: " + count.length);
</script>
</body>
eq(): 过滤出所有li标签中,索引是2的那个标签.
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:eq(2)").text(); //所有li标签中,索引是2的标签
document.write("索引是2的标签内容是: " + data + "<br>");
var data = $("li:eq(0)").text(); //所有li标签中,索引是0的标签
document.write("索引是0的标签内容是: " + data + "<br>");
var data = $(".MyClass ul li").eq(4); //另一种写法,结果相同.
document.write("索引是4的标签内容是: " + data.text() + "<br>");
</script>
</body>
gt(): 所有li标签中，索引大于2的标签
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:gt(2)").text(); //所有li标签中,索引大于2的标签
document.write("索引大于2的标签内容是: " + data + "<br>");
</script>
</body>
lt(): 所有li标签中，索引小于3的标签
<body>
<div class="MyClass">
<ul>
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("li:lt(3)").text(); //所有li标签中,索引小于3的标签
document.write("索引小于3的标签内容是: " + data + "<br>");
</script>
</body>
hasclass(): 检测li中的是否含有某个特定的类，有的话返回true
<body>
<div class="MyClass">
<ul class="lyshark">
<li>首页</li>
<li>主机</li>
<li>系统</li>
<li>菜单</li>
<li>搞事</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $(".MyClass ul").hasClass("lyshark");
document.write(data);
</script>
</body>
◆查找筛选器◆
children(): 获取指定标签的所有子标签,以下在类名为"MyForm"盒子里,找所有div子标签,并将其设置为绿色.
<body>
<form class="MyForm">
<div class="Mydiv"> hello lyshark </div>
<div class="Mydiv"> hello lyshark </div>
<p> hello lyshark </p>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".MyForm").children(".Mydiv").css("color","green");
</script>
</body>
parent(): 获取指定标签的所有父标签,以下代码找所有P标签的父标签,并设置成红色.
<body>
<div class="Mydiv"> hello lyshark
<p> hello p </p>
<p> hello p </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var data = $("p").parent().css("color","red");
</script>
</body>
next(): 寻找指定标签的下一个标签,以下代码根据第1个Mydiv1为条件寻找下一个div.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("div").next().css("background","red");
$(".Mydiv1").next().css("background","red");
</script>
</body>
prev(): 寻找指定标签的上一个标签,以下代码根据第2个Mydiv2为条件寻找上一个div.
<body>
<div class="Mydiv1">
<p> hello p </p>
</div>
<div class="Mydiv2">
<p> hello p </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv2").prev().css("background","red");
</script>
</body>
siblings(): 查找标签的所有兄弟标签,查找所有的同辈标签.
<body>
<div class="Mydiv1">
<div class="Min">hello div</div>
</div>
<div class="Mydiv2">
<div class="Min">hello div</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(".Mydiv1").siblings().css("background","red");
</script>
</body>
find(): 在form标签中找到text,password标签,并将其设置为绿色.
<body>
<form class="forms" method="post">
<input type="text" value="用户名">
<input type="password" value="密码">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("form").find(":text,:password").css({"color":"red","background":"green"})
</script>
</body>
Jquery组合使用： jquery之间的命令是可以组合来使用的,常见的组合如下所示
<div id="profile_block">
姓名：
<a href="https://www.baidu.com">lyshark</a>
<br>
年龄：
<a href="https://www.baidu.com" title="入园时间：2018-09-28">20年2个月</a>
<br>
粉丝：
<a href="https://www.blib.cn">999</a>
</div>
$('#profile_block').find('a').eq(0).text("name");
$('#profile_block').find('a').eq(1).text("name");
$('#profile_block').find('a').eq(1).attr("title","更改指定列");
$("#profile_block").find("a").eq(1).after("<br>测试： <a href="https://www.xxx.com/">显示内容</a>");
JQuery 事件的处理
注册单次事件: one()方法是bind()方法的特例,由它绑定的事件在执行一次相应后就会失效.
<body>
<p id="MyP"> </p>
<input type="button" id="MyID" value="添加内容" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#MyID").one("click",function(){
$("p").append("hello lyshark"); //给P标签添加内容
});
</script>
</body>
注册循环事件: bind()作为统一的接口,用来为每个匹配元素绑定事件处理程序.
<body>
<input type="button" id="MyID1" value="无参数绑定" />
<input type="button" id="MyID2" value="带参数绑定" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#MyID1").bind("click",function(){
alert("绑定无参数的事件...")
});
$("#MyID2").bind("click",{x:"参数1",y:"参数2"},function(event){
$(this).text(event.data.x + event.data.y);
});
</script>
</body>
绑定事件：
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#MyButton").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落</p>
<button type="button" id="MyButton" class="btn btn-primary">点我隐藏p标签</button>
</body>
</html>
绑定多个事件:
<body>
<input type="button" id="MyID1" value="按钮1" />
<input type="button" id="MyID2" value="按钮2" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#MyID1,#MyID2").click(function(){
var currentId = $(this).attr("id"); //获取它的ID名称
if(currentId == "MyID1"){ //说明点击了按钮1
alert("您点击了按钮1");
}else if(currentId == "MyID2"){ //说明点击了按钮2
alert("您点击了按钮2");
}
});
</script>
</body>
表单数据提交:
<body>
<div class="MyDIV">
姓名: <input type="text" id="input1" />
性别: <input type="text" id="input2" />
年龄: <input type="text" id="input3" />
<input type="button" id="button1">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#button1").click(function(){
var name = $(".MyDIV #input1").val(); //获取到元素值
var sex = $(".MyDIV #input2").val();
var age = $(".MyDIV #input3").val();
alert("姓名: " + name + "性别: " + sex + "年龄: " + age);
});
</script>
</body>
回调函数:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,call_back());
})
});
function call_back() {
alert("回掉函数使用...")
}
</script>
</head>
<body>
<button>隐藏</button>
<p>hello lyshark</p>
</body>
JQuery 常见案例大全
标签克隆的两种实现方式:
<body>
<div>
<p>
<a onclick="Add(this)">+</a>
<input type="text"/>
</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone();
p.find('a').text('-');
p.find('a').attr('onclick','Remove(this)');
$(ths).parent().parent().append(p);
}
function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
</body>
实现记住密码:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var strName = localStorage.getItem('keyName');
var strPass = localStorage.getItem('keyPass');
if(strName){
$('#user').val(strName);
}if(strPass){
$('#pass').val(strPass);
}
if(strName!=null && strPass!=null)
$('#remember').attr("checked",true);
});
function login_click(){
var strName = $('#user').val();
var strPass = $('#pass').val();
if($('#remember').is(':checked')){
localStorage.setItem('keyName',strName);
localStorage.setItem('keyPass',strPass);
}else{
localStorage.removeItem('keyName',strName);
localStorage.removeItem('keyPass');
}
window.location.reload();
}
</script>
<body>
<form action="/" method="post" onsubmit="return login_click();">
账号: <input type="text" id="user" placeholder="用户名" name="username" /><br><br>
密码: <input type="password" id="pass" placeholder="密码" name="password" /><br><br>
记住密码: <input type="checkbox" id="remember">
<input type="submit" value="用户登录"/>
</form>
</body>
全选全不选与反选:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script type="text/javascript">
function CheckAll(){
$('tbody input[type="checkbox"]').prop('checked',true);
}
function CancleAll(){
$('tbody input[type="checkbox"]').prop('checked',false);
}
function ReverseAll() {
$('tbody input[type="checkbox"]').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
</script>
<body>
<table id="tab" border="1" cellspacing="0">
<thead>
<tr>
<th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1001</td>
<td name="user"> lyshark</td>
<td name="email"> lyshark@123.com</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1002</td>
<td name="user"> admin</td>
<td name="email"> admin@123.com</td>
</tr>
</tbody>
</table>
<input type="button" id="but1" value="全选" onclick="CheckAll()" />
<input type="button" id="but1" value="全不选" onclick="CancleAll()" />
<input type="button" id="but1" value="反选" onclick="ReverseAll()" />
</body>
提取选中表格指定字段: 选择框表单,通过选择不同表格读取表格中的数据.
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
var obj = $("#tab"); // 定位到table表格
// 在table中找input下类型为checkbox属性为选中状态的数据
var check = $("table input[type=checkbox]:checked");
check.each(function(){ // 遍历节点
var row = $(this).parent("td").parent("tr"); // 获取选中行
var id = row.find("[name='uid']").html(); // 取出第一行的属性
var name = row.find("[name='user']").html();
alert("选中行的ID: " + id + "名字: " + name)
});
});
});
</script>
<body>
<table id="tab" border="1" cellspacing="0">
<thead>
<tr>
<th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1001</td>
<td name="user"> lyshark</td>
<td name="email"> lyshark@123.com</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td name="uid"> 1002</td>
<td name="user"> admin</td>
<td name="email"> admin@123.com</td>
</tr>
</tbody>
</table>
<input type="button" id="but1" value="选择" onclick="check()" />
</body>