JQuery选择器详解

第六章:Jquery选择器
 一:基本选择器(王洪涛)
  标签选择器:$("标签名");     返回一组元素集合(匹配相同的标签名)
  类选择器:$(".class类名");  返回一组元素集合(匹配相同的class属性值)
  id选择器:$("#id名");   返回单个元素(匹配id属性值)
  通用选择器:$("标签,class,id");  返回一组元素集合(选择的元素)
  全局选择器:$("*");          返回一组元素集合(网页所有元素)
  
  
 二.层次选择器(史志慧)
  后代选择器 ancestor descendant 选取ancestor元素里的所有descendant(后代)元素 $("#menu span" )选取#menu下的<span>元素
  子选择器 parent>child 选取parent元素下的child(子)元素 $(" #menu>span" )选取#menu的子元素<span>
  相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素 $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
  同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings元素 $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>
 
 三.属性选择器(任自彬)
  [attribute] 选取包含给定属性的元素 $(" [href]" )选取含有href属性的元素
  [attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href ='#']" )选取href属性值为“#”的元素
  [attribute !=value] 选取不等于给定属性是某个特定值的元素 $(" [href !='#']" )选取href属性值不为“#”的元素
  [attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^='en']" )选取href属性值以en开头的元素
  [attribute$=value] 选取给定属性是以某些特定值结尾的元素 $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
  [attribute*=value] 选取给定属性是以包含某些值的元素 $(" [href* ='txt']" )选取href属性值中含有txt的元素
  
 四.过滤选择器(超超)
  /*获取第一个元素*/
  //$(".lis:first").css("color","green");
  /*获取最后一个元素*/
  //$(".lis:last").css("color","blue");
  /*忽略元素*/
  //$("a:not([href^=g])").css("background-color","pink");
  /*奇数偶数:下标0开始*/
  /* $("li:odd").css("background-color","pink"); */
  
  /*定位到具体哪一个*/
  $("li:eq(0)").css("color","red");
  /*定位到大于位置的元素*/
  $("li:gt(2)").css("background-color","pink");
  /*定位到小于位置的元素*/
  $("li:lt(2)").css("background-color","green");
  /*定位到标题元素*/
  $(":header").css("background-color","blue");  
  /*获取有焦点的元素*/
  //$("#wht").focus();
  //$("input:focus").val('磊 给你太美');
  
  /*获取动画元素*/
  //$("ul").fadeOut(3000).fadeIn(5000);
  //$("ul:animated").css("background-color","blue");
  
  /*可见性选择器*/
  /* :hidden可以定位到隐藏元素,包含隐藏域等,如果说定位到的时隐藏域,显示时则修改type属性值,如果时普通元素则可以修改css样式display */
  $("input:hidden").attr("type","visible");

转载于:https://www.cnblogs.com/liu13-B/p/11028161.html

(答案见下载资源) 上机任务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");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值