jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布
最新推荐文章于 2024-01-14 11:54:30 发布
阅读量314 收藏 6
点赞数 4
分类专栏： JQuery 前端 js 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43465434/article/details/115214556
版权
前端 同时被 3 个专栏收录
35 篇文章 1 订阅
订阅专栏
js
28 篇文章 1 订阅
订阅专栏
JQuery
3 篇文章 0 订阅
订阅专栏

jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。




文章目录




标签选择器

语法： jQuery( “标签名” )
描述： 选择拥有给定标签名的所有元素。
返回值： 返回值为一个类数组jQuery对象，可以通过for…of方法遍历
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

	</head>
	<body>
		<p>我是p标签</p>
		<span>我是span标签</span>
		<p>我是p标签</p>
		<span>我是span标签</span>
		<script type="text/javascript">
			$(function(){
				let tag = $("span");//获取了所有的span标签
				tag.css("color","red");
				console.log(tag);//打印返回值
			})
		</script>
	</body>
</html>

输出结果：在这里插入图片描述
再来看一下控制台打印结果：
在这里插入图片描述
【备注】因为jQuery中的选择器的返回值几乎都是返回一个类数组jQuery对象，所以之后的选择器返回值不再重复展示说明。

ID选择器

语法： jQuery( “#id”)
描述： 选择一个具有给定id属性的单个元素。
示例： 查找ID为“myDiv”的元素。

<!doctype html>
<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>id demo</title>
	  <style>
	  div {
	    width: 90px;
	    height: 90px;
	    float: left;
	    padding: 5px;
	    margin: 5px;
	    background-color: #eee;
	  }
	  </style>
	  <script src="https://code.jquery.com/jquery-1.10.2.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>

输出结果：
在这里插入图片描述

class选择器

语法： jQuery( “.class” )
描述： 选择给定样式类名的所有元素。
示例： 找到该元素的类名为“myclass”。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

输出结果：
在这里插入图片描述

通配符选择器

语法： jQuery( “*” )
描述： 匹配所有元素 。
示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>all demo</title>
  <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="https://code.jquery.com/jquery-1.10.2.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>

输出结果：
在这里插入图片描述

属性选择器

属性选择器有很多种，这里列举一些我们在jQuery中经常使用的选择器

根据属性名选择元素 [attr]

语法： jQuery( “[attribute]” )
attribute: 一个属性名
描述： 选择所有具有指定属性的元素，该属性可以是任何值。
示例： 给具有id属性的div绑定一个单一的点击，文本中增加div的id文本。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeHas demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
 
<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});
</script>
 
</body>
</html>

输出结果：
在这里插入图片描述

根据属性=val选择元素 [attr=val]

语法： jQuery( “[attribute=‘value’]” )
attribute: 一个属性名.
value: 一个属性值，可以是一个 有效标识符或带一个引号的字符串。

描述： 选择指定属性是给定值的元素。
示例： 查找所有属性值为 ‘Hot Fuzz’ 的 input 元素，并且将跟在它后面的 span 元素中的文本修改成 " Hot Fuzz"。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEquals demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>
 
<script>
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

对[attr=val]取反 [attr!=val]

语法： jQuery( “[attribute!=‘value’]” )
attribute: 一个属性名.
value: 一个属性值，可以是一个 有效标识符或带一个引号的字符串。

描述： 选择不存在指定属性，或者指定的属性值不等于给定值的元素。
示例： 查找所有 name 属性不是 ‘newsletter’ 的元素，并在其后的 span 中追加 ‘; not newsletter’ HTML。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeNotEqual demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <input type="radio" name="newsletter" value="Hot Fuzz">
  <span>name is newsletter</span>
</div>
<div>
  <input type="radio" value="Cold Fusion">
  <span>no name</span>
</div>
<div>
  <input type="radio" name="accept" value="Evil Plans">
  <span>name is accept</span>
</div>
 
<script>
$( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 attr 以 val 开头的元素 [attr^=val]

语法： jQuery( “[attribute^=‘value’]” )
attribute: 一个属性名.
value: 一个属性值，可以是一个 有效标识符或带一个引号的字符串。
描述： 选择指定属性是以给定字符串开始的元素
示例： 查找属性名称以“news”开头的所有输入，并将文本放入其中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeStartsWith demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input name="newsletter">
<input name="milkman">
<input name="newsboy">
 
<script>
$( "input[name^='news']" ).val( "news here!" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 attr 以 val 结尾的元素 [attr$=val]

语法： jQuery( “[attribute$=‘value’]” )
attribute: 一个属性名.
value: 一个属性值，可以是一个 有效标识符或带一个引号的字符串。

描述： 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
示例： 查找所有的属性名称以“letter”的结束，并把他们的文字输入。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEndsWith demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
 
<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 attr 的值 中 包含 val 的元素 [attr*=val]

语法： jQuery( “*” )
描述： 匹配所有元素 。
示例： 查找所有的属性名称以“letter”的结束，并把他们的文字输入。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEndsWith demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
 
<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 attr = val 或者 attr 以 val- 开头的属性 [attr|=val]

语法： jQuery( “[attribute|=‘value’]” )
attribute: 一个属性名.
value: 一个属性值，引号是可选的. 可以是一个 有效标识符或带一个引号的字符串。

描述： 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
示例： 查找hreflang属性值是英语的所有链接。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsPrefix demo</title>
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
 
<script>
$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 attr 属性值 包含 val 单词的 元素 [attr~=val]

语法： jQuery( “[attribute~=‘value’]” )
attribute: 一个属性名.
value: 一个属性值，可以是一个 有效标识符或带一个引号的字符串。

描述： 选择指定属性用空格分隔的值中包含一个给定值的元素。
【注意】：
这个选择器测试属性值中的每个单词字符串，其中“word”是一个由空白分隔的字符串定义的。如果测试字符串恰好等于任何一个字词这个选择器将选择。
示例： 查找所有属性中含有 ‘man’ 这个单词的文本框，并且修改其文本值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsWord demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

运行结果：在这里插入图片描述

and 两个属性选择器必须同时满足 […][…]

语法： jQuery( “[attributeFilter1][attributeFilter2][attributeFilterN]” )
attributeFilter1: 一个属性过滤器.
attributeFilter2: 另一个属性过滤器, 用于进一步减少被选择的元素。
attributeFilterN: 根据需要有更多的属性过滤器

描述： 选择匹配所有指定的属性筛选器的元素
示例： 查找那些有 id 属性，并且 name 属性以 man 结尾的输入框，并将它们的值设为 ‘only this one’。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeMultiple demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="man-news" name="man-news">
<input name="milkman">
<input id="letterman" name="new-letterman">
<input name="newmilk">
 
<script>
$( "input[id][name$='man']" ).val( "only this one" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

后代选择器

语法： jQuery( “ancestor descendant” )
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。
描述： 选择给定的祖先元素的所有后代元素。
【注意】一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
示例： 查找所有表单下的input后代元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>descendant demo</title>
  <style>
  form {
    border: 2px green solid;
    padding: 2px;
    margin: 0;
    background: #efe;
  }
  div {
    color: red;
  }
  fieldset {
    margin: 1px;
    padding: 3px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <div>Form is surrounded by the green border.</div>
 
  <label for="name">Child of form:</label>
  <input name="name" id="name">
 
  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
Sibling to form: <input name="none">
 
<script>
$( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

直接子元素选择器

语法： jQuery( “parent > child” )

描述： 选择所有指定“parent”元素中指定的"child"的直接子元素。
【注意】这个子元素组合选择器(E > F)被认为是后代组合选择器(E F)的一个更具体的形式，但是他们有所不同，子元素组合选择器(E > F)它只会选择第一级的后代。

示例： 为无序列表

  • 的所有直接子元素加上边框。 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>child demo</title>
  <style>
  body {
    font-size: 14px;
  }
  	</style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

运行结果：
在这里插入图片描述

兄弟选择器

选中紧邻的兄弟元素

语法： jQuery( “prev + next” )
prev: 任何有效的选择器。
next: 用于筛选紧跟在 “prev” 后面的元素的选择器。

描述： 选择所有紧接在 “prev” 元素后的 “next” 元素

【注意】其中重要的一点既要考虑下一个相邻兄弟选择器（ prev + next ）和一般兄弟选择器（ prev ~ siblings ）所选择到的元素，必须在同一个父元素下。

示例： 查找所有跟在 label 后面的 input 元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next adjacent demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">
 
<script>
$( "label + input" ).css( "color", "blue" ).val( "Labeled!" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中后面所有的兄弟元素

语法： jQuery( “prev ~ siblings” )
prev: 任何有效的选择器
siblings: 一个选择器来过滤第一选择器以后的兄弟元素。

描述： 匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
【注意】(prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

示例： 查找所有跟在 id 为 #prev 的元素后面的所有 div。注意，跟在后面的 span 不会被选中，因为它不是 div 。同时 “niece” 也不会被选中，因为它是某个兄弟元素的子元素，而不是兄弟元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next siblings demo</title>
  <style>
  div, span {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
 
<script>
$( "#prev ~ div" ).css( "border", "3px groove blue" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

分组选择器

语法： jQuery( “selector1, selector2, selectorN” )
selector1: 任何有效的选择
selector2: 其他有效的选择
selectorN: 更多有效的选择只要你喜欢。
描述： 将每一个选择器匹配到的元素合并后一起返回。
示例： 查找任何匹配下面三个选择器的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>element demo</title>
  <style>
  div, span {
    width: 60px;
    height: 60px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
 
<script>
$( "div" ).css( "border", "9px solid red" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

子元素选择器

选中父级元素下第一个子元素

语法： jQuery( “:first-child” )
描述： 选择所有父级元素下的第一个子元素。
【注意】虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)。
示例： 给每个匹配的 div 中查找第一个 span，并加上下划线及增加鼠标悬停效果。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first-child demo</title>
  <style>
  span {
    color: #008;
  }
  span.sogreen {
    color: green;
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>
 
<script>
$( "div span:first-child" )
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

选中父级元素下最后一个 子元素

语法： jQuery( “:last-child” )
描述： 选择所有父级元素下的最后一个子元素。
【注意】:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素。
示例： 在每个匹配的 div 中查找最后一个 span ，并加上 CSS 以及增加鼠标悬停效果。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last-child demo</title>
  <style>
  span.solast {
    text-decoration: line-through;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon,</span>
  <span>Sam</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
</div>
 
<script>
$( "div span:last-child" )
  .css({ color:"red", fontSize:"80%" })
  .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中父级元素下的 同类型的第一个子元素

语法： jQuery( “:first-of-type” )
描述： 选择所有相同的元素名称的第一个兄弟元素。
【注意】:first-of-type 选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前。
示例： 在每一个匹配的div中查找第一个span，给它添加一个类。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first-of-type demo</title>
  <style>
  span.fot {
    color: red;
    font-size: 120%;
    font-style: italic;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <b>Nobody,</b>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo</span>
</div>
 
<script>
$( "span:first-of-type" ).addClass( "fot" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中父级元素下的 同类型的最后一个 子元素

语法： jQuery( “:last-of-type” )
描述： 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
【注意】:last-of-type 选择器匹配在文档树中具有相同的父元素并且相同的元素名称，后面没有任何其他元素 的元素。
示例： 在每一个匹配的div中找到最后一个span，并加上 CSS 以及增加鼠标悬停效果。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last-of-type demo</title>
  <style>
  span.solast {
    text-decoration: line-through;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo,</span>
  <b>Nobody</b>
</div>
 
<script>
$( "span:last-of-type" )
  .css({ color:"red", fontSize:"80%" })
  .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

:nth-child()

语法： jQuery( “:nth-child(index/even/odd/equation)” )
index: 每个相匹配子元素的索引值，从1开始，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-child(even), :nth-child(4n) )。
描述： 选择的他们所有父元素的第n个子元素。
示例： 查找每个匹配的 ul 中的第二个 li，并将它标记出来。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

:nth-last-child()

语法： jQuery( “:nth-last-child(index/even/odd/equation)” )
描述： 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
示例： 找到该元素的类名为“myclass”。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-child demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>
<script>
$( "ul li:nth-last-child(2)" ).append( "<span> - 2nd to last!</span>" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

:nth-of-type()

语法： jQuery( “:nth-of-type(index/even/odd/equation)” )
描述： 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
示例： 查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type demo</title>
  <style>
  .nth {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>John</span>,
  <b>Kim</b>,
  <span>Adam</span>,
  <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>,
  <span>Richard</span>,
  <span>Ralph</span>,
  <span>Jason</span>
</div>
 
<script>
$( "span:nth-of-type(2)" )
  .append( "<span> is 2nd sibling span</span>" )
  .addClass( "nth" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

:nth-last-of-type()

语法： jQuery(":nth-last-of-type(index/even/odd/equation)" )
index: 每个相匹配子元素的索引值，从最后一个开始(1)，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-last-of-type(even), :nth-last-of-type(4n))
描述： 选择所有他们父级兄弟元素下具有相同的元素名的倒数第n个子元素，计数从最后一个元素开始到第一个。
示例： 在每个匹配的ul中查找倒数第二个li，并将它标记出来。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-of-type demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-last-of-type(2)" ).append( "<span> - 2nd to last!</span>" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

获取父元素中的唯一一个子元素

语法： jQuery( “:only-child” )
描述： 如果某个元素是其父元素的唯一子元素，那么它就会被选中。
【注意】
若父元素有其他子元素，就不会被匹配。
如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：

图片

，用$(‘p img:only-child’)是可以匹配）

示例： 若每个 div 中只有一个按钮，则改变这些按钮的外观。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-child demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<script>
$( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

其他选择器（jQuery的选择器扩展）

jQuery扩展的选择器可以i分为：基本、内容、可见性、表单对象属性四个部分

基本

获取选择器 选中的多个元素中的 第一个

语法： jQuery( “:first” )
描述： 选择第一个匹配的DOM元素。
示例： 查找第一个表行。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first demo</title>
  <style>
  td {
    color: blue;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>
 
<script>
$( "tr:first" ).css( "font-style", "italic" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取选择器 选中的多个元素中的 最后一个元素

语法： jQuery( “:last” )
描述： 选择最后一个匹配的元素。
示例： 查找表格中的最后一行。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>
 
<script>
$( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中指定索引位置的元素

语法1： jQuery( “:eq(index)” )
index: 要匹配元素的索引值（从0开始计数）
语法2： jQuery( “:eq(-index)” )
indexFromEnd: 要匹配元素的索引值（从0开始计数）, 从最后一个元素开始倒计数
描述： 在匹配的集合中选择索引值为index的元素。
示例： 查找第三个 td。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:eq( 2 )" ).css( "color", "red" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 大于index 索引的元素

语法： jQuery( “:gt(index)” )
index: 从0开始计数的索引值。
描述： 选择匹配集合中所有大于给定index（索引值）的元素。
示例： 给TD＃5高亮的黄色背景和TD＃8个红色的文字颜色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gt demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

选中 小于index 索引的元素

语法1： jQuery( “:lt(index)” )
index: 从 0 开始计数的索引值。
语法2： jQuery( “:lt(-index)” )
-index: 从0开始计数的索引值。 从最后一个元素开始反向计数。
描述： 选择匹配集合中所有索引值小于给定index参数的元素。
示例： 查找ID为“myDiv”的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lt demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:lt(4)" ).css( "backgroundColor", "yellow" );
$( "td:lt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

排除 selector选中的元素

语法： jQuery( “:not(selector)” )
selector: 一个用来过滤的选择器。
描述： 选择所有元素去除不匹配给定的选择器的元素。
示例： 查找所有没有被选中的复选框，然后高亮后面的 span。注意，当你点击复选框的时候不会有反应，因为没有绑定任何点击事件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <input type="checkbox" name="a">
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b">
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked">
  <span>Peter</span>
</div>
 
<script>
$( "input:not(:checked) + span" ).css( "background-color", "yellow" );
$( "input").attr( "disabled", "disabled" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取奇对应的元素

描述： 选择索引值为奇数元素，从 0 开始计数。同样查看偶数 even。
【注意】这是基于0的索引，所以:odd选择器是选择第二个元素，第四个元素，依此类推在匹配。
示例： 查找表格中索引值是奇数的行(即实际表格中的偶数行)，即匹配第二行、第四行、第六行等 (索引值是 1, 3 ,5 等 )。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>odd demo</title>
  <style>
  table {
    background: #f3f7f5;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>
 
<script>
$( "tr:odd" ).css( "background-color", "#bbbbff" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取偶对应的元素

描述： 选择所引值为偶数的元素，从 0 开始计数。
示例： 查找偶数表行，匹配第一个、第三个等（索引0, 2, 4等）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>even demo</title>
  <style>
  table {
    background: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>
 
<script>
$( "tr:even" ).css( "background-color", "#bbf" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取 聚焦的元素

语法： jQuery( “:focus” )
描述： 选择当前获取焦点的元素。
示例： 给获取焦点的元素添加focused类

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <style>
  .focused {
    background: #abcdef;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="content">
  <input tabIndex="1">
  <input tabIndex="2">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <div tabIndex="4">
    a div
  </div>
</div>
 
<script>
$( "#content" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取URL对应的锚点的元素

语法： jQuery( “:target” )
描述： 选择由文档URI的格式化识别码表示的目标元素。

内容

获取 选中的元素中 包含 指定的文本 元素

语法： jQuery( “:contains(text)” )
text: 用来查找的一个文本字符串。这是区分大小写的。
描述： 选择所有包含指定文本的元素。
示例： 查找所有包含“John”的div，并强调他们。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
 
<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取标签体中内容为空的元素

语法： jQuery( “#id”)
描述： 选择一个具有给定id属性的单个元素。
示例： 查找ID为“myDiv”的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>empty demo</title>
  <style>
  td {
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>
 
<script>
$( "td:empty" )
  .text( "Was empty!" )
  .css( "background", "rgb(255,220,200)" );
</script>
 
</body>
</html>

运行结果：在这里插入图片描述

:parent

语法： jQuery( “:parent” )
描述： 选择所有含有子元素或者文本的父级元素。
示例： 查找含有子元素的 td 元素，包括含有文本的 td。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parent demo</title>
  <style>
  td {
    width: 40px;
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
 
<script>
$( "td:parent" ).fadeTo( 1500, 0.3 );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

查找元素中是否包含 指定选择器的元素

语法： jQuery( “:has(selector)” )
selector: 任何选择器。
描述： 选择元素其中至少包含指定选择器匹配的一个种元素。
示例： 给所有含有 p 段落标签的 div 加上一个名为 “test” 的 class。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has demo</title>
  <style>
  .test {
    border: 3px inset red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
 
<script>
$( "div:has(p)" ).addClass( "test" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

可见性

:visible

语法： jQuery(":visible" )
描述： 选择所有可见的元素。
示例： 在所有可见的 div 上添加事件，当点击后变成黄色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>visible demo</title>
  <style>
  div {
    width: 50px;
    height: 40px;
    margin: 5px;
    border: 3px outset green;
    float: left;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
 
<script>
$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

处理内容不可见的标签

语法： jQuery(":hidden" )
描述： 选择所有隐藏的元素。
示例： 示所有隐藏divs和统计隐藏的inputs。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hidden demo</title>
  <style>
  div {
    width: 70px;
    height: 40px;
    background: #e7f;
    margin: 5px;
    float: left;
  }
  span {
    display: block;
    clear: left;
    color: red;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
 
<div class="starthidden">Hider!</div>
<div></div>
 
<form>
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</form>
 
<span></span>
 
<script>
// In some browsers :hidden includes head, title, script, etc...
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
 
$( "span:first" ).text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span:last" ).text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

表单对象属性

获取所有被勾选的元素

语法： jQuery( “:checked” )
描述： 匹配所有勾选的元素。
示例： 确定有多少input元素是选中的.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checked demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
 
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
 
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>
<div></div>
 
<script>
var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();
 
$( "input[type=checkbox]" ).on( "click", countChecked );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取被选中的元素

描述： 匹配所有选中的option元素
示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selected demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取所有被禁用的元素

语法： jQuery( “:disabled” )
描述： 选择所有被禁用的元素。
示例： 查找所有被禁用的input元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>disabled demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
 
<script>
$( "input:disabled" ).val( "this is it" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

获取所有被启用的元素

语法： jQuery( “:enabled” )
描述： 选择所有可用的（手册网注：未被禁用的元素）元素。
示例： 查找所有的input元素已启用。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>enabled demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
 
<script>
$( "input:enabled" ).val( "this is it" );
</script>
 
</body>
</html>

运行结果：
在这里插入图片描述

注：本文参考了jQuery 3.1参考手册中的部分内容并引用了其中的部分示例

前水员
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JQuery 选择器使用详解
闲时不练功，忙时一场空
11-05 2552
文章目录1. 基本选择器2. 层级选择器3. 属性选择器4. 基本过滤器5. 内容过滤器6. 表单过滤器:7. 表单对象属性过滤器8. jQuery 元素筛选 选择器：筛选具有相似特征的元素(标签) 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $("html标签名") 获得所有匹配标签名称的元素 案例： $("div") 选择元素名为<div>的所有元素 2. id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 案例： $("#one") 选
JQuery选择器超级详细
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery选择器分类
weixin_45753617的博客
08-19 1138
jQuery选择器分类
jquery选择器以及案例
m0_59745705的博客
11-03 1118
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器大全总结
impact_factor的博客
08-12 1万+
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器：#id 类选择器：.class 标签名选择器： * ：匹配所有元素 基本过滤选择器 Element:first ：选取第一个元素 Element:last : 选取最后一个元素 Element:not(selector)：去除所有与给定选择器匹配的元素 Element:ev
jQuery 选择器
热门推荐
小葵坤_易安的博客
02-22 2万+
一、什么是jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。 二、jQuery选择器的优势 代码更简单； 支持CSS1到CSS3选择器； 完善的机制处理 三、jQuery选择器 jQuery选择器分类示意...
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2013
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
最新发布
Jin_Xiang123的博客
01-14 3665
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
jquery 选择器及循环
baobao__的博客
09-23 1891
文章目录1. 基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background","orange"); //类 $(".box").css("background","g...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
详解jQuery选择器
10-20
本文主要对jQuery选择器进行一一举例介绍，有助于学习、理解和记忆。具有很好的参考价值，下面就跟着小编一起来看下吧
jQuery 选择器详解
10-24
主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下
jQuery 选择器理解
10-29
凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.
jquery选择器大全 全面详解jquery选择器
10-26
jQuery选择器的设计灵感来源于CSS（层叠样式表）选择器，但功能更加强大，允许开发者以简洁的语法获取特定的DOM元素。 1. **基本选择器** - `#id`：通过元素的ID属性来选取单个元素，如`$("#myID")`。 - `element...
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值