jquery-2
jquery 选择器
jQuery 基础选择器
$(‘选择器’)：选择器直接写 CSS 选择器，但是要加引号。
jQuery 层级选择器
| 名称 | 用法 | 描述 |
| 子代选择器 | $(‘ul > li’) | 使用 > 号，获取亲儿子层级的元素，不会获取孙子层级的元素 |
| 后代选择器 | $(‘ul li’) | 使用空格，代表后代选择器，获取 ul 下的所有 li，包括孙子 |
隐式迭代
遍历内部 DOM 元素(伪数组形式存储)的过程叫做隐式迭代。简单理解就是给匹配到的所有元素内部进行循环遍历，执行相应的方法，而不用进行循环。
筛选选择器
| 语法 | 用法 | 描述 |
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中，选择索引号为2的元素，索引号从0开始 |
| :odd | $(‘li:odd’) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取到的li元素中，选择索引号为偶数的元素 |
<body> <ul> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> </ul> <ol> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> <li>相同的li</li> </ol> </body> <script src="./jquery.min.js"></script> <script> $('ul li:first').css('background-color', 'cyan') $('ul li:last').css('background-color', 'red') $('ul li:eq(2)').css('background-color', 'blue') $('ol li:odd').css('background-color', 'gray') $('ol li:even').css('background-color', 'black') </script>
jquery 筛选方法
| 语法 | 用法 | 说明 |
| parent() | $(‘li’).parent() | 查找父级 |
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul > li’)，最近一级（亲儿子） |
| find(selector) | $(‘ul’).find(‘li’) | 相当于$(‘ul li’)，后代选择器 |
| siblings(selector) | $(‘.first’).siblings(‘li’) | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(‘.first’).nextAll() | 查找当前元素之后所有的同辈元素 |
| prevAll([expr]) | $(‘.last’).parevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(‘div’).hasClass(‘protected’) | 检查当前元素是否含有某个特定类，如果有，返回true |
| eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’)，index动0开始 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="father"> <div class="son">son</div> </div> <div class="nav"> <p>p标签</p> <div> <p>盒子里的p</p> </div> </div> <ol> <li>ol的li</li> <li>ol的li</li> <li class="item">ol的li</li> <li>ol的li</li> <li>ol的li</li> <li>ol的li</li> </ol> <ul> <li>ul的li</li> <li>ul的li</li> <li>ul的li</li> <li>ul的li</li> <li>ul的li</li> <li>ul的li</li> </ul> </body> <script src="./jquery.min.js"></script> <script> // 获取父级 console.log($('.son').parent()); // 子代 console.log($('.nav').children('p')); // 后代 console.log($('.nav').find('p')); // 兄弟 console.log($('ol .item').siblings()); // 看看这个元素里使用有这个lei，有返回true console.log($('ol li:first').hasClass('item')); console.log($('ol li').eq(2).hasClass('item')); </script> </html>
链式编程
链式编程可以节省代码量。
比如：$(this).css(‘color’, ‘cyan’).sibling().css(‘color’, ”)。
使用链式编程时一定要注意是给哪个对象执行样式。
CSS 方法
1、参数只写属性名，那么返回属性值。
2、参数是属性名，属性值，逗号分隔。是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
3、参数可以是对象形式，方便设置多组样式。属性名和值用冒号分隔，属性可以不用加引号。
类操作
1、添加：$(this).addClass(‘类名’)。给当前元素添加这个类名。
2、移除：$(this).removeClass(‘类名’)。给当前元素移除这个类名。
3、切换：$(this).toggleClass(‘类名’)。如果当前元素没有这个类名那么就是添加，如果当前元素有这个类名那么就是移除。
效果
1、show( [speed], [easing], [fn] )：显示元素。
2、hide( [speed], [easing], [fn] )：隐藏元素。
3、toggle( [speed], [easing], [fn] )：在显示和隐藏之间切换。
4、slideDown( [speed], [easing], [fn] )：下滑显示元素。
5、slideUp( [speed], [easing], [fn] )：上滑隐藏元素。
6、slideToggle( [speed], [easing], [fn] )：在上滑和下滑之间切换。
7、fadeIn( [speed], [easing], [fn] )：淡入显示元素。
8、fadeOut( [speed], [easing], [fn] )：淡出隐藏元素。
9、fadeToggle( [speed], [easing], [fn] )：在淡入和淡出之间切换。
speed：三种预定速度之一的字符串( ‘slow’, ‘normal’, or ‘fast’ )或表示动画时长的毫秒数值。
easing：用来指定切换效果，默认是 swing， 可用参数是 linear。
fn：在动画完成时执行的函数，每个元素执行一次。
10、fadeTo( [ [speed]，opacity，[ easing], [fn] ] )
opacity：透明度必须写，取值 0 – 1 之间。
speed：三种预定速度之一的字符串( ‘slow’, ‘normal’, or ‘fast’ )或表示动画时长的毫秒数值(如：1000)。必须写。
easing：Optional，用来指定切换效果，默认是 swing，可用参数是 linear。
fn：在动画完成时执行的函数，每个元素执行一次。
事件切换：hover(over, out)
over：鼠标移到元素上要触发的函数，相当于 mouseenter。
out：鼠标移出元素要出发的函数，相当于 mouseleave。
自定义动画 animate
语法：animate(params, [speed], [easing], [fn])
参数
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是符合属性则需要采取驼峰命名法，比如 — borderLeft。其余参数可以省略。
speed：三种预定速度之一的字符串( “slow”, “normal”, or “fast” )或表示动画时长的毫秒数值，如 — 1000。
easing：(Optional)用来指定切换效果，默认是 swing，可用参数是 linear。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
<style> div { width: 300px; height: 300px; background-color: cyan; position: absolute; } </style> </head> <body> <button>按钮</button> <div></div> </body> <script src="./jquery.min.js"></script> <script> $('button').click(function () { $('div').animate({ left: 200, top: 300, opacity: .4 }) }) </script>
属性操作
设置或获取元素固有属性值 prop()
元素固有属性就是元素本身自带的属性，比如 a 元素的 href、 input 里的 type。
获取：prop(‘属性’)。
设置：prop(‘属性’，’属性值’)。
设置或获取元素自定义属性 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加的 index = ‘1’。
获取：attr(‘属性’)。
设置：attr(‘属性’, ‘属性值’)。
数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。