jQuery库的简单使用:HelloWorld,jQuery对象和DOM对象,jQuery的选择器

it2025-04-20 11

简介

为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了 JavaScript 库封装了很多预定义的对象和实用函数。

HelloWorld

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title>  <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> //$(function(){})相当于window.onload,代码写在{}之间 $(function() { //选取button:$("button"),然后添加点击事件 $("button").click(function () { alert("hello world"); }) }) </script> </head> <body> <button>button</button> </body> </html>

jQuery对象和DOM对象

jQuery 对象就是通过$() 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法 jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象 var variable = DOM 对象 jQuery 对象转成 DOM 对象 jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法: (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 DOM 对象转成 jQuery 对象对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来 (jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 转换后就可以使用 jQuery 中的方法了

jQuery的选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 1.简洁的写法 2.完善的事件处理机制,如果获取到的元素不存在, 后面又调用元素的方法,jQuery也不会报错

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素 (在网页中 id 只能使用一次, class 允许重复使用)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style>  <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { //1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1") //2. 为选择的 jQuery 对象添加 onclick 响应函数: // $("#btn1").click(function(){}), 响应函数的代码 //写在 function(){} 的中括号中. $("#btn1").click(function() { $("#one").css("background", "#ffbbaa"); }); $("#btn2").click(function() { $(".mini").css("background", "#ffbbaa"); }); $("#btn3").click(function() { $("div").css("background", "#ffbbaa"); }); $("#btn4").click(function() { $("*").css("background", "#ffbbaa"); }); $("#btn5").click(function() { $("span,#two").css("background", "#ffbbaa"); }); }) </script> </head> <body> <input type="button" value="选择 id 为 one 的元素" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> <input type="button" value="选择元素名是 div 的所有元素" id="btn3" /> <input type="button" value="选择所有的元素" id="btn4" /> <input type="button" value="选择所有的 span 元素和id为two的元素" id="btn5" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素^^</span> </body> </html>

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器. 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("body div").css("background", "#ffbbaa"); }); $("#btn2").click(function() { $("body > div").css("background", "#ffbbaa"); }); $("#btn3").click(function() { $("#one + div").css("background", "#ffbbaa"); }); $("#btn4").click(function() { $("#two ~ div").css("background", "#ffbbaa"); }); $("#btn5").click(function() { $("#two").siblings("div").css("background", "#ffbbaa"); }); $("#btn6").click(function() { //以下选择器选择的是近邻 #one 的 span 元素, 若该span //和 #one 不相邻, 选择器无效. //$("#one + span").css("background", "#ffbbaa"); $("#one").nextAll("span:first").css("background", "#ffbbaa"); }); $("#btn7").click(function() { $("#two").prevAll("div").css("background", "#ffbbaa"); }); }) </script> </head> <body> <input type="button" value="选择 body 内的所有 div 元素" id="btn1" /> <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" /> <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /> <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" /> <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" /> <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素^^</span> <span id="span">--span元素--</span> </body> </html>

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

基本过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function() { function anmateIt() { $("#mover").slideToggle("slow", anmateIt); } anmateIt(); $("#btn1").click(function() { $("div:first").css("background", "#ffbbaa"); }); $("#btn2").click(function() { $("div:last").css("background", "#ffbbaa"); }); $("#btn3").click(function() { $("div:not(.one)").css("background", "#ffbbaa"); }); $("#btn4").click(function() { $("div:even").css("background", "#ffbbaa"); }); $("#btn5").click(function() { $("div:odd").css("background", "#ffbbaa"); }); $("#btn6").click(function() { $("div:gt(3)").css("background", "#ffbbaa"); }); $("#btn7").click(function() { $("div:eq(3)").css("background", "#ffbbaa"); }); $("#btn8").click(function() { $("div:lt(3)").css("background", "#ffbbaa"); }); $("#btn9").click(function() { $(":header").css("background", "#ffbbaa"); }); $("#btn10").click(function() { $(":animated").css("background", "#ffbbaa"); }); $("#btn11").click(function() { $("#two").nextAll("span:first").css("background", "#ffbbaa"); }); }); </script> </head> <body> <input type="button" value="选择第一个 div 元素" id="btn1" /> <input type="button" value="选择最后一个 div 元素" id="btn2" /> <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /> <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /> <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /> <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /> <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /> <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /> <input type="button" value="选择所有的标题元素" id="btn9" /> <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /> <input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" /> <h3>基本选择器.</h3> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素 111^^</span> <span id="span">^^span元素 222^^</span> <div id="mover">正在执行动画的div元素.</div> </body> </html>

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("div[title]").css("background", "#ffbbaa"); }); $("#btn2").click(function() { $("div[title='test']").css("background", "#ffbbaa"); }); $("#btn3").click(function() { //选取的元素中包含没有 title 的 div 元素. $("div[title!='test']").css("background", "#ffbbaa"); }); $("#btn4").click(function() { $("div[title^='te']").css("background", "#ffbbaa"); }); $("#btn5").click(function() { $("div[title$='est']").css("background", "#ffbbaa"); }); $("#btn6").click(function() { $("div[title*='es']").css("background", "#ffbbaa"); }); $("#btn7").click(function() { $("div[id][title*='es']").css("background", "#ffbbaa"); }); $("#btn8").click(function() { $("div[title][title!='test']").css("background", "#ffbbaa"); }); }) </script> </head> <body> <input type="button" value="选取含有属性title 的div元素." id="btn1" /> <input type="button" value="选取属性title值等于'test'的div元素." id="btn2" /> <input type="button" value="选取属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /> <input type="button" value="选取属性title值以'te'开始的div元素." id="btn4" /> <input type="button" value="选取属性title值以'est'结束的div元素." id="btn5" /> <input type="button" value="选取属性title值含有'es'的div元素." id="btn6" /> <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素." id="btn7" /> <input type="button" value="选取含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> </body> </html>

子元素过滤选择器

nth-child() 选择器详解如下： (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#btn1").click(function() { //选取子元素, 需要在选择器前添加一个空格. $("div.one :nth-child(2)").css("background", "#ffbbaa"); }); $("#btn2").click(function() { $("div.one :first-child").css("background", "#ffbbaa"); }); $("#btn3").click(function() { $("div.one :last-child").css("background", "#ffbbaa"); }); $("#btn4").click(function() { $("div.one :only-child").css("background", "#ffbbaa"); }); }); </script> </head> <body> <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1" /> <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2" /> <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3" /> <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display: none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> </body> </html>

表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $("#btn1").click(function() { //使所有的可用的单行文本框的 value 值变为 jane alert($(":text:enabled").val()); $(":text:enabled").val("jane"); }); $("#btn2").click(function() { $(":text:disabled").val("jane"); }); $("#btn3").click(function() { var num = $(":checkbox[name='newsletter']:checked").length; alert(num); }); $("#btn5").click(function() { //实际被选择的不是 select, 而是 select 的 option 子节点 //所以要加一个空格. //var len = $("select :selected").length //alert(len); //因为 $("select :selected") 选择的是一个数组 //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. //alert($("select :selected").val()); //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在 //得到的 DOM 对象, 而不是一个 jQuery 对象 $("select :selected").each(function() { alert(this.value); }); }); $("#btn4").click(function() { $(":checkbox[name='newsletter']:checked").each(function() { alert(this.value); }); }); }) </script> </head> <body> <h3>表单对象属性过滤选择器</h3> <button id="btn1">对表单内可用input 赋值操作.</button> <button id="btn2">对表单内不可用input 赋值操作.</button> <br /> <br /> <button id="btn3">获取多选框选中的个数.</button> <button id="btn4">获取多选框选中的内容.</button> <br /> <br /> <button id="btn5">获取下拉框选中的内容.</button> <br /> <br /> <form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1" /><br> 不可用元素: <input name="email" disabled="true" value="不可用文本框" /><br> 可用元素: <input name="che" value="可用文本框2" /><br> 不可用元素: <input name="name" disabled="true" value="不可用文本框" /><br> <br> 多选框: <br> <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1 <input type="checkbox" name="newsletter" value="test2" />test2 <input type="checkbox" name="newsletter" value="test3" />test3 <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4 <input type="checkbox" name="newsletter" value="test5" />test5 <br> <br> 下拉列表1: <br> <select name="test" multiple="multiple" style="height: 100px"> <option>浙江</option> <option selected="selected">辽宁</option> <option>北京</option> <option selected="selected">天津</option> <option>广州</option> <option>湖北</option> </select> <br> <br> 下拉列表2: <br> <select name="test2"> <option>浙江</option> <option>辽宁</option> <option selected="selected">北京</option> <option>天津</option> <option>广州</option> <option>湖北</option> </select> <textarea rows="" cols=""></textarea> </form> </body> </html>

练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { //1. 点击所有的 p 节点, 能够弹出其对应的文本内容 /* 1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...}); 为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组 2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val()) */ $("p").click(function() { alert($(this).text()); $(this).text("^^" + $(this).text()); //alert(this.firstChild.nodeValue); }); //2. 使第一个 table 隔行变色 $("table:first tr:even").css("background", "#ffaacc"); //3. 点击 button, 弹出 checkbox 被选中的个数 $("button").click(function() { alert($(":checkbox:checked").length); }); }); </script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <table> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> </table> <br> <hr> <br> <table> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第一行</td> <td>第一行</td> </tr> </table> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <button>您选中的个数</button> </body> </html>

最新回复(0)