jQuery 知识点归纳

Ivy ·

更新时间:2024-11-10

· 859 次阅读

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

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”)

10、操作节点

10.1创建
$("

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、内容

内容

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

123

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

123

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

");
$(“ol”).append(li);
该方法之后，动态追加的li不具备click事件。

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

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

15.4 one() 只触发一次的事件
$(“p”).one(“click”,function(){ });

15.5 trigger() 自动触发
1）$(“div”).click(); //自动调用（加载时）
2）$(“div”).trigger(“click”);
3）$(“div”).triggerHandler(“click”); //不会触发默认行为，如获取焦点时的光标闪烁

15.5 event() 事件对象
function(event){}
用处：
1）阻止默认行为，event.preventDefault() 或 return false;
2）阻止冒泡：event.stopPropagation()

16、对象拷贝 $.extend()

语法：$.extend([deep],targer,object1,[object])
1）deep：true为深拷贝，默认为false,浅拷贝对复杂对象只拷贝地址，若对象被修改，会有影响 ※
2）target：目标
3）objedt1：待拷贝对象

17、jQuery多库共存

1）把统一改为jQueryeg:jQuery("div");2）统一改为jQuery eg:jQuery("div"); 2）统一改为jQueryeg:jQuery("div");2）.noConflict()
var xx = $.noConfict(); ⇒　xx(“div”);

18、jQuery插件

前提：先引入jQuery.js文件。
1）jQuery之家： http://www.htmleaf.com/ （推荐）
2）jQuery插件库：http://www.jq22.com/