6.20 jquery基础 选择器
Posted sunhao1987
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6.20 jquery基础 选择器相关的知识，希望对你有一定的参考价值。
===============基本选择器=================
1.获取唯一id:$("#")
$("#myid").css("color","blue");
2.获取所有class:$(".")
$(".class").css("color","yellow");
3.获取所有元素:$("*")
$("*").css("color","green");
4.获取所有标签:$("标签")
$("p").css("color","red");
5.获取同时满足两个选择器的元素:$("选择器1选择器2")
$("#id,.class").css("color","orange");
===============层叠选择器==================
1.父元素中包含的所有元素:($"选择器1 选择器2")
$("#second .second").css("color","red");
2.父元素的子元素:($"选择器1>选择器2")
$("#second>div").css("color","grey");
3.相邻的下一个兄弟元素:$("选择器1+选择器2")
$("h2+h3").css("color","orange");
4.后面的所有兄弟元素
$("#as1~div").css("color","orange");
================方法选择器==================
1.符合条件的第一个元素
$(".first:first").css("color","yellow");
2.符合条件的最后一个元素
$(".first:last").css("color","red");
3.符合条件的索引为偶数的元素
$(".first:even").css("color","red");
4.符合条件的索引为奇数的元素
$(".first:odd").css("color","green");
5.符合条件的索引值元素
$(".first:eq(0)").css("color","greenyellow");
6.符合条件的大于索引值的元素
$(".first:gt(0)").css("color","blue");
7.符合条件的小于索引值的元素
$(".first:lt(1)").css("color","green");
8.获取满足第一个条件且不满(满足)足第二个条件(empty、checked...)的元素:$("选择器:条件")
$("div:not(empty)").css("background","yellow");
$("div:empty").css("background","green");
9.所有标题元素
$(":header").css("background","green");
10.所有动画元素
$(":animated").css("background","green");
11.包含指定字符串的所有元素
$("div:contains(‘child‘)").css("width","500px");
12.所有带有匹配选择的元素
$("h5,.child_child,#myid").css("background","green");
================属性选择器==================
1.属性等于属性值的元素
$("[href=‘#‘]");
2.属性不等于属性值的元素
$("[href!=‘#‘]");
3.属性以属性值结尾的元素
$("[href$=‘.jpg‘]");
4.带有某属性的元素
$("[href]");
================表单选择器==================
1.所有input元素
$(":input");
2.通过input的类型选则元素
$(":text");文字框
$(":password");密码框
$(":radio");单选框
$(":checkbox");复选框
$(":submit");提交按钮
$(":buttom");普通按钮
$(":reset");重置按钮
$(":image");图片按钮
$(":file");上传文件
3.通过input的状态选则元素
$(":endabled");所有激活的input元素
$(":disable");所有禁用的input元素
$(":selecte");所有被选取的input元素
$(":checked");所有被选中的input元素
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="../public/bootstrap.min.css"/> <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../public/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p id="one">德国</p> <p class="first">巴西</p> <p class="first">葡萄牙</p> <p class="first">法国</p> <p class="first">西班牙</p> <div id="second"> <div id="secondl"> 你好 </div> <p class="second">葡萄牙</p> <p class="second">法国</p> <p class="second">西班牙</p> </div> <div id="third"> <h1>巴西</h1> <h2>印度</h2> <h3>中国</h3> </div> <div id="forth"> <div id="as1">巴西</div> <div id="as2">巴拿马</div> <div id="as3">巴比伦</div> </div> </body> </html> <script type="text/javascript"> //$("#one").css("color","blue"); //$(".first").css("color","yellow"); //$("*").css("color","green"); //$("p").css("color","red"); //$("#one,.first").css("color","orange"); //$("#second p").css("color","red"); //$("#second>div").css("c","grey"); //$("h2+h3").css("color","orange"); //$("#as1~div").css("color","orange"); // $(".first:first").css("color","yellow"); // $(".first:last").css("color","red"); // $(".first:even").css("color","red"); // $(".first:odd").css("color","green"); /*$(".first:eq(0)").css("color","greenyellow"); $(".first:gt(0)").css("color","blue"); $(".first:lt(1)").css("color","green");*/ //$(".first:not(empty)").css("color","green"); //$(".first:empty").css("color","yellow"); </script>
以上是关于6.20 jquery基础 选择器的主要内容，如果未能解决你的问题，请参考以下文章