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: 回调函数,在动画完成时执行的函数,每个元素执行一次