jQuery 一:选择器,筛选器
程序员文章站
2022-04-15 17:17:16
jQuery 简介 选择器 基本选择器: $(" "), $(" id"), $(".class"), $("element"), $(".class,p,div") 层级选择器: $(".outer div"), $(".outer div"), $(".outer+div"), $(".oute ......
jquery 简介
jquery由美国人john resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。 jquery是继prototype之后又一个优秀的javascript框架。其宗旨是——write less,do more,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容css3,还兼容各种浏览器 (ie 6.0+, ff 1.5+, safari 2.0+, opera 9.0+)。 jquery是一个快速的,简洁的javascript库,使用户能更方便地处理html documents、events、实现动画效果,并且方便地为网站提供ajax交互。 jquery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jquery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。 官方下载地址:http://jquery.com/download/
选择器
基本选择器: $("*"), $("#id"), $(".class"), $("element"), $(".class,p,div")
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div>hello div</div> <div class="div1">hello div1</div> <p>hello p</p> <p id="p1">hello p1</p> <script> $("*").css("color","red"); $("*").css("color","red").css("background", "yellow"); $("div").css("color","red"); $("#p1").css("color","red"); $(".div1").css("color","red"); $(".div1, #p1").css("color","red"); </script> </body>
层级选择器: $(".outer div"), $(".outer>div"), $(".outer+div"), $(".outer~div")
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div>hello div</div> <div class="div1">hello div1</div> <p>hello p</p> <p id="p1">hello p1</p> <p>hello p4</p> <dir class="outer"> <div> <p>hello p2</p> </div> <p>hello p3</p> </dir> <p>hello p5</p> <p>hello p6</p> <script> $(".outer p").css("color","red"); // outer 下所有的 p 元素 $(".outer>p").css("color","red"); // outer 下的子 p 元素 $(".outer+p").css("color","red"); // outer 下面的一个 p 元素 $(".outer~p").css("color","red"); // outer 下面所有的 p 元素 </script> </body>
基本筛选器: $("li:first"), $("li:eq(2)"), $("li:even"), $("li:gt(1)")
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div class="div">hello div <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> </div> <script> $(".div li:first").css("color","green"); $(".div li:last").css("color","green"); $(".div li:eq(2)").css("color","green"); $(".div li:lt(2)").css("color","green"); $(".div li:gt(1)").css("color","green"); </script> </body>
属性选择器: $('[id="div1"]'), $('["lily="luck"][id]')
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <p lily="good">hello p1</p> <p lily="luck">hello p2</p> <script> $("[lily]").css("color","pink"); $("[lily='luck']").css("color","pink"); </script> </body>
表单选择器: $("[type='text']")----->$(":text") 注意只适用于input标签
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <input type="text"> <input type="button"> <script> $("[type='button']").css("width","200px"); $(":button").css("width","200px"); </script> </body>
筛选器
查找筛选器: $("div").children(".test"), $("div").find(".test")
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div class="div1">hello1 <div class="div2">hello2 <div class="div3"> hello3 </div> </div> <div>hello4</div> </div> <script> $(".div1").children().css('color',"red") $(".div1").children(".div2").css('color',"red") // 只找儿子辈 $(".div1").find(".div3").css("color","red") // 后辈都找 </script> </body>
$(".test").next(), $(".test").nextall(), $(".test").nextuntil()
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div class="div1">hello1 <div class="div8">hello8</div> <div class="div2">hello2 <div class="div3"> hello3 </div> </div> <div class="div4">hello4</div> <div class="div5">hello5</div> <div class="div6">hello6</div> <div class="div7">hello7</div> </div> <script> $(".div2").next().css("color","red"); $(".div2").nextall().css("color","red"); $(".div2").nextuntil(".div6").css("color","red"); //不包含 .div6 </script> </body>
$("div").prev(), $("div").prevall(), $("div").prevuntil()
<head> <meta charset="utf-8"> <title>title</title> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div class="div1">hello1 <div class="div8">hello8</div> <div class="div9">hello9</div> <div class="div10">hello10</div> <div class="div2">hello2 <div class="div3"> hello3 </div> </div> <div class="div4">hello4</div> <div class="div5">hello5</div> <div class="div6">hello6</div> <div class="div7">hello7</div> </div> <script> $(".div2").prev().css("color","red"); $(".div2").prevall().css("color","red"); // 在同级下起作用 $(".div2").prevuntil(".div8").css("color","red"); // 不包括 .div8 $(".div3").parent().css('color',"red"); $(".div3").parents().css('color',"red"); $(".div3").parentsuntil("body").css('color','red'); $(".div2").siblings().css('color','red'); </script> </body>