jQuery 知识点归纳

最新推荐文章于 2023-04-15 10:01:17 发布

chengyu0726

最新推荐文章于 2023-04-15 10:01:17 发布

阅读量553

点赞数 2

分类专栏： JS系列

本文链接：https://blog.csdn.net/chengyu0726/article/details/106032759

版权

JS系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简介的JavaScript库，宗旨是“write less,do more”。
官网：https://jquery.com
版本：
1x：兼容IE6、7、8，不再更新
2x：不兼容IE6、7、8，不再更新
3x：不兼容IE6、7、8，当前官网主要更新版本

1、入口函数

$(function(){ }); // $(document).ready(function(){ });
= js:DOMContentLoaded //不必等待外部文件加载（js,css,图片…）

2、jQuery和DOM对象转换

2.1DOM转jQuery
<video src=‘xxx.mp4’ >
1）$(‘video’)
2）var myVideo = document.querySelector(‘video’);
$(myVideo);

2.2 jQuery转DOM
1）$(‘div’)[index]
2）$(‘div’).get(index)

3、选择器

ID选择器：$("#id")
类选择器：$(".class")
标签选择器：$(“div”)
全选：$("*")
并集选择器：$(“div,ul,li”)
交集选择器：$(“li.current”)
子代选择器：$(“ul>li”)
后代选择器：$(“ul li”)

4、隐式迭代 ※

遍历内部DOM元素的过程，也称内部遍历。伪数组形式存储。
eg:$(“ul li”).css(“color”,“red”);

5、筛选选择器

$(“li:first”); //获取第一个li
$(“li:last”); //获取最后一个li
$(“li:eq(2)”); //获取到的li元素中，索引号为2的元素，index从0开始
$(“li:odd”); //索引号为奇数
$(“li:even”); //索引号为偶数

6、筛选方法 ※

$(“li”).parent(); //找父级
$(“ul”).children(“li”); //亲儿子 ul>li
$(“ul”).find(“li”); // 所有孩子，包括儿子和孙子，后代选择器
$(".first").sibling(“li”); //兄弟元素
$(".first").nextAll(); //兄弟元素
$(".last").preAll(); //兄弟元素
$(“div”).hasClass(“pretected”); //当前元素是否含有某个特定的类，有则为true
$(“li”).eq(2); //等价于 $(“li:eq(2)”);

7、排他思想

自己变，兄弟不变。
eg$(“button”).click(function(){
$(this).css(“background”,“pink”);
$(this).siblings(“button”).css(“background”,"");
}):
⇒$(this).css(“color”,“red”).siblings().css(“color”,""); //链式编程

8、操作CSS

8.1获取
$(“this”).css(“color”);

8.2设置

$(“this”).css(“color”，“red”);
$(“this”).css({“color”,“red”,“font-size”:“20px”});
$(“div”).addClass(“current”); //.current{} ,不覆盖，只追加
$(“div”).removeClass(“current”);
$(“div”).toggleClass(“current”); //切换类

9、操作属性

9.1元素固有属性 prop()
eg:
$(“a”).prop(“href”); //获取
$(“a”).prop(“属性”，“属性值”); //设置

9.2元素自定义属性 attr()
eg:
$(“div”).attr(“index”,4);

9.3元素自定义属性 data()
指定元素上存取数据，不修改DOM结构，页面刷新之后，数据被移除。
eg:
$(“span”).data("“uname”,“andy”);
<div data-index=“1”> ⇒ $(“div”).data(“index”)

10、操作节点

10.1创建
$("<li></li>")

10.2添加
1）内部添加
①element.append(“内容”); //放在最后，类似于appendChild
②element.prepend(“内容”); //放在最前

2）外部添加
①element.after(“内容”); //目标元素后面
②element.before(“内容”); //目标元素前面

10.3删除
1）element.remove(); //删除匹配的元素（本身）
2）element.empty(); //删除匹配的元素的子节点
3）element.html(); //删除匹配的元素的子节点

10.4遍历
语法1：
$(“div”).each(function(index,domEle){ xxx })
语法2：
$.each(object,function(index,domEle){ xxx }) //处理数据 ※

11、内容

<div> <span>内容</span></div>
11.1 html()
等同于innerHTML
$(“div”).html(); //获取内容 ⇒ <span>内容</span>
$(“div”).html(“123”); //设置内容 ⇒ <div>123</div>

11.2 text()
等同于innerText
$(“div”).text(); //获取文本 ⇒ 内容
$(“div”).text(“123”); //设置文本 ⇒ <div>123</div>

11.3 val()
等同于value
$(“input”).val(); //获取标签value
$(“input”).val(“123”); //设置标签value

12、效果

12.1显示隐藏
show()、hide()、toggle()

12.2滑动
slideDown()、slideUp()、slideToggle()

12.3淡入淡出
fadeIn()、fadeOut()、fadeToggle()、fadeTo()

12.4自定义动画
animate()

13、尺寸

width()、height() //只算width、height
innerWidth()、innerHeight(); //含padding
outerWidth()、outerHeight(); //含padding+border
outerWidth(true)、outerHeight(true); //含padding+border+margin

14、位置

14.1 offset
相对于文档的便宜坐标，与父级无关。
$(".son").offset().top
$(".son").offset().left

14.2 positon
相对于带有定位的父级偏移坐标，若无父级元素，则以文档为准。

14.3scrollTop()、scrollLeft()
被卷去的头部和左侧。

15、事件

15.1单事件注册
语法：element.事件(function(){ });
事件：mouseover、mouseout、blur、focus、change、keydown、keyup、reszie、scroll

15.2 on一个或多个时间绑定
1）on({ })
$(“div”).on({
omuseenter:function(){ },
click:function(){ }
});
※不同事件，相同函数，简写：$(“div”).on(“mouseenter mouseleave”,function(){ })

2）时间委托
原本在子元素身上的时间，添加到父级元素身上。
$(“ul”).on(“click”,“li”,function(){ }) //老方法：bind、live、delegate…

3）on可以给未来动态创建的元素绑定事件
传统做法：$(“ol li”).click(function(){ });
var li = $("<li>新li</li>");
$(“ol”).append(li);
该方法之后，动态追加的li不具备click事件。

$(“ol”).on(“click”,“li”,function(){ }); //on没有上诉问题 ※

15.3 off解绑事件
1） $(" d i v ") . o f f (); / / 解绑所有事件 2 ）$ (“div”).off(“click”); // 解绑指定事件
3）$(“div”).off(“click”,“li”);; // 解绑事件委托