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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值