一 jQuery是什么？
<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理htmldocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二 什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
1 $("#test").html() 2 //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 3 4 // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 5 6 //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 7 8 //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 9 10 var $variable = jQuery 对象 11 var variable = DOM 对象 12 13 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
三 寻找元素(选择器和筛选器) .
3.1 选择器
3.1.1 基本选择器
1 $("*") $("#id") $(".class") $("element") $(".class,p,div")
3.1.2 层级选择器
1 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3.1.3 基本筛选器
1 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
3.1.4 属性选择器
1 2 $(\'[id="div1"]\') $(\'["alex="sb"][id]\')
3.1.5 表单选择器
1 $("[type=\'text\']")----->$(":text") 注意只适用于input标签 : $("input:checked")
实例之左侧菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>left_menu</title> 6 7 <style> 8 .menu{ 9 height: 500px; 10 width: 30%; 11 background-color: gainsboro; 12 float: left; 13 } 14 .content{ 15 height: 500px; 16 width: 70%; 17 background-color: rebeccapurple; 18 float: left; 19 } 20 .title{ 21 line-height: 50px; 22 background-color: #425a66; 23 color: forestgreen;} 24 25 26 .hide{ 27 display: none; 28 } 29 30 31 </style> 32 </head> 33 <body> 34 35 <div class="outer"> 36 <div class="menu"> 37 <div class="item"> 38 <div class="title">菜单一</div> 39 <div class="con"> 40 <div>111</div> 41 <div>111</div> 42 <div>111</div> 43 </div> 44 </div> 45 <div class="item"> 46 <div class="title">菜单二</div> 47 <div class="con hide"> 48 <div>111</div> 49 <div>111</div> 50 <div>111</div> 51 </div> 52 </div> 53 <div class="item"> 54 <div class="title">菜单三</div> 55 <div class="con hide"> 56 <div>111</div> 57 <div>111</div> 58 <div>111</div> 59 </div> 60 </div> 61 62 </div> 63 <div class="content"></div> 64 65 </div> 66 <script src="jquery-3.2.1.js"></script> 67 <script> 68 $(".item .title").click(function () { 69 $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); 70 71 // $(this).next().removeClass("hide"); 72 // $(this).parent().siblings().children(".con").addClass("hide"); 73 }) 74 </script> 75 76 77 </body> 78 </html>
实例之tab切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab</title> 6 <script> 7 function tab(self){ 8 var index=$(self).attr("xxx"); 9 $("#"+index).removeClass("hide").siblings().addClass("hide"); 10 $(self).addClass("current").siblings().removeClass("current"); 11 12 } 13 </script> 14 <style> 15 *{ 16 margin: 0px; 17 padding: 0px; 18 } 19 .tab_outer{ 20 margin: 0px auto; 21 width: 60%; 22 } 23 .menu{ 24 background-color: #cccccc; 25 /*border: 1px solid red;*/ 26 line-height: 40px; 27 } 28 .menu li{ 29 display: inline-block; 30 } 31 .menu a{ 32 border-right: 1px solid red; 33 padding: 11px; 34 } 35 .content{ 36 background-color: tan; 37 border: 1px solid green; 38 height: 300px; 39 } 40 .hide{ 41 display: none; 42 } 43 44 .current{ 45 background-color: darkgray; 46 color: yellow; 47 border-top: solid 2px rebeccapurple; 48 } 49 </style> 50 </head> 51 <body> 52 <div class="tab_outer"> 53 <ul class="menu"> 54 <li xxx="c1" class="current" onclick="tab(this);">菜单一</li> 55 <li xxx="c2" onclick="tab(this);">菜单二</li> 56 <li xxx="c3" onclick="tab(this);">菜单三</li> 57 </ul> 58 <div class="content"> 59 <div id="c1">内容一</div> 60 <div id="c2" class="hide">内容二</div> 61 <div id="c3" class="hide">内容三</div> 62 </div> 63 64 </div> 65 </body> 66 </html>
3.2 筛选器
3.2.1 过滤筛选器
1 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
3.2.2 查找筛选器
1 $("div").children(".test") $("div").find(".test") 2 3 $(".test").next() $(".test").nextAll() $(".test").nextUntil() 4 5 $("div").prev() $("div").prevAll() $("div").prevUntil() 6 7 $(".test").parent() $(".test").parents() $(".test").parentUntil() 8 9 $("div").siblings()
四 操作元素(属性，css，文档处理)
4.1 属性操作
1 --------------------------属性 2 $("").attr(); 3 $("").removeAttr(); 4 $("").prop(); 5 $("").removeProp(); 6 --------------------------CSS类 7 $("").addClass(class|fn) 8 $("").removeClass([class|fn]) 9 --------------------------HTML代码/文本/值 10 $("").html([val|fn]) 11 $("").text([val|fn]) 12 $("").val([val|fn|arr]) 13 --------------------------- 14 $("").css("color","red")
注意：
1 <input id="chk1" type="checkbox" />是否可见 2 <input id="chk2" type="checkbox" checked="checked" />是否可见 3 4 5 6 <script> 7 8 //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 9 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 10 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 11 //需要使用prop方法去操作才能获得正确的结果。 12 13 14 // $("#chk1").attr("checked") 15 // undefined 16 // $("#chk1").prop("checked") 17 // false 18 19 // ---------手动选中的时候attr()获得到没有意义的undefined----------- 20 // $("#chk1").attr("checked") 21 // undefined 22 // $("#chk1").prop("checked") 23 // true 24 25 console.log($("#chk1").prop("checked"));//false 26 console.log($("#chk2").prop("checked"));//true 27 console.log($("#chk1").attr("checked"));//undefined 28 console.log($("#chk2").attr("checked"));//checked 29 </script> 30 31 attr和prop
实例之全反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.11.3.min.js"></script> 7 <script> 8 9 function selectall(){ 10 11 $("table :checkbox").prop("checked",true) 12 } 13 function cancel(){ 14 15 $("table :checkbox").prop("checked",false) 16 } 17 18 function reverse(){ 19 20 21 // var idlist=$("table :checkbox") 22 // for(var i=0;i<idlist.length;i++){ 23 // var element=idlist[i]; 24 // 25 // var ischecked=$(element).prop("checked") 26 // if (ischecked){ 27 // $(element).prop("checked",false) 28 // } 29 // else { 30 // $(element).prop("checked",true) 31 // } 32 // 33 // } 34 // jquery循环的两种方式 35 //方式一 36 // li=[10,20,30,40] 37 // dic={name:"yuan",sex:"male"} 38 // $.each(li,function(i,x){ 39 // console.log(i,x) 40 // }) 41 42 //方式二 43 // $("tr").each(function(){ 44 // console.log($(this).html()) 45 // }) 46 47 48 49 $("table :checkbox").each(function(){ 50 51 $(this).prop("checked",!$(this).prop("checked")); 52 53 // if ($(this).prop("checked")){ 54 // $(this).prop("checked",false) 55 // } 56 // else { 57 // $(this).prop("checked",true) 58 // } 59 60 // 思考:如果用attr方法可以实现吗? 61 62 63 }); 64 } 65 66 </script> 67 </head> 68 <body> 69 70 <button onclick="selectall();">全选</button> 71 <button onclick="cancel();">取消</button> 72 <button onclick="reverse();">反选</button> 73 74 <table border="1"> 75 <tr> 76 <td><input type="checkbox"></td> 77 <td>111</td> 78 </tr> 79 <tr> 80 <td><input type="checkbox"></td> 81 <td>222</td> 82 </tr> 83 <tr> 84 <td><input type="checkbox"></td> 85 <td>333</td> 86 </tr> 87 <tr> 88 <td><input type="checkbox"></td> 89 <td>444</td> 90 </tr> 91 </table> 92 93 94 95 </body> 96 </html>
实例之模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .back{ 8 background-color: rebeccapurple; 9 height: 2000px; 10 } 11 12 .shade{ 13 position: fixed; 14 top: 0; 15 bottom: 0; 16 left:0; 17 right: 0; 18 background-color: coral; 19 opacity: 0.4; 20 } 21 22 .hide{ 23 display: none; 24 } 25 26 .models{ 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 margin-left: -100px; 31 margin-top: -100px; 32 height: 200px; 33 width: 200px; 34 background-color: gold; 35 36 } 37 </style> 38 </head> 39 <body> 40 <div class="back"> 41 <input id="ID1" type="button" value="click" onclick="action1(this)"> 42 </div> 43 44 <div class="shade hide"></div> 45 <div class="models hide"> 46 <input id="ID2" type="button" value="cancel" onclick="action2(this)"> 47 </div> 48 49 50 <script src="jquery-1.11.3.min.js"></script> 51 <script> 52 53 function action1(self){ 54 $(self).parent().siblings().removeClass("hide"); 55 56 } 57 function action2(self){ 58 //$(self).parent().parent().children(".models,.shade").addClass("hide") 59 60 $(self).parent().addClass("hide").prev().addClass("hide") 61 62 } 63 </script> 64 </body> 65 </html>
4.2 文档处理
1 //创建一个标签对象 2 $("<p>") 3 4 5 //内部插入 6 7 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); 8 $("").appendTo(content) ----->$("p").appendTo("div"); 9 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); 10 $("").prependTo(content) ----->$("p").prependTo("#foo"); 11 12 //外部插入 13 14 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); 15 $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); 16 $("").insertAfter(content) ----->$("p").insertAfter("#foo"); 17 $("").insertBefore(content) ----->$("p").insertBefore("#foo"); 18 19 //替换 20 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); 21 22 //删除 23 24 $("").empty() 25 $("").remove([expr]) 26 27 //复制 28 29 $("").clone([Even[,deepEven]])
实例之复制样式条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div class="outer"> 10 <div class="item"> 11 <input type="button" value="+" onclick="add(this);"> 12 <input type="text"> 13 </div> 14 </div> 15 16 <script src="jquery-1.11.3.min.js"></script> 17 <script> 18 //var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗? 19 function add(self){ 20 // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加 21 var $clone_obj=$(self).parent().clone(); 22 $clone_obj.children(":button").val("-").attr("onclick","removed(this)"); 23 $(self).parent().parent().append($clone_obj); 24 } 25 function removed(self){ 26 27 $(self).parent().remove() 28 29 } 30 31 </script> 32 </body> 33 </html>
4.3 css操作
1 CSS 2 $("").css(name|pro|[,val|fn]) 3 位置 4 $("").offset([coordinates]) 5 $("").position() 6 $("").scrollTop([val]) 7 $("").scrollLeft([val]) 8 尺寸 9 $("").height([val|fn]) 10 $("").width([val|fn]) 11 $("").innerHeight() 12 $("").innerWidth() 13 $("").outerHeight([soptions]) 14 $("").outerWidth([options])
实例返回顶部
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/jquery-2.2.3.js"></script> 7 <script> 8 9 10 window.onscroll=function(){ 11 12 var current=$(window).scrollTop(); 13 console.log(current) 14 if (current>100){ 15 16 $(".returnTop").removeClass("hide") 17 } 18 else { 19 $(".returnTop").addClass("hide") 20 } 21 } 22 23 24 function returnTop(){ 25 // $(".div1").scrollTop(0); 26 27 $(window).scrollTop(0) 28 } 29 30 31 32 33 </script> 34 <style> 35 body{ 36 margin: 0px; 37 } 38 .returnTop{ 39 height: 60px; 40 width: 100px; 41 background-color: darkgray; 42 position: fixed; 43 right: 0; 44 bottom: 0; 45 color: greenyellow; 46 line-height: 60px; 47 text-align: center; 48 } 49 .div1{ 50 background-color: orchid; 51 font-size: 5px; 52 overflow: auto; 53 width: 500px; 54 } 55 .div2{ 56 background-color: darkcyan; 57 } 58 .div3{ 59 background-color: aqua; 60 } 61 .div{ 62 height: 300px; 63 } 64 .hide{ 65以上是关于day 43 jquery的主要内容，如果未能解决你的问题，请参考以下文章
js day43 Jquery入门(回顾js,Jquery选择器,dom操作)
代码片段使用复杂的 JavaScript 在 UIWebView 中插入 HTML？