-
jquery相关操作--但是高级有些不太明白
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
- 1
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载jquery文档加载完再执行
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> window.onload = function(){ var oDiv = document.getElementById('div01'); alert('原生javascript获取div;'+oDiv); //原生javascript获取div;[object HTMLDivElement] } //这个会先执行 // $(document).ready(function(){ // var $div = $('#div01'); // alert('jquery获取的div:'+$div); //jquery获取的div:[object Object] // }) // 上面ready的写法可以简写成下面的形式： $(function(){ var $div = $('#div01'); alert('jquery1获取的div:'+$div); //jquery获取的div:[object Object] }) script> head> <body> <div id="div01">这是一个divdiv> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。$('#myId') //选择id为myId的网页元素 $('.myClass') // 选择class为myClass的元素 $('li') //选择所有的li元素 $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素 $('input[name=first]') // 选择name属性等于first的input元素- 1
- 2
- 3
- 4
- 5
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').eq(5); //选择第6个div元素- 1
- 2
- 3
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ //id选择器 var $div = $('#div01'); //类选择器 var $div2 = $('.box'); // 选择所有的li元素==>标签选择器 var $li = $('li'); //层级选择器 var $span = $('.box span'); //属性选择器 var $div3 = $('div[class="box2"]'); //选择包含span标签的div var $div4 = $('div').has('span'); //选择class并不是box2的div var $div5 = $('div').not('.box2'); // 选择第4个li var $li2 = $('li').eq(3); //设置样式 $div.css({'color':'red','font-size':30}); $div2.css({'color':'gold','fontSize':'30px'}); $li.css({'background':'gold','list-style':'none'}); //font-weight加粗 $span.css({'color':'red','font-weight':'bold'}); $div3.css({'color':'pink','font-size':30}); //text-indent 缩进 $div4.css({'text-indent':50}); //text-decoration 下划线 $div5.css({'text-decoration':'underline'}); $li2.css({'text-indent':50}); }) script> head> <body> <div id="div01">这是一个divdiv> <div class="box">这是第二个<span>divspan>div> <div class="box">这是第三个divdiv> <div class="box2">这是第四个divdiv> <ul> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
选择集转移
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素 $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素 $('#box').next(); //选择id是box的元素后面紧挨的同辈元素 $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素 $('#box').parent(); //选择id是box的元素的父元素 $('#box').children(); //选择id是box的元素的所有子元素 $('#box').siblings(); //选择id是box的元素的同级元素 $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ //id选择器 var $div = $('#div01'); //$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素 $div.prev().css({'color':'red'});//p标签 // $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素 //text-indent缩进 $div.prevAll().css({'text-indent':50});// h2 p // $('#box').next(); //选择id是box的元素后面紧挨的同辈元素 $div.next().css({'color':'pink'});//h3 // $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素 $div.nextAll().css({'text-indent':30}); // h3 p // $('#box').parent(); //选择id是box的元素的父元素 $div.parent().css({'background':'#ddd'}); //父级div // $('#box').children(); //选择id是box的元素的所有子元素 $div.children().css({'color':'red'}); // $('#box').siblings(); //选择id是box的元素的同级元素 $div.siblings().css({'text-decoration':'underline'}); // h2 p h3 p // $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素 $div.find('.sp02').css({'font-size':70}); }) script> head> <body> <div> <h2>这是一个h2标题h2> <p>这是第一个段落标签p> <div id="div01">这是一个<span>divspan><span class="sp02">第二个spanspan>div> <h3>这是一个h3标题h3> <p>这是第二个段落标签p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。var $div1 = $('#div1'); var $div2 = $('#div2'); alert($div1.length); // 弹出1 alert($div2.length); // 弹出0 ...... <div id="div1">这是一个div</div>- 1
- 2
- 3
- 4
- 5
- 6
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值操作行间样式
// 获取div的样式
$("div").css("width"); $("div").css("color"); //设置div的样式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"});- 1
- 2
- 3
- 4
- 5
- 6
- 7
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") //移除多个样式 $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式- 1
- 2
- 3
- 4
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <style> .red{ color:red; } .big{ font-size:30px; } .noline{ text-decoration:none; } style> <script> $(function(){ var $div = $('#div01'); var $div2 = $('div'); var $a = $('#link01'); //读取样式属性值 var sSize = $div.css('font-size'); //文字大小默认是16px // alert(sSize);//16px //写样式属性，也叫设置样式属性 // 设置一个样式属性可以不写成字典的形式 $div.css('color','red'); //font-weight 加粗 $div.css({'font-size':30,'font-weight':'bold'}); //读取多个元素样式属性值，得到的是第一个元素的值 var sSize2 = $div2.css('font-size'); // alert(sSize2);//30px //操作样式类名 // $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $a.addClass('red'); $a.addClass('big'); $a.addClass('noline'); // $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 // $("#div1").removeClass("divClass divClass2") //移除多个样式 $a.removeClass('red'); $a.removeClass('noline'); }) script> head> <body> <div id="div01">这是一个divdiv> <div>这是第二个divdiv> <a href="#" id="link01">这是一个链接a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) })- 1
- 2
- 3
- 4
- 5
- 6
- 7
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取var $li = $('.list li').eq(1); alert($li.index()); // 弹出1 ...... <ul class="list"> <li>1li> <li>2li> <li>4li> <li>5li> <li>6li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $li = $('.list li');//选中八个li var $p = $('p'); //绑定click事件 $li.click(function(){ //this表示当前发生的对象，他是一个原生js对象 点哪一个就是哪一个是this // this.style.background = 'red'; //原生对象 //$(this)表示当前发生事件的jquery对象 $(this).css('background','gold'); //获取当前点击的li的索引值 // alert($(this).index()); }) alert($p.eq(0).index()); //0 alert($p.eq(1).index()); //0 }) script> head> <body> <ul class="list"> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> ul> <div> <p>这是第一个段落p> div> <div> <p>这是第二个段落p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
选项卡案例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> .tab_con{ width:500px; height:350px; margin:50px auto 0; } .tab_btns{ height:50px; } .tab_btns input{ width:100px; height:50px; background:#ddd; border:0px; /* 轮廓 */ outline:none; } .tab_btns .active{ background:gold; } .tab_cons{ height:300px; background:gold; } .tab_cons div{ height:300px; line-height:300px; text-align:center; display:none; font-size:30px; } .tab_cons .current{ /* 转换位块元素 */ display:block; } style> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ //选择三个按钮 var $btn = $('.tab_btns input'); // alert($btn.length); //选择三个div var $div = $('.tab_cons div'); $btn.click(function(){ //addClass当前添加class=active //siblings 反选到兄弟节点上 //removeClass 移除class = active $(this).addClass('active').siblings().removeClass('active'); // alert( $(this).index() ); $div.eq($(this).index()).addClass('current').siblings().removeClass('current'); }) }) script> head> <body> <div class="tab_con"> <div class="tab_btns"> <input type="button" value="按钮一" class="active"> <input type="button" value="按钮二"> <input type="button" value="按钮三"> div> <div class="tab_cons"> <div class="current">按钮一对应的内容div> <div>按钮二对应的内容div> <div>按钮三对应的内容div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
/* animate参数： 参数一：要改变的样式属性值，写成字典的形式 参数二：动画持续的时间，单位为毫秒，一般不写单位 参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动 参数四：动画回调函数，动画完成后执行的匿名函数 */ $('#div1').animate({ width:300, height:300 },1000,'swing',function(){ alert('done!'); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <style> .box{ width: 200px; height: 200px; background: gold; } style> <script> $(function(){ var $btn = $('#btn'); var $box = $('.box'); $btn.click(function(){ // $box.css({'width':1000}) // $box.animate({'width':1000}); /* animate的参数 参数一：要做动画的样式属性，写成字典形式 参数二：动画持续的时间，默认是400毫秒，设置时不写单位 参数三：动画曲线，默认是'swing',缓冲运动，还有'linear' 匀速运动 可以不写 参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用 */ // $box.animate({'width':1000},1000,'swing'); // $box.animate({'width':1000},1000,'swing',function(){ // alert('动画完毕'); // }); $box.animate({'width':1000},1000,'swing',function(){ $box.animate({'margin-top':400},1000,function(){ $box.animate({'width':200,'margin-top':0},1000); }); }); }) }) //持续动 $(function(){ var $btn = $('#btn'); var $box = $('.box'); $btn.click(function fnMove(){ //$box.css({'width':1000}); // $box.animate({'width':1000}); /* animate的参数 参数一：要做动画的样式属性，写成字典形式 参数二：动画持续的时间，默认是400毫秒，设置时不写单位 参数三：动画曲线，默认是'swing',缓冲运动，还有'linear' 匀速运动 参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用 */ $box.animate({'width':1000},1000,'swing',function(){ $box.animate({'margin-top':400},1000,function(){ $box.animate({'width':200,'margin-top':0},1000,function(){ fnMove(); }) }) }); }) }) script> head> <body> <input type="button" value="动画" id="btn"> <div class="box">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
jquery特殊效果
fadeIn() 淡入 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <style> .box{ width: 200px; height: 200px; background: gold; display: none; } style> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $btn = $('#btn'); var $box = $('.box'); $btn.click( function(){ //元素显示隐藏效果 // hide() 隐藏元素 // $box.hide(); //display: none;相当于隐藏 // show() 显示元素 // $box.show(); //display: block相当于显示 // toggle() 切换元素的可见状态 // $box.toggle(); //元素淡入淡出效果 // fadeIn() 淡入 // $box.fadeIn(); //先默认隐藏 // fadeOut() 淡出 // $box.fadeOut(); //先默认是显示 // fadeToggle() 切换淡入淡出 // $box.fadeToggle(); // slideUp() 向上卷起 // $box.slideUp(); // slideDown() 向下展开 // $box.slideDown(); // slideToggle() 依次展开或卷起某个元素 // $box.slideToggle(); //slideToggle特性 解决这个问题stop记录之前的动画全部停止，保留最后一次 $box.stop().slideToggle(); } ) }) script> <body> <input type="button" value="动画" id="btn"> <div class="box">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素- 1
- 2
- 3
- 4
- 5
- 6
- 7
层次菜单
示例实现DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级菜单title> <style type="text/css"> body{ font-family:'Microsoft Yahei'; } body,ul{ margin:0px; padding:0px; } ul{list-style:none;} .menu{ width:200px; margin:20px auto 0; } .menu .level1,.menu li ul a{ display:block; width:200px; height:30px; line-height:30px; text-decoration:none; background-color:#3366cc; color:#fff; font-size:16px; text-indent:10px; } .menu .level1{ border-bottom:1px solid #afc6f6; } .menu li ul a{ font-size:14px; text-indent:20px; background-color:#7aa1ef; } .menu li ul li{ border-bottom:1px solid #afc6f6; } .menu li ul{ display:none; } .menu li ul.current{ display:block; } .menu li ul li a:hover{ background-color:#f6b544; } style> <script src="js/jquery-1.12.4.min.js">script> <script type="text/javascript"> $(function(){ var $a = $('.level1'); $a.click(function(){ // $(this).next().stop().slideToggle(); //parent转移到父级 siblings转移到li $(this).next().stop().slideToggle().parent().siblings() .children('ul').slideUp(); }) }) script> head> <body> <ul class="menu"> <li> <a href="#" class="level1">手机a> <ul class="current"> <li><a href="#">iPhone X 256Ga>li> <li><a href="#">红米4A 全网通a>li> <li><a href="#">HUAWEI Mate10a>li> <li><a href="#">vivo X20A 4GBa>li> ul> li> <li> <a href="#" class="level1">笔记本a> <ul> <li><a href="#">MacBook Proa>li> <li><a href="#">ThinkPada>li> <li><a href="#">外星人(Alienware)a>li> <li><a href="#">惠普(HP)薄锐ENVYa>li> ul> li> <li> <a href="#" class="level1">电视a> <ul> <li><a href="#">海信(hisense)a>li> <li><a href="#">长虹(CHANGHONG)a>li> <li><a href="#">TCL彩电L65E5800Aa>li> ul> li> <li> <a href="#" class="level1">鞋子a> <ul> <li><a href="#">新百伦a>li> <li><a href="#">adidasa>li> <li><a href="#">特步a>li> <li><a href="#">安踏a>li> ul> li> <li> <a href="#" class="level1">玩具a> <ul> <li><a href="#">乐高a>li> <li><a href="#">费雪a>li> <li><a href="#">铭塔a>li> <li><a href="#">贝恩斯a>li> ul> li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
jquery属性操作
1、html() 取出或设置html内容
// 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字span>');- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、prop() 取出或设置某个属性的值
// 取出图片的地址 var $src = $('#img1').prop('src'); // 设置图片的地址和alt属性 $('#img1').prop({src: "test.jpg", alt: "Test Image" });- 1
- 2
- 3
- 4
- 5
- 6
- 7
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $a = $('#link01'); //读取属性值 var sId = $a.prop('id'); // alert(sId);//link01 //写属性值，也叫做设置属性值 $a.prop({'href':'http://www.baidu.com','title':'这是百度的链接'}); //读取元素包裹的内容 var sTr = $a.html(); // alert(sTr); //这是一个链接 //设置元素包裹的内容 $a.html('百度网'); // 不规范，可以这样做 $a.html('- 列表文字
- 列表文字
- 列表文字
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
聊天对话框实现
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style type="text/css"> .talk_con{ width:600px; height:500px; border:1px solid #666; margin:50px auto 0; background:#f9f9f9; } .talk_show{ width:580px; height:420px; border:1px solid #666; background:#fff; margin:10px auto 0; overflow:auto; } .talk_input{ width:580px; margin:10px auto 0; } .whotalk{ width:80px; height:30px; float:left; outline:none; } .talk_word{ width:420px; height:26px; padding:0px; float:left; margin-left:10px; outline:none; text-indent:10px; } .talk_sub{ width:56px; height:30px; float:left; margin-left:10px; } .atalk{ margin:10px; } .atalk span{ display:inline-block; background:#0181cc; border-radius:10px; color:#fff; padding:5px 10px; } .btalk{ margin:10px; text-align:right; } .btalk span{ display:inline-block; background:#ef8201; border-radius:10px; color:#fff; padding:5px 10px; } style> <script src="js/jquery-1.12.4.min.js">script> <script type="text/javascript"> // 写出对应功能代码 $(function(){ var $words = $('#words'), $who = $('#who'), $talkwords = $('#talkwords'); $talksub = $('#talksub'); $talksub.click(function(){ // // 读取属性值 // var sVal01 = $who.prop('value'); //读取下拉框的值 // var sVal02 = $talkwords.prop('value'); //读取输入框的值 // alert(sVal02); // //清除输入框里面的内容 // $talkwords.prop({'value':''}); //操作value属性可以改成下面的val方法的写法: //读取属性值 var sVal01 = $who.val(); var sVal02 = $talkwords.val(); //清除输入框里面的内容 $talkwords.val(''); //判断输入框是否为空 if(sVal02 == ''){ alert('请输入内容!'); return; } //拼接字符串 var sTr = ''; if(sVal01==0){ sTr = 'A说：'+ sVal02 +''; } else{ sTr = 'B说：'+ sVal02 +''; } // alert($words.html()); $words.html($words.html()+sTr); }) }) script> head> <body> <div class="talk_con"> <div class="talk_show" id="words"> <div class="atalk"><span>A说：吃饭了吗？span>div> <div class="btalk"><span>B说：还没呢，你呢？span>div> div> <div class="talk_input"> <select class="whotalk" id="who"> <option value="0">A说：option> <option value="1">B说：option> select> <input type="text" class="talk_word" id="talkwords"> <input type="button" value="发送" class="talk_sub" id="talksub"> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
jquery事件
事件函数列表：
blur() 元素失去焦点 focus() 元素获得焦点 change() 当表单元素的值发生改变时 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） ready() DOM加载完成 submit() 用户递交表单- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $input = $('#input01'); var $form = $('#from01'); // $input.click(function(){ // alert($(this).val()); // }) //绑定失去焦点的事件 $input.blur(function(){ // alert($(this).val()); }) $form.submit(function(){ // alert('提交了!'); //判断数据是否合法 //阻止表单提交 return false; }) }) script> head> <body> <form id="from01"> <label>用户名：label> <input type="text" id="input01" name="username"> <input type="submit" value="提交"> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
focus和change事件
change() 当表单元素的值发生改变时和focus() 元素获得焦点–不太理解focus
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $input = $('#input01'); //绑定获取焦点的事件 // $input.focus(function(){ // console.log('aaaa'); // alert( $(this).val() ); // }) // 在focus上绑定函数会反复触发，一般不这么用,可以用click事件代替 // focus一般用在让元素起始就获得焦点 $input.focus(); // 绑定change事件 $input.change(function(){ console.log( $(this).val() ); }) }) script> head> <body> <input type="text" id="input01"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .box{ width: 200px; height: 200px; background: gold; margin: 50px auto; } .box2{ width: 100px; height: 100px; background: green; } style> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $box = $('.box'); // //绑定鼠标移入事件 // $box.mouseover(function(){ // $(this).animate({'margin-top':100}); // }) // //绑定鼠标移出事件 // $box.mouseout(function(){ // $(this).animate({'margin-top':50}); // }) // 上面的移入移出事件，移到子元素也会触发，如果不希望触发，可以改成下面的形式： //绑定鼠标移入事件 $box.mouseenter(function(){ $(this).animate({'margin-top':100}); }) //绑定鼠标移出事件 $box.mouseleave(function(){ $(this).animate({'margin-top':50}); }) }) script> head> <body> <div class="box"> <div class="box2">div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
表单验证
1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。2、正则表达式的写法：
var re=new RegExp('规则', '可选参数'); var re=/规则/参数;- 1
- 2
3、规则中的字符
1）普通字符匹配： 如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’ 2）转义字符匹配： \d 匹配一个数字，即0-9 \D 匹配一个非数字，即除了0-9 \w 匹配一个单词字符（字母、数字、下划线） \W 匹配任何非单词字符。等价于[^A-Za-z0-9_] \s 匹配一个空白符 \S 匹配一个非空白符 . 匹配一个任意字符 var sTr01 = '123456asdf'; var re01 = /\d+/;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
//匹配纯数字字符串
var re02 = /^\d+$/; alert(re01.test(sTr01)); //弹出true alert(re02.test(sTr01)); //弹出false- 1
- 2
- 3
4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次） + 出现一次或多次（至少出现一次） * 出现零次或多次（任意次） {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次- 1
- 2
- 3
- 4
- 5
- 6
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符 [a-z0-9] : 匹配a到z或者0到9中的任意一个字符- 1
- 2
6、限制开头结尾
^ 以紧挨的元素开头 $ 以紧挨的元素结尾- 1
- 2
7、修饰参数：
g： global，执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） i： ingore case，忽略大小写，默认大小写敏感- 1
- 2
8、常用方法
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假正则默认规则
匹配成功就结束，不会继续匹配，区分大小写常用正则规则
//用户名验证：(数字字母或下划线6到20位) var reUser = /^\w{6,20}$/; //邮箱验证： var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i; //密码验证： var rePass = /^[\w!@#$%^&*]{6,20}$/; //手机号码验证： var rePhone = /^1[34578]\d{9}$/;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script> //定义正则表达式 var reTest01 = /a/; var reTest02 = /a/i; //i 忽略大小写 var reTest03 = /\d+/; //+出现1次到多次 var reTest04 = /^\d+$/; //^开头是数字，$结尾也是数字 var sTr01 = 'abc'; var sTr02 = 'Abc'; var sTr03 = '123456'; var sTr04 = '123456abcdef'; // alert(reTest01.test(sTr01)); //true // alert(reTest01.test(sTr02)); //false // alert(reTest02.test(sTr02)); //true // alert(reTest03.test(sTr03)); //true // alert(reTest03.test(sTr04)); //true 只要前面有数字就OK了 alert(reTest04.test(sTr03)); //true alert(reTest04.test(sTr04)); //false script> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click(function(event) { alert('grandfather'); }); }) ...... <div class="father"> <div class="son"> <div class="grandson">div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
阻止默认行为
阻止表单提交$('#form1').submit(function(event){ event.preventDefault(); })- 1
- 2
- 3
合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用// event.stopPropagation(); // event.preventDefault(); // 合并写法： return false;- 1
- 2
- 3
- 4
- 5
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .grandfather{ width:300px; height:300px; background:purple; } .father{ width:200px; height:200px; background:gold; /* 相对定位 */ position: relative; } .son{ width:100px; height:100px; background:red; /* 绝对定位 */ position: absolute; left:0px; top:400px; } style> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ $('.son').click(function(){ alert(1); //阻止事件冒泡的简略写法 只会得到1 return false; }) // 父级阻止事件冒泡 $('.father').click(function(ev){ alert(2); // 阻止事件冒泡的完整写法： ev.stopPropagation(); //只会得到2 }); $('.grandfather').click(function(){ alert(3); }) // $(document) 代表最顶级的标签 $(document).click(function(){ alert(4); }); }) script> <script src="js/jquery-1.12.4.min.js">script> head> <body> <div class="grandfather"> <div class="father"> <div class="son">div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
弹框
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/main.css"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script type="text/javascript"> $(function(){ $('#btn01').click(function(){ alert('1'); $('#pop').show(); //按钮阻止click的事件冒泡 return false; }) $('#shutoff').click(function(){ alert('2'); $('#pop').hide(); }); // 点击弹框其他的地方，关闭弹框 $(document).click(function(){ alert('3'); $('#pop').hide(); }); // 点击弹框，弹框不应该隐藏，所以弹框也需要阻止冒泡 $('.pop_con').click(function(){ alert('4'); return false; }) }) script> head> <body> <input type="button" value="弹出弹框" id="btn01"> <div class="pop_main" id="pop"> <div class="pop_con"> <div class="pop_title"> <h3>系统提示h3> <a href="#" id="shutoff">×a> div> <div class="pop_detail"> <p class="pop_text">亲！请关注近期的优惠活动！p> div> <div class="pop_footer"> div> div> <div class="mask">div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){ $ali = $('#list li'); $ali.click(function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1li> <li>2li> <li>3li> <li>4li> <li>5li> ul> 事件委托的写法 $(function(){ $list = $('#list'); $list.delegate('li', 'click', function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1li> <li>2li> <li>3li> <li>4li> <li>5li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $li = $('.list li'); var $ul = $('.list'); // $li.click(function(){ // $(this).css({'background': 'red'}); // }) //上面的写法性能不高，可以改成下面事件委托的写法 $ul.delegate('li','click',function(){ $(this).css({'background': 'red'}); }) }) script> head> <body> <ul class="list"> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> <li>列表文字li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
Dom操作
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中创建新标签
var $div = $('<div>'); //创建一个空的div var $div2 = $('<div>这是一个div元素div>');- 1
- 2
移动或者插入标签的方法
1、append()和appendTo()：在现存元素的内部，从后面放入元素var $span = $('<span>这是一个span元素span>'); $('#div1').append($span);- 1
- 2
…
2、prepend()和prependTo()：在现存元素的内部，从前面放入元素3、after()和insertAfter()：在现存元素的外部，从后面放入元素
4、before()和insertBefore()：在现存元素的外部，从前面放入元素
删除标签
$('#div1').remove();- 1
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> $(function(){ var $div = $('#div01'); var $p01 = $('#p01'); var $h01 = $('#h01'); var $p02 = $('#p02'); //当前元素的里面的后面要放另外一个元素 把div01外面的p标签
放到了 //后面 $div.append($p01); // 当前元素里面的前面要放另外一个元素div01里面的h3标题
div01里面的p标签
div01外面的h2标签
放到 $div.prepend($h01); // 当前元素要放到另外一个元素里面的前面 $h01.prependTo($div); // 当前元素外面的后面要放另外一个元素 // $div.after($p02); // 当前元素要放到另外一个元素的外面的后面 $p02.insertAfter($div); // 创建一个新的空的div标签 var $newdiv01 = $(''); // 创建一个有内容的div标签 var $newdiv02 = $('新创建的第二个div'); // 当前元素的外面的前面要放另外一个元素 $div.before($newdiv01); // 当前元素要放到另外一个元素的外面的前面 $newdiv02.insertBefore($div); // 删除标签 $newdiv01.remove(); $h01.remove(); }) script> head> <body> <p id="p02">div01上面的p标签p> <p id="p01">div01外面的p标签p> <h2 id="h01">div01外面的h2标签h2> <div id="div01"> <h3>div01里面的h3标题h3> <p>div01里面的p标签p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
javascript对象
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。
创建javascript对象有两种方法，一种是通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法：
var person = new Object(); // 添加属性： person.name = 'tom'; person.age = '25'; // 添加方法： person.sayName = function(){ alert(this.name); } // 调用属性和方法： alert(person.age); person.sayName();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
还可以通过对象直接量的方式创建对象：
var person2 = { name:'Rose', age: 18, sayName:function(){ alert('My name is' + this.name); } } // 调用属性和方法： alert(person2.age); person2.sayName();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> //直接量的方式定义对象 var person = { name: 'Tom', age:18, showName:function(){ alert('我的名字是：'+this.name); }, showAge:function(){ alert('我的年龄是：'+this.age); } } //使用对象 //调用对象的属性 alert(person.name); //调用对象的方法 person.showName(); script> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json数据类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，但不支持undefined，值还可以是数组或者JavaScript对象。
json写法需要注意的是，json中的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
json格式的数据：
{ "name":"tom", "age":18 }- 1
- 2
- 3
- 4
json的另外一个数据格式是数组，和javascript中的数组字面量相同。
["tom",18,"programmer"]- 1
还可以是更复杂的数据机构：
{ "name":"jack", "age":29, "hobby":["reading","travel","photography"] "school":{ "name":"Merrimack College", "location":'North Andover, MA' } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象，转化的方式如下：
var sJson = '{"name":"tom","age":18}'; var oPerson = JSON.parse(sJson); // 操作属性 alert(oPerson.name); alert(oPerson.age);- 1
- 2
- 3
- 4
- 5
- 6
示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="js/jquery-1.12.4.min.js">script> <script> // 定义一个json数据 var sJson = '{\ "name":"tom",\ "age":18,\ "hobby":["study","shopping","singing"],\ "school":{"name":"beida","location":"beijing"}\ }'; // 将json数据转化成JavaScript对象 var oJson = JSON.parse(sJson); alert( oJson.name ); alert( oJson.hobby[0] ); alert( oJson.school.location ); script> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 相关阅读:
在Node.js中，什么是中间件（middleware）？它们的作用是什么？
Windows下通过CMake编译项目（2种方法）
rust实战系列-base64编码
bean的作用域、bean的生命周期、bean的后置处理器
计算机毕业设计Java派大星水产商城(源代码+数据库+系统+lw文档)
win10启动项在什么地方
开源免费，自己用Java撸一个在线云盘
（2022最新）Java毕业设计参考题目-题目新颖（值得收藏）
localStorage
智能家居灯光控制系统
- 原文地址：https://blog.csdn.net/qq_40432598/article/details/133279399
