jQuery 基础选择器与属性选择器
更新时间：2022年08月31日 08:31:20 作者：RiemannHypothesis
这篇文章主要介绍了jQuery 基础选择器与属性选择器，选择所有元素,此选择器使用要慎重，其速度是极其慢的，详细介绍内容需要的小伙伴可以参考一下下面文章内容
基础选择器
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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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 选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了jquery使用ajax实现微信自动回复插件,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery复合事件用法,结合具体实例形式分析了jQuery复合事件的简单定义与使用方法,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了基于EasyUI的基础之上实现树形功能菜单,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
用类作为选择符虽然效率低点但是 可以多次重用 这个性质不错2010-04-04
想必大家对于jQuery这个最流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在这篇文章中，参考了一些资料及实际使用效率，将介绍一些书写高质量jQuery代码的原则，不单单会告诉你如何去书写，也会告诉你为什么这样书写，希望大家会觉得有所帮助2014-03-03
这篇文章主要介绍了Jquery实现由下向上展开效果的例子,本文同时讲解了向下展开的例子,需要的朋友可以参考下2014-12-12
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
jquery除了它自己非常出色的js功能之外还附带有数不清的插件，可以完成各种美好的效果和功能。jquery.qrcode就是其中一个，用来在线生成二维码2013-08-08
这篇文章主要介绍了jQuery 仿百度输入标签插件的具体实现,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了jQuery实现合并/追加数组并去除重复项的方法,可实现合并两个数组并出去重复项的功能,涉及数组的遍历、判断、追加等相关操作技巧,需要的朋友可以参考下2018-04-04
最新评论