第二章jQuery选择器
  TEZNKK3IfmPf 2024年05月31日 24 0

一、jquery选择器的分类:
1.基本选择器
(1)标签选择器
$(“h2”).css(“color”,“red”);
(2)类选择器
$(".title").css(“color”,“red”);
(3)ID选择器
$("#title").css(“color”,“red”);
(4)并集选择器
$(“h2,h3,.title,#title”).css(“color”,“red”);
(5)全局选择器
$("").css(“color”,“red”);
2.层次选择器
(1)后代选择器
$("#box p").css(“color”,“red”)
所有box下面的p标签字体都换成红色
(2)子选择器
$("#box>p").css(“color”,“red”);
所有id为box的儿子元素字体变成红色
(3)相邻元素选择器:
$(".p2+p").css(“color”,“red”);
class为p2的元素下一个为p的字体变红
(4)同辈元素选择器:
( " . p 2   p " ) . c s s ( " c o l o r " , " r e d " ) ; c l a s s 为 p 2 后 面 所 有 为 p 元 素 的 字 体 都 变 成 红 色 3. 属 性 选 择 器 ( 1 ) [ n a m e ] : 含 有 n a m e 属 性 的 选 中 ( 2 ) [ n a m e = ′ n a m e ′ ] , n a m e 的 值 是 n a m e 的 被 选 中 ( 3 ) [ n a m e ! = n a m e ] , n a m e 的 值 不 是 n a m e 的 被 选 中 ( 4 ) [ n a m e = n a ] , n a m e 的 值 以 n a 开 头 的 被 选 中 ( 5 ) [ n a m e (".p2~p").css("color","red"); class为p2后面所有为p元素的字体都变成红色 3.属性选择器 (1)[name]:含有name属性的选中 (2)[name='name'],name的值是name的被选中 (3)[name!=name],name的值不是name的被选中 (4)[name^=na],name的值以na开头的被选中 (5)[name (".p2 p").css("color","red");classp2p3.1[name]:name2[name=name]namename3[name!=name],namename4[name=na]namena5[name=na],name的值以na结束的被选中
(6)[name
=na],name的值中包含na的被选中
(7)[name=‘text’][id=‘name’],属性name的值等于name,并且id也等于name的被选中
4.基本过滤选择器
(1)获取第一个li元素:
$(“li:first”).css(“color”,“red”);
(2)获取最后一个li元素:
$(“li:last”).css(“color”,“red”);
(3)获取偶数行的元素:
$(“li:even”).css(“color”,“red”);
(4)获取奇数行的元素:
$(“li:odd”).css(“color”,“red”);
(5)获取索引是2的元素
$(“li:eq(2)”).css(“color”,“red”);
(6)获取索引大于2的元素,索引从0开始
$(“li:gt(2)”).css(“color”,“red”);
(7)获取索引小于2的元素
$(“li:lt(2)”).css(“color”,“red”);
(8)获取所有标题元素
$(":header").css(“color”,“red”);
(9)获取光标聚焦的元素
$(":focus").css(“color”,“red”);

5.可见性过滤选择器

二、光标聚焦:
$("[name=‘text’]").focus();
三、给表单里面赋值:
$("[name=‘pass’]").val(“值”);
四、获取表单的值:
$("#input").val();

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年05月31日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2023年11月15日   30   0   0 jQuery
  TEZNKK3IfmPf   2023年11月15日   49   0   0 css选择器
  TEZNKK3IfmPf   2023年11月15日   65   0   0 jQueryjs
  TEZNKK3IfmPf   2024年03月22日   65   0   0 jQueryeasyui
  TEZNKK3IfmPf   2024年03月29日   50   0   0 htmljQuery
  TEZNKK3IfmPf   2024年05月31日   25   0   0 jQuery选择器
TEZNKK3IfmPf