程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery?选择器

jQuery?基础选择器与属性选择器

 更新时间：2022年08月31日 08:31:20   作者：RiemannHypothesis???????  
这篇文章主要介绍了jQuery?基础选择器与属性选择器，选择所有元素,此选择器使用要慎重，其速度是极其慢的，详细介绍内容需要的小伙伴可以参考一下下面文章内容
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

基础选择器

All Selector ("*")

选择所有元素,此选择器使用要慎重，其速度是极其慢的

<!DOCTYPE html>
<html>
<head>
  <style>
  h3 { margin: 0; }
  div,span,p {
    width: 80px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  #test {
    width: auto; height: auto; background-color: transparent;
  }
  </style>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="test">
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</div>
<script>
var elementCount = $("#test").find("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
 
</body>
</html>

Class Selector (".class")

选择给定样式类名的所有元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
 
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>
 
</body>
</html>

Element Selector ("element")

根据给定（html）标记名称选择所有的元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>DIV1</div>
 
  <div>DIV2</div>
  <span>SPAN</span>
<script>$("div").css("border","9px solid red");</script>
 
</body>
</html>

ID Selector ("#id")

选择一个具有给定id属性的单个元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="notMe"><p>id="notMe"</p></div>
 
  <div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
 
</body>
</html>

Child Selector ("parent > child")

选择所有指定“parent”元素中指定的"child"的直接子元素。

<!DOCTYPE html>
<html>
<head>
  <style>
body { font-size:14px; }
</style>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
 
<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
  </li>
  <li>Item 3</li>
</ul>
 
<script>$("ul.topnav > li").css("border", "3px double red");</script>
 
</body>
</html>

属性选择器

Attribute Selector [name="value"]

选择指定属性是给定值的元素。

  • attribute: 一个属性名.
  • value: 一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。
<!DOCTYPE html>
<html>
<head>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <label>
      <input type="radio" name="newsletter" value="name" />
      <span>name</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="age" />
      <span>age</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="age" />
      <span>sex</span>
    </label>
  </div>
<script>$('input[value="name"]').next().text("username");</script>
</body>
</html>

Attribute Selector [name|="value"]

选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。

<!DOCTYPE html>
<html>
<head>
  <style>
a { display: inline-block; }
  </style>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
 
  <a href="example.html" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  hreflang="en">Some text</a> 
 
  <a href="example.html" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  hreflang="en-UK">Some other text</a>
 
  <a href="example.html" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  hreflang="english">will not be outlined</a>
 
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>
</body>
</html>

Attribute [name*="value"]

选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

<!DOCTYPE html>
<html>
<head>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="man-news" />
  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name*="man"]').val('has man in it!');</script>
 
</body>
</html>

Attribute Selector [name~="value"]

选择指定属性用空格分隔的值中包含一个给定值的元素。

<!DOCTYPE html>
<html>
<head>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="man-news" />
 
  <input name="milk man" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>
 
</body>
</html>

Attribute Selector [name$="value"]

选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。

<!DOCTYPE html>
<html>
<head>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="newsletter" />
 
  <input name="milkman" />
  <input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>
 
</body>
</html>

Attribute Selector [name^="value"]

选择指定属性是以给定字符串开始的元素

<!DOCTYPE html>
<html>
<head>
  <script src="http://9i0i.com/pic.php?p=./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="newsletter" />
 
  <input name="milkman" />
  <input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>
 
</body>
</html>

到此这篇关于jQuery 基础选择器与属性选择器的文章就介绍到这了,更多相关jQuery 选择器内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com