//jQuery是前端开发常用库之一,所以了解一下还是很有必要的。
一、jQuery是什么?
- 是一个前端类库(方法库, 工具库)
// 相当于有人把 js 里面各种 DOM 操作都给你封装好了
// jQuery 是一个类库(方法库),所以jQuery 里面 95% 以上都是方法,将来使用的时候, 别忘了写 ()
二、jQuery的常用方法
-
jQuery选择器全兼容(css的选择器怎么写,jQuery的选择器同样可以写,返回的是一个集合)。
//特殊的选择器(jQuery觉得原生有的选择器太长了,所以简写了一些,如下所示)
1. :first => 获取第一个
2. :last => 获取最后一个
3. :eq(数字) => 获取索引为 n 的那一个
4. :odd => 获取索引为 奇数 的哪些
5. :even => 获取索引为 偶数 的哪些 -
jQuery 的筛选器(用在 jQuery 选择的元素集合后面,都是方法, 为了对已经选择出来的元素进行二次筛选)
1. first() =>一个元素集合里面的第一个 2. last()=> 一个元素集合里面的最后一个 3. eq(n) => 一个元素集合里面的索引为 n 的那一个 4. next() =>元素的下一兄弟元素 5. nextAll()=> 元素的后面的所有兄弟元素 // nextAll(选择器) => 拿到下面所有兄弟元素中符合选择器要求的元素 6. nextUntil(选择器) => 元素后面所有的兄弟元素直到选择器元素为止 7. prev() =>元素的上一个兄弟元素 8. prevAll() => 元素的上面所有兄弟元素 // prevAll(选择器) => 拿到上面所有兄弟元素中符合选择器条件的 9. prevUntil(选择器) => 元素上面的所有兄弟元素直到选择器元素为止 10. parent() => 元素的父元素 11. parents() => 元素的所有祖先元素, 直到 html 元素为止 // parents(选择器) => 找到所有祖先元素中满足选择器的那一个 12. parentsUntil(选择器) => 元素的所有祖先元素, 直到 选择器 元素为止 13. children()=>元素所有的子级元素 // children(选择器) =>所有子元素里面符合选择器条件的元素 14. siblings() =>所有的兄弟元素 // siblings(选择器)=> 拿到所有兄弟元素中满足选择器要求的元素 15. find(选择器) => => 在所有子元素里面查找 只要后代元素里面有就可以, 就能找得到 16. index() => 获取到元素的索引位置 //找到他是该父元素下的第几个元素,拿到的是一个数字
-
jQuery 操作文本内容
html()
=> 一个读写的方法
=> 不传递参数的时候, 就是获取元素内部的超文本内容(只获取第一个元素)
=> 传递一个参数的时候, 就是设置元素内部的超文本内容(给所有元素设置值)
text()
=> 一个读写的方法
=> 不传递参数的时候, 就是获取元素内部的文本内容(给所有元素设置值)
=> 传递一个参数的时候, 就是设置元素内部的文本内容(给所有元素设置值)
val()
=> 一个读写的方法, 操作 input 标签
=> 不传递参数的时候, 就是获取标签的 value 值(只获取第一个值)
=> 传递一个参数的时候, 就是设置标签的 value 值(给所有元素设置值)
- jQuery 操作元素类名
addClass() => 添加类名
=> 执行这个方法会给元素集合里面所有的元素添加上固定的类名
=> 如果有就不添加了, 没有才会添加
removeClass() => 移除类名
=> 执行这个方法会给元素集合里面素有的元素删除固定的类名
toggleClass() => 切换类名
=> 执行这个方法会给元素集合里面的所有元素切换类名
-> 本身有这个类名, 就删除
-> 本身没有这个类名, 就添加
hasClass() => 判断有没有某一个类名
=> 返回一个布尔值, 表示有没有这个类名
- jQuery 操作元素样式
1. css('样式名称')
css('width')
获取元素的样式值, 不管是行内样式还是非行内样式都能获取
2. css('样式名称', '样式的值')
css('width', '200px')
设置元素的样式值, 元素集合能获取多少个元素就设置多少个元素
设置的时候, 所有的单位都可以不写, 默认添加 px 为单位
3. css(对象)
css({
width: 100, 不写单位默认是 px
height: '200px',
opacity: 0.5
})
//第三种方法为批量添加css样式