1. jQuery 选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
1.基础选择器
2. jQuery 层级选择器
3.jQuery 过滤(筛选)选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
子元素过滤选择器
子元素过滤选择器的过滤规则是 通过父元素和子元素的关系来获取相应的元素，可以同时获取不同父元素下满足条件的子元素。
4.jQuery 筛选方法（重点）
注:find()里面必须添加参数,而其他方法里面参数可加可不加.
5.jQuery 中each()方法的使用
在 在jquery 中，遍历对象和数组，经常会用到$().each和 $.each()两个方法 ,使用方法如下：
- 遍历一维数组:
<script> var arr1=['aa','bb','cc','dd']; // $.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组 的下标，第二个参数表示下标对应的值 $(arr1).each(function(i,val){ console.log("下标为:"+i,"值为:"+val); }) </script>
- 遍历二维数组
<script> var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']]; //$.each(arr2,function(i,item){ //两个参数，第一个参数表示一维下标， 第二个参数表示一维数组中的每一个元素 $(arr2).each(function(i,item){ console.log("一维下标为:"+i,"值为:"+item); $.each(item,function(i,val){ //遍历二维数组 console.log(i+"******"+val); }) }) </script>
- 遍历JSON对象
<script> var obj={name:'n1',age:18}; $.each(obj,function(key,val){ //两个参数，第一个参数表示对象的属性， 第二个参数表示属性值 console.log(key+"******"+val); console.log(obj[key]); }) </script>
- 遍历数组元素为JSON对象的数组
<script> var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}]; //$.each(arr3,function(i,val){ $(arr3).each(function(i,val){ console.log(i+"******"+val); //输出 /* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/ console.log(val.name); //获取每一个json里面的name值 console.log(val.age); //获取每一个json里面的name值 console.log(val["name"]); console.log(val["age"]); $.each(val,function(key,val2){ console.log(key+"******"+val2); }) }); </script>
2. jQuery 样式操作
1.操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
- 参数只写属性名，则是返回属性值
$(this).css(''color'');
- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
$(this).css({ "color":"white","font-size":"20px"});
2.设置类样式方法
- 添加类
$(“div”).addClass(''current'');
- 移除类
$(“div”).removeClass(''current'');
- 切换类
$(“div”).toggleClass(''current'');
3.Jquery效果
//显示与隐藏 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,[easing],[fn]]) //滑动效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) slideToggle([speed,[easing],[fn]])//滑动切换 //事件切换 hover([over,]out) 注:（1）over:鼠标移到元素上要触发的函数（相当于mouseenter） （2）out:鼠标移出元素要触发的函数（相当于mouseleave） （3）如果只写一个函数，则鼠标经过和离开都会触发它 //动画队列 animate(params,[speed],[easing],[fn])//自定义动画 注:params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略 stop()//停止动画或效果。 相当于停止结束上一次的动画。 //淡入淡出效果 fadeIn([speed,[easing],[fn]]) fadeOut([speed,[easing],[fn]]) fadeToggle([speed,[easing],[fn]]) 淡入淡出切换 fadeTo([[speed],opacity,[easing],[fn]])//渐进方式调整到指定的不透明度 opacity 透明度必须写，取值 0~1 之间。
注:
（1）带括号的参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
