首页 前端知识 1-jQuery 常用 API

1-jQuery 常用 API

2024-08-27 09:08:50 前端知识 前端哥 783 76 我要收藏

jQuery 常用 API

    • jQuery 选择器
      • jQuery 基础选择器
      • jQuery 层级选择器
      • jQuery 筛选选择器
        • jQuery 筛选方法
        • jQuery 的排他思想
    • jQuery 样式操作
      • 操作 css 方法
        • 返回属性值
        • 设置一组样式
        • 设置多组样式
      • 设置类样式方法
        • 添加类
        • 移除类
        • 切换类
    • jQuery 效果
      • 显示隐藏效果
        • 显示
        • 隐藏
        • 切换
      • 滑动效果
        • 下滑
        • 上滑
        • 滑动切换
      • 事件切换
      • 动画队列及其停止排队方法
        • 动画或效果队列
        • 停止排队
      • 淡入淡出效果
        • 淡入效果
        • 淡出效果
        • 淡入淡出切换
        • 渐进方式调整到指定的不透明度
      • 自定义动画 animate
    • jQuery 属性操作
      • 元素固有属性
        • 获取属性
        • 设置属性
      • 元素自定义属性
        • 获取属性语法
        • 设置属性
      • 数据缓存
        • 获取数据
        • 附加数据
    • jQuery 文本属性值
      • 普通元素内容
        • 获取元素的内容
        • 设置元素的内容
      • 普通元素文本内容
        • 获取元素的文本内容
        • 设置元素的文本内容
      • 表单的值
        • 获取表单的值
        • 设置表单的值
    • jQuery 元素操作
      • 遍历元素
      • 创建元素
      • 添加元素
        • 内部添加
          • element 的内部元素的后面
          • element 的内部元素的前面
        • 外部添加
          • 把内容放入目标元素后面
          • 把内容放入目标元素前面
      • 删除元素
        • 删除元素本身
        • 删除匹配的元素集合中所有的子节点
        • 清空匹配的元素内容
    • jQuery 尺寸、位置操作
      • jQuery 尺寸
      • jQuery 位置

jQuery 选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可,但是要加引号    

jQuery 基础选择器

名称用法描述
ID 选择器$("#id")获取指定 id 的元素
全选选择器$("*")匹配所有元素
类选择器$(".class")匹配 class 类的元素
标签选择器$("div")获取同一标签的元素
并集选择器$("div,p,li")选取多个条件的元素
交集选择器$("li.current")交集元素

jQuery 层级选择器

名称用法描述
子代选择器$("ul>li")获取子代元素
后代选择器$("ul li")获取后代元素

jQuery 筛选选择器

index 索引号从 0 开始

语法用法描述
:first$("li:first")获取第一个 li 元素
:last$("li:last")获取最后一个 li 元素
:eq(index)$("li:eq(2)")获取索引号第二个的 li 元素
:odd$("li:odd")索引号为奇数的 li 元素
:even$("li:even")索引号为偶数的 li 元素
:checked$(".j-checkbox:checker")复选框选中的项
jQuery 筛选方法
语法用法说明
parent()$("li").parent()查找父级
parents(selector)$("li").parents(selector)查找先祖
children(selector)$("ul").children("li")相当于$(“ul>li”),最近一级(亲儿子)
find(selector)$("ul").find("li")相当于$(“ul li”),后代选择器
siblings(selector)$(".first").siblings("li")查找兄弟节点,不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素
prevtAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$('div').hasClass("protected")检查当前的元素是否含有某个特定的类,如果有,则返回true
eq(index)$("li").eq(2)相当于$(“li∶eq(2)”,index从0开始
jQuery 的排他思想
$(function () {
	$("button").click(function () {
		// 隐式迭代
		/* $(this).css({"background", "pink"})
		$(this).siblings("button").css({"background", ""}) */
		
		// 链式编程
		$(this).css({"background", "pink"})
			.siblings("button").css({"background", ""})
	})
})

jQuery 样式操作

操作 css 方法

返回属性值

参数只写属性名

$(this).css("color")
设置一组样式

参数是属性名,属性值,逗号分隔;属性必须加引号,值如果是数字可以不用跟单位和引号

$(this).css("color", "red");
设置多组样式

参数可以是对象形式,属性名和属性值用冒号隔开,属性可以不用加引号

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

设置类样式方法

添加类
$("div").addClass("current");
移除类
$("div").removeClass("current");
切换类

有就加删除,没有就添加

$("div").toggleClass("current");

jQuery 效果

显示隐藏效果

  1. speed:三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如:1000)。
  2. easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  3. fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
显示
show([speed,[easing],[fn]]);
隐藏
hide([speed,[easing],[fn]])
切换
toggle([speed,[easing],[fn]])

滑动效果

  1. speed: 三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如:1000)。
  2. easing: (Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  3. fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
下滑
slideDown([speed,[easing],[fn]])
上滑
slideUp([speed,[easing],[fn]])
滑动切换
slideToggle([speed,[easing],[fn]])

事件切换

hover([over,]out)
  1. over: 鼠标移到元素上要触发的函数(相当于 mouseenter)
  2. out:鼠标移出元素要触发的函数(相当于mouseleave)
  3. 如果只写一个函数,则鼠标经过和离开都会触发它

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

停止排队
stop()
$(".nav>li").hover(function () {
	// stop 方法必须写到动画的前面
	$(this).children("ul").stop().slideToggle();
});

淡入淡出效果

  1. speed: 三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如:1000)。
  2. easing: (Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  3. fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
淡入效果
fadeIn([speed,[easing],[fn]])
淡出效果
fadeOut([speed,[easing],[fn]])
淡入淡出切换
fadeToggle([speed,[easing],[fn]])
渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])

opacity 透明度必须写,取值 0~1 之间。

自定义动画 animate

animate(params,[speed],[easing],[fn])
  1. params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
  2. speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
  3. easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
  4. fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

jQuery 属性操作

元素固有属性

所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type。

获取属性
prop("属性")
设置属性
prop("属性", "属性值")

元素自定义属性

用户自己给元素添加的属性,我们称为自定义属性。比如给 div 添加 index =“1”。

也可以获取 H5 自定义属性。

获取属性语法
attr("属性")      // 类似原生 getAttribute()
设置属性
attr("属性", "属性值") // 类似原生 setAttribute()

数据缓存

data () 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。

可以读取 HTML5 自定义属性 data-index ,得到的是数字型

获取数据
data("name","value")   // 向被选元素附加数据
附加数据
date("name")             //   向被选元素获取数据 

全选

  1. .checkall 全选类
  2. .j-checkbox 复选框类
$(".checkall").change(function() {
	// console.log($(this).prop("checked"));
	$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
	if ($(this).prop("checked")) {
		// 让所有的商品添加 check-cart-item 类名
		$(".cart-item").addClass("check-cart-item");
	} else {
		// check-cart-item 移除
		$(".cart-item").removeClass("check-cart-item");
	}
});
// TODO 如果小复选框全被选中 就应该把全选按钮选上,否则全选按钮不选。
$(".j-checkbox").change(function() {
	if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
		$(".checkall").prop("checked", true);
	} else {
		$(".checkall").prop("checked", false);
	}
});

jQuery 文本属性值

普通元素内容

相当于原生 inner HTML

获取元素的内容
html()
设置元素的内容
html("内容")

普通元素文本内容

相当与原生 innerText)

获取元素的文本内容
text()
设置元素的文本内容
text("文本内容")

表单的值

相当于原生 value

获取表单的值
val()
设置表单的值
val("内容")

jQuery 元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。

$("div").each(function (index, domEle) { xxx; })
  1. each() 方法遍历匹配的每一个元素。主要用 DOM 处理。 each 每一个
  2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
  3. 所以要想使用 jquery 方法,需要给这个 dom 元素转换为 jquery 对象 $(domEle)
$.each(object,function (index, element) { xxx; })
  1. $.each() 方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
  2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容

创建元素

$("<li></li>");

添加元素

内部添加
element 的内部元素的后面
element.append("内容")
element 的内部元素的前面
element.prepend("内容")
外部添加
把内容放入目标元素后面
element.after("内容")
把内容放入目标元素前面
element.before("内容") 

删除元素

删除元素本身
element.remove()
删除匹配的元素集合中所有的子节点
element.empty()
清空匹配的元素内容
element.html("")

jQuery 尺寸、位置操作

jQuery 尺寸

参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。
参数可以不必写单位。

语法用法
width()/height()取得匹配元素宽度和高度值只算 width/height
innerWidth()/innerHieght()取得匹配元素宽度和高度值包含 padding
outerWidth()/outerHeight()取得匹配元素宽度和高度值包含 padding、border
outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值包含 padding、borde、margin

jQuery 位置

offset() 设置或获取元素偏移

  1. offset () 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
  2. 该方法有 2 个属性 left、top 。offset ().top 用于获取距离文档顶部的距离,offset ().left 用于获取距离文档左侧的距离。
  3. 可以设置元素的偏移:offset ({ top: 10, left: 30 });

position() 获取元素偏移

  1. position () 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
  2. 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
  3. 该方法只能获取

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

  1. scrollTop () 方法设置或返回被选元素被卷去的头部
  2. 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

返回头部

不能是文档 (document) 而是 html 和 body 元素做动画

var boxTop = $(".container").offset().top;
$(window).scroll(function() {
	console.log($(document).scrollTop());
	if ($(document).scrollTop() >= boxTop) {
		$(".back").fadeIn();
	} else {
		$(".back").fadeOut();
	}
});
// 返回顶部
$(".back").click(function() {
	// $(document).scrollTop(0);
	$("body, html").stop().animate({
		scrollTop: 0
	});
})
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16982.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!