jQuery常用API①(选择器、样式操作)

jQuery常用API①(选择器、样式操作)

文章目录

​​jQuery选择器​​

​​jQuery 基础选择器​​​​jQuery层级选择器​​​​隐式迭代​​​​jQuery 筛选选择器​​​​jQuery 筛选方法​​​​jQuery 里面的排他思想​​​​链式编程​​

​​jQuery 样式操作​​

​​操作 css 方法​​​​设置类样式方法​​​​类操作与className区别​​

jQuery选择器

jQuery 基础选择器

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

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

jQuery层级选择器

隐式迭代

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

例如： jQuery 设置样式

$('div').css('属性', '值')

• 相同的操作
• 相同的操作
• 相同的操作

jQuery 筛选选择器

例如：

• 多个里面筛选几个
• 多个里面筛选几个
• 多个里面筛选几个
• 多个里面筛选几个
• 多个里面筛选几个
• 多个里面筛选几个

1. 多个里面筛选几个
2. 多个里面筛选几个
3. 多个里面筛选几个
4. 多个里面筛选几个
5. 多个里面筛选几个
6. 多个里面筛选几个

结果：

jQuery 筛选方法

1. 我是ol 的li
2. 我是ol 的li
3. 我是ol 的li
4. 我是ol 的li
5. 我是ol 的li
6. 我是ol 的li

• 我是ol 的li
• 我是ol 的li
• 我是ol 的li
• 我是ol 的li
• 我是ol 的li
• 我是ol 的li

jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);

这里的this用$()包起来是因为，这个this是DOM对象，不是jQuery对象。可以打印出来验证。

链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

使用链式编程一定注意是哪个对象执行样式. 同时还要注意方法的返回值。

例如：

jQuery 样式操作

操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

参数只写属性名，则是返回属性值

$(this).css(''color'');

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，

$(this).css({ "color":"white","font-size":"20px"})；

例如：

如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号

设置类样式方法

作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

添加类

$(“div”).addClass(''current'');

移除类

$(“div”).removeClass(''current'');

切换类

$(“div”).toggleClass(''current'');

切换的本质就是：有则加，无则减

类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。