jQuery学习笔记2之jQuery选择器 喜欢ヅ旅行 2022-07-30 13:13 141阅读 0赞 **一、jQuery的基本选择器** 下面是利用jQuery的基本选择器进行的演示,跟css的规则一致 元素名直接调用元素名 class用.classname id用\#idname 并列的直接用“,”隔开 $(function()\{ //使用id选择器 选择id=btn1的元素 $("\#btn1").click(function()\{ //alert("btn1 is clicked..."); $("\#one").css("background","\#ffbbaa"); \}); $("\#btn2").click(function()\{ //alert("btn1 is clicked..."); $(".mini").css("background","\#ffbbaa"); \}); $("\#btn3").click(function()\{ //alert("btn1 is clicked..."); $("div").css("background","\#ffbbaa"); \}); $("\#btn4").click(function()\{ //alert("btn1 is clicked..."); $("span,\#two").css("background","\#ffbbaa"); \}); \}); **二、jQuery层次选择器** 如果想通过DOM元素之间的层次关系来获取特定的元素,例如:后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器: ![Center][] 实际应用代码://$("body div").css("background","\#ffbbaa");//body内所有div //$("body > div").css("background","\#ffbbaa");//body的所有子div //$("\#one+div").css("background","\#ffbbaa");//id为one的所有相邻div //$("\#one~div").css("background","\#ffbbaa");//id为one的所有兄弟div //$("\#one span").css("background","\#ffbbaa");//不相邻选不上 //$("\#one").nextAll("span").css("background","\#ffbbaa");//id为one的后所有的span元素 //$("\#one").nextAll("span:first").css("background","\#ffbbaa");//id为one的后第一个span元素 **三、过滤选择器** **1.基本过滤选择器** :first选取第一个元素 :last选取最后一个元素 :not(selector)去除所有与选择器匹配的元素 :even选取所有索引为偶数的元素(从0开始) :odd 选取所有索引为奇数的元素(从0开始) :eq(index)选取索引等于index的元素 :gt(index) 选取索引大于index的元素 :lt(index) 选取索引小于index的元素 :header 选取所有标题元素,如:h1,h2,h2... :animated 选取当前正在执行动画的所有元素 如:$("span:first").css("background","\#ffbbaa");//选取第一个span元素 $("div:animated").css("background","\#ffbbaa");//选取执行动画的div **2.内容过滤选择器**主要规则体现在它所包含的子元素和文本内容上 :contains(text)选取含有文本text的元素 :empty选取不包含子元素或者文本的元素 :has(selector) 选取含有选择器所匹配元素的元素 :parent选取含有子元素或者文本的元素 如:$("div:contains('move')").css("background","\#ffbbaa");//选取含有move文本的div **3.可见性过滤选择器** :hidden选择所有不可见元素 :visible选择所有可见元素 **4.属性过滤选择器** \[attribute\]选择拥有此属性的元素 \[attribute=value\] 选择指定属性值为value的元素 \[attribute!=value\] 选择指定属性值不为value的元素 \[attribute^=value\]选择以指定属性值为value开始的元素 \[attribute$=value\] 选择以指定属性值为value结束的元素 \[attribute\*=value\] 选择包含指定属性值为value的元素 **5.子元素过滤选择器需要在:前输入一个空格** :nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) :first-child选取每个父元素的第一个子元素 :last-child选取每个父元素的最后一个子元素 :only-child选取父元素的唯一的子元素 **6.表单对象属性过滤选择器** :enabled选择所有可用的元素 :disabled选择所有不可用的元素 :checked选择所有被选中的元素 :selected选择所有选中的元素 **7.表单选择器** :input选取所有的input textarea select 和button元素 :text选取所有的单行文本框 :password选取所有的密码框元素 :radio选取所有的单选框 :checkbox选取所有的多选框 :submit选取所有的提交按钮 :image选取所有的图像按钮 :reset选取所有的图像按钮 :button选取所有的按钮 :file选取所有的上传域 :hidden选取所有的不可见元素 [Center]: /images/20220724/ff616e645bf0425289e3fd26b8360385.png
还没有评论,来说两句吧...