jQuery

最新推荐文章于 2024-07-23 11:32:13 发布

掉头不要太快了

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量26

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_55730147/article/details/129308216

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

选择器

选择器本身只是一个有特定语法规则的字符串，没有实质用处
它的基本语法规则使用的就是CSS的选择器语法，并对基进行了扩展
只有调用$，并将选择器作为参数传入才能起作用
$(selector)作用：
根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成iQuery返回

jQuery基本选择器

名称及用法	描述
ID选择器 $(#id’);	获取指定ID的元素
类选择器 $(.class’);	获取同一类class的元素
标签选择器 $(div’);	获取同一类标签的所有元素
并集选择器 $(div,p,li);	使用逗号分隔，只要符合条件之一就可。
交集选择器 $(‘div.redClass’);	获取class为redClass的div元素

<body>
    <div id="div">id选择器</div>
    <ul>
        <li class="css">类选择器</li>
        <li class="css">类选择器</li>
        <li class="css">类选择器</li>
    </ul>
    <div class="bj1">并集选择器</div>
    <div class="bj2">并集选择器</div>
    <ol>
        <li>交集</li>
        <li class="jj">交集</li>
        <li>交集</li>
    </ol>
</body>
<script>
   $(function () {
        // id选择器
        // 语法 ：$("#id")
        // 作用：通过id来获取页面中的元素
        $('#div').css('fontSize','40px');

		// 类选择器
        // 语法 ：$(".class")
        // 作用：获取页面中一类元素，通过class属性来获取
        $('.css').css('fontSize','20px');

		// 标签选择器
        // 语法 ：$("标签名")
        // 作用：通过标签名来获取对应元素
        $('li').css('backgroundColor','red');

		// 并集选择器
        // 语法 ：$("sele1，sele2")
        // 作用：获取多个选择器的并集
        $('.bj1,.bj2').css('color','red');

		// 交集选择器
        // 语法 ：$("sele1sele2")
        // 作用：获取两个选择器之间的交集
        $('li.jj').css('color','green');
    })    
</script>

jQuery层级选择器

名称及用法	描述
子代选择器 $(ul > li’);	使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 $(ul li);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

jQuery过滤选择器

这类选择器都带冒号:

名称及用法	描述
:eg ( index ) $(li:eq(2)).css(color"‘red’);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd $(li:odd’).css(colorred’);	获取到的li元素中，选择索引号为奇数的元素
:even $(li:even’).css(color’‘red’);	获取到的li元素中，选择索引号为偶数的元素

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
<script>
   $(function () {
        // 设置奇数行li标签颜色为天蓝色
        $('li:odd').css('backgroundColor','skyblue');
        // 设置偶数行li标签颜色为粉色
        $('li:even').css('backgroundColor','pink');
        // 设置首行li标签颜色为红色
        $('li:eq(0)').css('backgroundColor','red');
    })    
</script>

jQuery筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法

名称及用法	描述
children(selector) $(ul’).children(li)	相当于$(ul-li)，子类选择器
find(selector) $(‘ul).find(li’);	相当于$(ulli),后代选择器
siblings(selector) $(#first’).siblings(li’);	查找兄弟节点，不包括自己本身
parent() $(#first).parent();	查找父亲
eq(index) $(li’).eq(2);	相当于$(li:eq(2)),index从0开始
next() $(li’).next()	找下一个兄弟
prev0 $(li’).prev0	找上一次兄弟