前言:上一篇博客对jQuery的基础做了一个简单的总结,今天来和大家分享一下jQuery中一个非常重要的内容选择器。
(一)简介(来源于w3cschool)
1.是什么
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
2.优先级
jquery 是没有优先级的,jquery是按照你的条件遍历一次DOM tree,所以写条件的时候最好尽量缩小范围和用ID,避免要遍历全部DOM,这样效率是最快的
(二)内容
1.选择器1
基本选择器:id选择器、类选择器、标签选择器、通用选择器
(1) id选择器:$(’#id’)
text()方法相当于innerText属性
jQuery中很多方法是传参设置,无参取值
相当于
function myText(ele, txt) {
if(!txt) {
return ele.innerText;
} else {
ele.innerText = txt;
}
}
(2)标签选择器:$(‘target’)
如果页面上有多个div,调用这个方法会对所有div执行这个操作
不像以前需要循环,这个称为【隐式迭代】
相当于
function myTarg(mk, txt) {
var targs = document.getElementsByTagName(mk);
for(var i = 0; i < targs.length; i++) {
targs[i].innerText = txt;
}
}
(3) 类选器:$(’.className’)
对任何元素处理,只要应用了对应类
(4)标签+类选择器:$(‘target.className’)
【方法介绍】
html() innerHTML
text() innerText
css() 设置样式, 两个参数css(‘color’,‘red’)
val() value
2.选择器2
(1)后代选择器 $(祖代 后代)
(2)子代选择器 $(父>子)
(3)紧随选择器 $(前+后) // $(前+)
(4)紧随选择器同义的方法
(前).next()
(5)向后选择器 $(前~后) // $(前~)
(6)向后的同义方法
(前).nextAll()
(7)向前选择方法 $(现).priv()与privAll()
(8)反选方法 $(现).siblings();
【控制类样式(链式编程)】
①addClass(类名)
功能:为标签添加class属性
注释:class属性是可以追加的
②removeClass(类名)
③hasClass(类名) // 返回boolean值
④toggleClass(类名) // 切换样式的应用与删除
addClass、removeClass不会清除所有样式,只是追加与移除
实例:开灯关灯
<title></title>
<style>
.c {
background-color: #000;
}
.cc {
background-color: #f00;
}
div {
border: 1px solid red;
width: 300px;
height: 100px;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
if ($("body").hasClass("c")) {
$("body").removeClass("c");
$(this).val("点击关灯");
} else {
$("body").addClass("c");
$(this).val("点击开灯");
}
// $("body").toggleClass("c");
var count = 0;
})
})
</script>
</head>
<body>
<input type="button" value="点击关灯" id="btn">
<div></div>
<div></div>
<div></div>
</body>
</html>
总结:关于jQuery还有很多内容,后续和大家分享一下过滤器,欢迎大家浏览评论~