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'');
  1. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
  1. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号,
 $(this).css({ "color":"white","font-size":"20px"});
2.设置类样式方法
  1. 添加类
$(“div”).addClass(''current'');
  1. 移除类
$(“div”).removeClass(''current'');
  1. 切换类
$(“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 尺寸、位置操作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱编程的大李子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值