jQuery—常用API（jQuery 选择器、jQuery 样式操作、 jQuery 效果）

VIP文章 Just-Lsy

已于 2022-03-16 01:28:37 修改

阅读量398

点赞数

分类专栏：笔记文章标签： jquery javascript 前端动画

于 2022-03-16 01:26:51 首次发布

本文链接：https://blog.csdn.net/m0_59030524/article/details/123477965

版权

目标：

能够写出常用的jQuery选择器
能够操作jQuery样式
能够写出常用的jQuery动画
能够操作jQuery属性
能够操作jQuery元素
能够操作jQuery元素尺寸、位置

1. jQuery 选择器

1.1 jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$('选择器'）//里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID 选择器	`$('#id')`	获取指定 ID 的元素
全选选择器	*`$('')`**	匹配所有元素
类选择器	`$('.class')`	获取同一类 class 的元素
标签选择器	`$('div')`	获取同一类标签的所有元素
并集选择器	`$('div,p,li')`	选取多个元素
交集选择器	`$('li.current')`	交集元素

1.2 jQuery 层级选择器

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

<body>
    <div class="nav">我是nav div</div>
    <ul>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>
    <script>
        $(function () {
            console.log($('.nav'));
            console.log($('ul li'));
        })
    </script>
</body>

1.3 隐式迭代（重要）

Tip：jQuery 设置样式：$('div’).css('属性','值')

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做 隐式迭代。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<body>
    <div>惊不惊喜意不意外</div>
    <div>惊不惊喜意不意外</div>
    <div>惊不惊喜意不意外</div>
    <div>惊不惊喜意不意外</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取4个div元素
        console.log($('div'));;
        // 2. 给4个div设置背景为粉色
        $('div').css('background', 'pink');
        // 3. 隐式迭代 就是把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法
        $('ul li').css('color', 'red');
    </script>
</body>

1.4 jQuery 筛选选择器

语法	用法	描述
`:first`	`$('li:first')`	获取第一个 `li` 元素
`:last`	`$('li:last')`	获取最后一个 `li` 元素
`:eq(index)`	`$('li:eq(2)')`	获取到的 `li` 元素中，选择索引号为 2 的元素，索引号 `index` 从 0 开始。
`:odd`	`$('li:odd')`	获取到的 `li` 元素中，选择索引号为奇数的元素
`:even`	`$('li:even')`	获取到的 `li` 元素中，选择索引号为偶数的元素

<script>
        $('ul li:first').css('color', 'red')
        $('ol li:last').css('color', 'pink')
        $('ul li:odd').css('color', 'green')
        $('ol li:even').css('color', 'yellow')
        $('ul li:eq(2)').css('color', 'blue')
        $('ul li:eq(4)').css('color', 'orange')
    </script>

1.5 jQuery 父子兄筛选方法（重点）

语法	用法	说明
`parent()`

最低0.47元/天解锁文章

Just-Lsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery—常用API（jQuery 选择器、jQuery 样式操作、 jQuery 效果）

目标：能够写出常用的jQuery选择器能够操作jQuery样式能够写出常用的jQuery动画能够操作jQuery属性能够操作jQuery元素能够操作jQuery元素尺寸、位置 1.jQuery 选择器1.1jQuery 基础选择器原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。$('选择器'）//里面选择器直接写CSS选择器即可，但是要加引号名称用法描述 ID 选择...
复制链接

扫一扫