JQuery常用API(未完,持续更新)

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 方法来修改简单元素样式； 也可以操作类，修改多个样式。

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

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

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

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

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

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

2.设置类样式方法

1. 添加类

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

3. 移除类

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

4. 切换类

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

4.jQuery 属性操作

5.jQuery 文本属性值

6.jQuery 元素操作

7.jQuery 尺寸、位置操作