jQuery常用API

文章目录

1. jQuery选择器1.1 jQuery基础选择器1.2 jQuery 层级选择器1.3 隐式迭代1.4 jQuery 筛选选择器1.5 jQuery 筛选方法 2. jQuery 样式操作2.1 操作 css 方法2.2 设置类样式方法2.3 类操作与 className 区别 3. jQuery 效果3.1. 显示隐藏效果3.2. 淡入淡出效果3.3 滑动效果3.4 自定义动画3.5 事件切换3.6 停止动画队列 4. jQuery 属性操作4.1 设置和获取元素固有属性4.2 设置和获取元素自定义属性值4.3 数据缓存 data() 5. jQuery 内容文本值5.1 普通元素内容 html()5.2 普通元素文本内容 text()5.3 文本框;表单;值 val() 6. jQuery 元素操作6.1 遍历元素6.2 创建元素6.3 添加元素6.4 删除元素 7. jQuery 尺寸和位置操作7.1 jQuery 尺寸7.2 jQuery 位置

1. jQuery选择器

1.1 jQuery基础选择器

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

1.2 jQuery 层级选择器

名称用法描述子代选择器$(“ul>li”)使用 > 符号;获取子一代层级元素后代选择器$(“ul li”)使用空格;后代选择器;获取 ul 下的所有 li 元素

1.3 隐式迭代

遍历内部 DOM 元素的过程将匹配到的所有元素进行循环遍历

1.4 jQuery 筛选选择器

语法用法描述:list$(“li:list”)获取第一个 li 元素:last$(“li:last”)获取最后一个 li 元素:eq(index)$(“li:eq(2)”)获取第二个 li 元素;索引号从0开始:odd$(“li:odd”)获取索引号为奇数的 li 元素:even$(“li:even”)获取索引号为偶数的 li 元素

1.5 jQuery 筛选方法

语法用法描述parent()$(“li”).parent()查找 li 父级元素children(selector)$(“ul”).children(“li”)相当于$(“ul>li”);查找 ul 子一代 li 元素find(selector)$(“ul”).find(“li”)相当于$(“ul li”);查找 ul 后代所有 li 元素siblings(selector)$(“.class”).siblings(“.class2”)查找兄弟节点;不包括自己nextAll([expr])$(“.class”).nextAll()查找当前元素之后的所有同级元素prevtAll([expr])$(“.class”).prevAll()查找当前元素之前的所有同级元素hasClass(class)$(“div”).hasClass(“.class”)检查当前元素是否含有 .class 类;如果有就返回 trueeq(index)$(“li”).eq(2)相当于$(“li:eq(2)”);索引从0开始

2. jQuery 样式操作

2.1 操作 css 方法

语法用法描述css(name)$(this).css(“color”);返回属性值css(name , value)$(this).css(“color”,“red”);设置或修改样式;数字可以不加引号和单位css(name : value , name : value )$(this).css(“color”:“red”,“font-size”:“20px”)参数以对象形式;设置多组样式

2.2 设置类样式方法

语法用法描述addClass()$(“div”).addClass(“class”)添加类removeClass()$(“div”).removeClass(“class”)移除类toggleClass()$(“div”).toggleClass(“class”)切换类

2.3 类操作与 className 区别

原生 js 中 className 会覆盖元素原来里面的类名jQuery 里面类操作对指定类进行操作;不影响原来的类名

3. jQuery 效果

参数可以省略

speed;速度;slow;normal;fast 或者毫秒值;easing;指定切换效果;swing;默认;;linear;opacity;透明度;0-1之间;fn;回调函数

3.1. 显示隐藏效果

语法用法描述show()$(“div”).show(speed,easing,fn);显示hide()$(“div”).hide(speed,easing,fn);隐藏toggle()$(“div”).toggle(speed,easing,fn);切换

3.2. 淡入淡出效果

语法用法描述fadeIn()$(“div”).fadeIn(speed,easing,fn);淡入fadeOut()$(“div”).fadeOut(speed,easing,fn);淡出fadeIToggle()$(“div”).fadeIToggle(speed,easing,fn);切换fadeTo$(“div”).fadeTo(speed,opacity,easing,fn);渐变切换

3.3 滑动效果

语法用法描述slideDown()$(“div”).slideDown(speed,easing,fn);下滑slideUp()$(“div”).slideUp(speed,easing,fn);上滑slideToggle()$(“div”).slideToggle(speed,easing,fn);切换

3.4 自定义动画

params;动画 css 属性;对象形式;必须写; 语法用法描述animate()$(“div”).slideDown(params,speed,easing,fn);自定义动画

3.5 事件切换

over;鼠标移动到元素上触发的函数;相当于 Mouse+nter;out;鼠标移出元素触发的函数;相当于 mouseleave; 语法用法描述hover(over,out)$(“div”).hover(fn1,fn2);鼠标事件切换

3.6 停止动画队列

语法用法描述stop()$(“div”).stop()防止动画效果多次触发;将 stop() 写到动画效果前面会停止上一次动画

4. jQuery 属性操作

4.1 设置和获取元素固有属性

语法用法描述prop(name)$(“a”).prop(“href”)获取属性prop(name,value)$(“input”).prop(“checked”,true)设置属性

4.2 设置和获取元素自定义属性值

语法用法描述attr(name)$(“img”).attr(“src”)获取属性attr(name,value)$(“img”).attr(“width”,“200”)设置属性

4.3 数据缓存 data()

语法用法描述data(name)$(“div”).attr(“data-temp”)获取属性data(name,value)$(“div”).attr(“data-temp”,1)设置属性

5. jQuery 内容文本值

5.1 普通元素内容 html()

语法用法描述html()$(“p”).html()获取元素的内容html(value)$(“p”).html(“hello”)设置元素的内容

5.2 普通元素文本内容 text()

语法用法描述text()$(“p”).text()获取元素的文本内容text(value)$(“p”).text(“hello”)设置元素的文本内容

5.3 文本框;表单;值 val()

语法用法描述val()$(“input”).val()获取元素的文本框值val(value)$(“input”).val(“hello”)设置元素的文本框值

6. jQuery 元素操作

6.1 遍历元素

index;每个元素的索引号domEle;每个 DOM 元素对象element;遍历的内容;值; 语法用法each()$(“div”).each(function (index,domEle){})$.each()$.each(object,function (index,element){})

6.2 创建元素

$(;<li>hello<li>;);

6.3 添加元素

内部添加;添加完是父子关系; 语法用法描述append(value)$(“p”).append(value);将内容添加到匹配元素;p;内部的最后面prepend(value)$(“p”).prepend(value);将内容添加到匹配元素;p;内部的最前面 外部添加;添加完是兄弟关系; 语法用法描述after(value)$(“p”).after(value);将内容添加到目标元素;p;的后面before(value)$(“p”).before(value);将内容添加到目标元素;p;的前面

6.4 删除元素

语法用法描述remove()$(“p”).remove()删除匹配的元素包括自己remove(“.class”)$(“p”).remove(“.class”)删除匹配元素中含有 class 类的元素empty()$(“p”).empty()删除匹配的元素集合中所有的子节点html(“”)$(“p”).html(“”)清空匹配的元素内容;将内容改为空;

7. jQuery 尺寸和位置操作

7.1 jQuery 尺寸

参数为空时;获取相应的值;返回的是数字类型;参数为数字时;修改相应的值参数不必写单位 语法用法描述width() / height()$(“p”).width() / $(“p”).height()取得匹配元素的宽度值 / 高度值;只算 width / heightinnerWidth() / innerHeight()$(“p”).innerWidth() / $(“p”).innerHeight()取得匹配元素的宽度值 / 高度值;包含 paddingouterWidth() / outerHeight()$(“p”).outerWidth() / $(“p”).outerHeight()取得匹配元素的宽度值 / 高度值;包含 padding;borderouterWidth(options) / outerHeight(options)$(“p”).outerWidth(true) / $(“p”).outerHeight(true)取得匹配元素的宽度值 / 高度值;包含 padding;border;margin;options为 true 时;计算边距在内

7.2 jQuery 位置

语法用法描述offset()$(“div”).offset()获取匹配元素相对于文档的偏移坐标offset(value)$(“div”).offset({top:10,left:10})设置匹配元素相对于文档的偏移坐标position()$(“div”).position()获取匹配元素相对于带有定位的父级元素的偏移坐标;不可以加参数scrollTop()$(“div”).scrollTop()获取匹配元素相对顶部的偏移;元素超出上边界的高度;scrollTop(value)$(“div”).scrollTop(200)设置匹配元素相对顶部的偏移;元素超出上边界的高度;scrollLeft()$(“div”).scrollLeft()获取匹配元素相对左侧的偏移;元素超出左边界的宽度;scrollLeft(value)$(“div”).scrollLeft(200)设置匹配元素相对左侧的偏移;元素超出左边界的宽度;