第六章jQuery选择器

A.jQuery提供了丰富的选择器以获取DOM元素。

B.jQuery中的基本选择器包括标签选择器,类选择器,id选择器,并集选择器和全局选择器。

C.使用jQuery的层次选择器可通过DOM元素之间的层次关系来获取元素,包括后代元素。子元素,相邻元素和同辈元素。    $("h1").css("color","blue");
   $(".price").css({"background":"#efefef","padding":"5px"});
   $("#author").css("color","red");
$(".intro,dt,dd").css("color","rebeccapurple");//选中的标签一起变红色 //    $("*").css({"font_weight":"bold","color":"rebeccapurple"});//所有的标签变紫色
    $(".textRight p").css({"color":"red"})//后代选择器 //.textRight 标签 的p标签里的内容变红色"
   $(".textRight> p").css({"color":"rebeccapurple"})//后代选择器 //.textRight 标签 下面的两个p标签里的内容变紫色"
   $("h1+ p").css({"color":"rebeccapurple"})//后代选择器 //.h1 标签 的下面的一个p标签里的内容变紫色"
        $("h1~ p").css({"color":"rebeccapurple"})//后代选择器 //h1 标签 的p标签里的内容变红色"

D.使用属性选择器可通过HTML元素的属性来选择元素。
$("#book a[class]" ).css({"background-color":"red"})
$("#book a[class!='hot']" ).css({"background-color":"red"})
$("#book a[class^='hot']" ).css({"background-color":"red"})
$("#book a[href$='html']" ).css({"background-color":"red"})
$("#book a[href*='k2']" ).css({"background-color":"blue"})

 

E.使用过滤选择器可通过特定的过滤规则来筛选出所需的DOM元素,包括基本过滤选择器,可见性过滤选择器等。
$(document).ready(function () {
   $(" tr:even").css({"background":"#eff7d1"})
       $(" tr:odd").css({"background":"#f7e195"})
   })

F.编写选择器时要注意特殊符号和空格。


                
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)查找id号为tigerLily的元素 (2)查找拥有类myList的元素 (3)查找所有的input元素 (4)查找所有img元素和tr元素 (5)查找id号为coffeePot和id号为someDiv的元素 (6)选择具有id属性的所有元素 (7)选择具有id属性的input元素 (8)选择其value属性等于A的元素 (9)选择其value属性等于A或等于C的元素 (10)选择其title属性值中含有dog的img元素 (11)选择其href属性值以http开头的a元素 (12)选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (13)选择元素li,该元素作为拥有myList类的ul元素的直接子元素 (14)选择id号为radioA的input元素后面的第一个input兄弟元素 (15)选择id号为radioA的input元素后面的所有input兄弟元素 (16)选择dom sample页面中第3个tr元素 (17)选择其type属性值checkbox且索引为偶数的input元素 (18)选择非最后一行的tr元素 (19)选择所有的checkbox元素 (20)选择所有被选中的表单元素 (21)选择含有1972的td元素 (22)选择包含有sapn元素的div元素 (23)选择表格中每行的第一个单元格和最后一个单元格 (24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)将拥有alt属性的倒数第二个图片元素应用yellow类 (2)将第一个checkbox表单元素应用.green样式 (3)求id值为checkbox3的元素在所有表单元素里的顺序号 (4)用一条链式语句完成:先对所有img元素应用seeThrough样式,再为所有img元素和tr元素应用yellow样式 (5)用filter方法实现:选择单元格内容为Java或Smalltalk的单元格 (6)取图片集中的第2,3,4张图片 (7)用has方法实现:选择那些包含有ul元素的li元素 (8)将tbody每个单元格里的文字设为:我爱jQuery (9)查找form元素的后代元素中标签为label的元素 (10)查找表单元素中是否有id值为checkbox5的元素 提示: 为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");
jQuery选择器是一种用于选择HTML元素的语法。它可以根据元素的ID、类、类型、属性、属性值等进行选择。以下是一些常见的jQuery选择器: 1. 根据元素类型选择:$("p") 选取所有 <p> 元素。 2. 根据元素ID选择:$("#id") 选取 ID 为 "id" 的元素。 3. 根据元素类选择:$(".class") 选取所有 class 为 "class" 的元素。 4. 根据元素属性选择:$("[attribute]") 选取带有 attribute 属性的元素。 5. 根据元素属性值选择:$("[attribute=value]") 选取 attribute 属性值为 "value" 的元素。 6. 根据元素属性值选择(部分匹配):$("[attribute*=value]") 选取 attribute 属性值包含 "value" 的元素。 7. 根据元素属性值选择(以某个值开头):$("[attribute^=value]") 选取 attribute 属性值以 "value" 开头的元素。 8. 根据元素属性值选择(以某个值结尾):$("[attribute$=value]") 选取 attribute 属性值以 "value" 结尾的元素。 9. 根据元素属性值选择(以某个值开头且包含某个值):$("[attribute|=value]") 选取 attribute 属性值以 "value" 开头且包含 "value" 的元素。 10. 根据元素的位置选择:$("selector:first") 选取第一个匹配的元素,$("selector:last") 选取最后一个匹配的元素,$("selector:even") 选取偶数位置的元素,$("selector:odd") 选取奇数位置的元素,$("selector:eq(index)") 选取索引为 index 的元素,$("selector:gt(index)") 选取索引大于 index 的元素,$("selector:lt(index)") 选取索引小于 index 的元素。 11. 根据元素的关系选择:$("parent > child") 选取 parent 元素的直接子元素 child,$("prev + next") 选取 prev 元素后面的第一个同辈元素 next,$("prev ~ siblings") 选取 prev 元素后面的所有同辈元素 siblings。 以下是一个例子: ```javascript <!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me to hide paragraphs</button> </body> </html> ``` 当用户点击按钮时,所有的段落元素都会被隐藏起来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值