[jQuery]选择器

前言：上一篇博客对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(选择器)或$ (前).next()
（5）向后选择器 $(前~后) // $(前~)
（6）向后的同义方法 $(前).nextAll(选择器)或$ (前).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还有很多内容，后续和大家分享一下过滤器，欢迎大家浏览评论~

猜你喜欢