荐 jQuery文档阅读笔记自整理——1.6w字笔记
文章目录
- 一、jQuery 基本用法
- 1. 入口函数的写法
- 2. jQuery 的冲突问题
- 3. 核心函数
- 4. 对象
- 5.静态方法和实例方法
- 6. each 方法
- 7. map 方法
- 8. 其他静态方法
- 9.holdReady 方法
- 10.内容选择器
- 11. 属性节点
- 12.attr 方法
- 13.prop 方法
- 14. 操作类相关方法
- 15. 文本值相关方法
- 16. 操作 css 样式方法
- 17. 位置和尺寸操作的方法
- 18. 事件绑定
- 19.事件移除
- 20.事件冒泡默认行为
- 21.事件自动触发
- 22. 自定义事件
- 23.事件命名空间
- 24. 事件委托
- 25.移入移出事件
- 26.显示\隐藏\切换
- 27. 滑入、划出、划入划出切换
- 28.stop方法
- 30.自定义动画
- 31.delay 方法
- 32. 无限循环滚动
- 33.添加节点
- append( content | fn ) & appendTo(content)
- prepend( content | fn) & prependTo(content)
- after(content | fn)
- before(content | fn)
- insertAfter(content) & insertBefore(content)
- 34.删除节点
- 35.替换
- 36. 复制节点相关方法
- 二、 jQuery 进阶
一、jQuery 基本用法
1. 入口函数的写法
- 1:
$(document).ready(funciton () {
// body
})
- 2:
jQuery(docuement).ready(funciton () {
//body
})
- 3: 推荐
$(funciton () {
// body
})
- 4:
jQuery(funciton () {
// body
})
2. jQuery 的冲突问题
比如 jQuery 的
$
符号与其他框架冲突了,此时可以释放$
的使用权
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var c = jQuery.noConflict();
c(function () {
alert("hello lnj");
});
3. 核心函数
$()
:
- 可以接收一个函数
- 或者一个字符串、字符串选择器
- 或者一个字符串代码片段
- 或者一个 DOM 元素
- 返回的都是一个 对象
4. 对象
什么是 jQuery 对象,它是一个伪数组,具有 length
属性
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
$(function () {
var $div = $("div");
console.log($div);
var arr = [1, 3, 5];
console.log(arr);
});
</script>
</body>
5.静态方法和实例方法
定义一个类
- 直接添加给类的就是静态方法 -》 直接通过类名调用
- 实例方法就是通过类的实例调用 -》 创建一个实例(或者对象)
funciton AClass() {
}
AClass.staticMethod = funciton () {
alert("111");
}
//调用
AClass.staticMethod();
AClass.prototype.instanceMethod = funciton () {
alert("222");
}
var a = new AClass();
a.instanceMethod();
6. each 方法
原生的 forEach 方法:
第一个参数:遍历到的元素
第二个参数:当前遍历到的索引
注意:原生的 forEach
方法只能遍历数组 ,不能遍历伪数组
var arr = [1,2,3,4,5];
arr.forEach(funciton (value, index) {
console.log(index,value); // 分别打印出索引号 和 值
})
each 方法:
第一个参数: 索引号
第一个参数:遍历到的元素
注意:可以遍历伪数组
var arr = [1,2,3,4,5];
$.each(arr,funciton (index,value) {
console.log(inde,value);// 值与上面相同
})
7. map 方法
原生的 map 方法:
第一个参数: 当前遍历到的元素
第二个参数: 索引号
第三个参数:当前被遍历的数组
注意: 和原生的 forEach
一样,不能遍历伪数组
var arr = [1,2,4,5];
arr.map(funciton (value, index, array) {
console.log(value, index);
console.log(array);
})
jQuery 中的 map 方法:
第一个参数:要遍历的数组
第二个参数:每遍历一个元素之后执行的回调函数的参数
- 函数中的第一个参数: 元素
- 第二个:索引
- 注意:它也可以遍历 伪数组
var arr = [1, 3, 5, 7, 9];
var result = $.map(arr, function(value, index) {
return value + index;
})
each
和 map
的区别:
each 返回值就是:
- 遍历谁就返回谁
- each静态方法不支持在回调函数中对遍历的数组进行处理
map 返回值是:
- 遍历的数组形式返回
- map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
8. 其他静态方法
$.trim();
-
去除两端的空格
- 参数:需要出去空格的字符串
- 返回值:返回新字符串
-
注意: 只会除去两边的空格,中间空格不会
$.trim(" myname is ");//"myname is" 在控制台测试的
$.iswandow();
判断传入对象是否是 window 对象
$.isWindow(arr); // false
$.isWindow(window); // true
$.isArray()
判断是不是真数组, 返回布尔值
arr = [1,3,4,5];
$.isArray(arr); // true
…
9.holdReady 方法
作用: 暂停 ready 执行
// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
10.内容选择器
参数 | 作用 |
---|---|
:empty | 找到既没有文本也没有子元素的指定元素 |
:parent | 找到有文本内容或有子元素的指定元素 |
:contains(text) | 找到指定文本内容的指定元素 |
:has(selector) | 找到包含指定子元素的指定元素 |
11. 属性节点
什么是属性?
- 对象身上保存的变量就是属性
如何操作属性:
- 对象.属性名 = 值
- 对象.属性名
- 对象[“属性名”] = 值
- 对象[“属性名称”]
什么是属性节点?
- HTML 标签中添加的属性
如何操作属性节点?
- DOM.setAttribute(“属性名称”, “值”)
- DOM.setAttribute(“属性名称”)
属性和属性节点有什么区别?
- 任何对象都有属性,但是只有DOM对象才有属性节点
<body>
<span name="aa"></span>
<script>
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "bb");
console.log(span.getAttribute("name"));
</script>
</body>
12.attr 方法
attr ( name | pro | key, value | fun )
- 获取或者设置属性节点的值
- 如果只传递一个参数,代表获取属性节点的值
- 如果传递两个参数,代表设置属性节点的值
- 注意:
- 如果是获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
- 如果是设置:找到多少个元素就会设置多少个元素,如果设置的属性节点不存在,系统会自动新增。
<script>
$(function () {
/*
1.attr(): 设置或者获取元素的属性节点值
*/
// 传递一个参数, 返回第一个元素属性节点的值
// console.log($("span").attr("class"));
// 传递两个参数, 代表设置所有元素属性节点的值
// 并且返回值就是方法调用者
// console.log($("span").attr("class", "abc"));
// 传递一个对象, 代表批量设置所有元素属性节点的值
$("span").attr({
"class": "123",
"name": "888"
});
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="it222"></span>
</body>
removeAttr(name)
- 删除属性节点
- 删除多个节点用 空格 隔开
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<script>
$("span").attr("class", "1");
$("span").attr("abc", "123");
$("span").removeAttr("class name");
</script>
</body>
13.prop 方法
prop 特点与 attr 一致
removeProp 特点与 removeProp 一致
注意:prop 方法不仅可以操作属性,还可以操作属性节点
官方推荐操作属性节点时,操作的属性是 布尔值
的时候,如:checked
、selected
、disabled
… 使用 prop(),其它的使用 attr()
选中复选框为true,没选中为false:
<body>
<input type="checkbox">
<script>
console.log($("input").prop("checked")); // true / false
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr和prop 方法练习</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
// 1.给按钮添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
// 2.获取输入框输入的内容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
// 3.修改img的src属性节点的值
$("img").attr("src", text);
// $("images").prop("src", text);
}
});
</script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>
14. 操作类相关方法
addClass( class | fn)
- 添加一个类,如需添加多个用空格隔开
removeClass ([class | fn])
- 删除类,同添加
toggleClass(class | fn[,sw])
- 切换类,有就删除,没就添加
<script>
$(function () {
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
// $("div").addClass("class1");
$("div").addClass("class1 class2");
}
btns[1].onclick = function () {
// $("div").removeClass("class2");
$("div").removeClass("class2 class1");
}
btns[2].onclick = function () {
$("div").toggleClass("class2 class1");
}
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
15. 文本值相关方法
html([val | fn])
- 同原生的 innerHTML
text([val | fun])
- 同原生的 innerText
val([val | fn | arr])
- 设定 或 获取 文本框里的值
- 设置一个
select
和一个多选的select
的值
16. 操作 css 样式方法
$().css(“属性”,“改变后的属性参数”)
<body>
<div></div>
<script>
$("div").css("width","100px");
$("div").css({
height: "100px";
background: "red";
})
</script>
</body>
17. 位置和尺寸操作的方法
office ([foordinates])
-
获取匹配元素在当前可视窗口的相对偏移
-
返回的对象包含两个整型属性: top 和 left
<p>Hello</p> $("p").offset({ top:10, left: 30 });// 获取第二段偏移
position()
- 获取元素距离窗口的偏移位
- 获取元素距离定位元素的偏移位
- 注意:
- position 方法只能获取不能设置
scrollTop()
- 获取匹配元素相对滚动条顶部的偏移。
- 获取网页滚动的偏移位
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
</script>
18. 事件绑定
jQuery 中有两种绑定事件方式:
1.eventName( fn );
编码效率高,部分事件 jQuery 没有实现,所以不能添加
2.on(eventName,fn);
编码效率略低,所有js事件都可以添加
注意:
- 可以添加多个相同或者不同类型的时间,不会覆盖
<body>
<button>我是按钮</button>
<script>
$(function() {
$("button").on("click", function() {
alert("hello click1");
});
$("button").on("click", function() {
alert("hello click2");
});
});
</script>
</body>
19.事件移除
off方法
- 如果不传递参数,会移除所有的事件
- 如果只传递一个参数,会移除所有指定类型的事件
- 如果传递两个参数,会移除所有指定类型的指定事件
<body>
<button>我是按钮</button>
<script>
$(function() {
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
// 编写jQuery相关代码
$("button").click(test1);
$("button").click(test2);
// off方法如果不传递参数, 会移除所有的事件
$("button").off();
// off方法如果传递一个参数, 会移除所有指定类型的事件
// $("button").off("click");
// off方法如果传递两个参数, 会移除所有指定类型的指定事件
// $("button").off("click", test1);
});
</script>
</body>
20.事件冒泡默认行为
event.preventDefault( );
- 阻止默认事件行为的触发。
- 例如,在执行这个方法后,如果点击一个锚点,就不会让浏览器跳转到新的 URL 去了。我们可以用 event.preventDefault() 阻止页面自动跳转。
21.事件自动触发
trigger
- 如果利用 trigger 自动触发事件,会触发事件冒泡
- 会触发默认行为(默认跳转指定url)
triggerHandler
- 如果利用 triggerHandler 自动触发事件,不会触发事件冒泡
- 不会触发默认行为(不会跳转指定url)
22. 自定义事件
$(".son").myClick(function (event) {
alert("son");
});
$(".son").triggerHandler("myClick");
想要自定义事件,必须满足两个条件
- 事件必须是通过 on 绑定的
- 事件必须是通过 trigger 来触发
23.事件命名空间
$(function () {
/*
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件
*/
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
});
想要事件的命名空间有效,必须满足两个条件
- 事件必须是通过 on 绑定的
- 事件必须是通过 trigger 来触发
面试常问:利用 trigger 触发子元素带命名空间的事件,那么父元素带相同命名空间的事件也会被触发,而父元素没有命名空间的事件不会被触发,利用 trigger 触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
24. 事件委托
什么是事件委托?
- 请别人帮忙做事情,然后将结果反馈给我们
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
<script>
$(function() {
$("button").click(function() {
$("ul").append("<li>我是新增的li</li>");
})
/*
以下代码的含义, 让ul帮li监听click事件之所以能够监听, 是因为入口函数执行的时候ul就已经存 在了, 所以能够添加事件之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒 泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
*/
$("ul").delegate("li", "click", function() {
console.log($(this).html());
});
});
</script>
</body>
在 jQuery 中,如果通过核心函数找到的元素不止,那么在添加事件的时候, jQuery 会遍历所有找到的元素,给所有找到的元素添加事件
25.移入移出事件
mouseover/mouseout
<body>
<div class="father"></div>
<script>
$(function() {
$(".father").mouseover(function() {
console.log("father被移入");
});
$(".father").mouseout(function() {
console.log("father被移出");
})
})
</script>
</body>
26.显示\隐藏\切换
show( )
hide( )
toggle( )
- 第一个参数为动画持续时间
- 第二个参数传入一个回调函数 (可选)
27. 滑入、划出、划入划出切换
slideDown
slideUp
slideToggle
- 第一个参数为动画持续时间
- 第二个参数传入一个回调函数(可选)
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").slideDown(1000, function() {
alert("展开完毕");
});
});
$("button").eq(1).click(function() {
$("div").slideUp(1000, function() {
alert("收起完毕");
});
});
$("button").eq(2).click(function() {
$("div").slideToggle(1000, function() {
alert("收起完毕");
});
});
});
</script>
</body>
28.stop方法
stop ([clearQuerue],[jumpToEnd]) ;
- 停止所有在指定元素上正在执行的动画
- 如果第一个参数没有设置为
true
,他们将被马上执行 - 建议:
- 在每次做动画之前都用一次stop( )方法
$("button").click(function () {
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);
// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
});
29. 淡出、淡入、淡出淡入切换
fadeIn
fadeOut
fadeToggle
- 第一个参数为动画持续时间
- 第二个参数传入一个回调函数(可选)
30.自定义动画
animate(params,[speed],[easing],[fn])
- 第一个参数传入要做的动画,可以以对象形式传入多个
- 第二个参数为动画持续时间
- 第三个为动画效果:
linear
和swing
。先快后慢
及先慢后快
31.delay 方法
delay(duration,[queueName]);
- 设置秒数(单位毫秒)告诉系统延迟时长
- 动画队列
32. 无限循环滚动
setInterval (fn, time)
- 第一个参数是函数
- 第二个参数传入 循环时间
<body>
<div>
<ul>
<li><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
<li><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
</ul>
</div>
<script>
$(function() {
// 0.定义变量保存偏移位
var offset = 0;
// 1.让图片滚动起来
var timer;
function autoPlay() {
timer = setInterval(function() {
offset += -10;
if (offset <= -1200) {
offset = 0;
}
$("ul").css("marginLeft", offset);
}, 50);
}
autoPlay();
// 2.监听li的移入和移出事件
$("li").hover(function() {
// 停止滚动
clearInterval(timer);
// 给非当前选中添加蒙版
$(this).siblings().fadeTo(100, 0.5);
// 去除当前选中的蒙版
$(this).fadeTo(100, 1);
}, function() {
// 继续滚动
autoPlay();
// 去除所有的蒙版
$("li").fadeTo(100, 1);
});
});
</script>
</body>
33.添加节点
append( content | fn ) & appendTo(content)
-
向元素后面插入一个节点
-
<body> <button>调用append</button> <p>我是段落</p> <p>我是段落</p> <div class="item"> <li>1我是第1个li</li> <li>1我是第2个li</li> <li>1我是第3个li</li> </div> <div class="item"> <li>1我是第1个li</li> <li>1我是第2个li</li> <li>1我是第3个li</li> </div> <script> $(function () { /* DOM 操作: 6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后 */ var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { // 接收一个字符串 // $("p").appendTo(".item"); $(".item").append("p"); // $(".item").append("<span>我是span</span>"); // console.log($(".item").append("p")); // 接收一个jQuery对象 $($("div")); ==> jQuery // $("div").append($("p")); // 接收一个DOM元素 $(divs); ==> jQuery // var divs = document.querySelectorAll("div"); // var ps = document.querySelectorAll("p"); // $(divs).append(ps); } }); </script> </body>
-
-
元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
-
特点 :
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
-
prepend( content | fn) & prependTo(content)
-
向元素前面插入一个节点
-
<body> <button>调用prepend</button> <p>我是段落</p> <div class="item"> <li>1我是第1个li</li> <li>1我是第2个li</li> <li>1我是第3个li</li> </div> <script> $(function () { /* DOM 操作: 8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面 */ var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { // 接收一个字符串 // $("p").prependTo(".item"); // $(".item").prepend("p"); // $(".item").prepend("<span>我是span</span>"); console.log($(".item").prepend("p")); // 接收一个jQuery对象 $($("div")); ==> jQuery // $("div").prepend($("p")); // 接收一个DOM元素 $(divs); ==> jQuery // var divs = document.querySelectorAll("div"); // var ps = document.querySelectorAll("p"); // $(divs).prepend(ps); } }); </script> </body>
-
-
元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
-
<p>I would like to say: </p><div id="foo"></div> <script> $("p").prependTo("#foo");//结果:<div id="foo"><p>I would like to say: </p></div> </script>
-
after(content | fn)
- 将元素添加到指定元素外部的后面
before(content | fn)
- 将元素添加到指定元素外部的前面
insertAfter(content) & insertBefore(content)
-
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
-
<p>I would like to say: </p><div id="foo">Hello</div> <script> $("p").insertAfter("#foo");// 结果:<div id="foo">Hello</div><p>I would like to say: </p> </script>
-
-
元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
-
<div id="foo">Hello</div><p>I would like to say: </p> <script> $("p").insertBefore("#foo");// <p>I would like to say: </p><div id="foo">Hello</div> </script>
-
34.删除节点
$( ).remove([expr])
-
删除
-
<p>Hello</p> how are <p>you?</p> <script> $("p").remove(); </script> // 结果 how are (p标签包括内容被删除)
$( ).empty( )
-
匹配删除指定元素中所有的子节点
-
<p>Hello, <span>Person</span> <a href="#">and person</a></p> <script> $("p").empty(); </script> // p标签下的 所有子节点都被 删除
detach([expr])
- 删除指定元素的内容和子元素,指定元素本身不会被删除
- 案例同
remove()
- 区别:
- 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
35.替换
replaceWith(content | fn)
- 替换
replaveAll(selector)
- 替换所有匹配的元素为 指定的 元素
<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
<script>
$(function() {
$("button").click(function() {
// 1.新建一个元素
var $h6 = $("<h6>我是标题6</h6>");
// 2.替换元素
// $("h1").replaceWith($h6);
$h6.replaceAll("h1");
});
});
</script>
</body>
36. 复制节点相关方法
clone([Event[, deepEven]])
- 如果传入 false 就是浅复制,如果传入 true 就是深复制(拷贝)
- 浅复制 只会复制元素,不会复制元素的事件
- 深复制 都会
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<script>
$(function() {
$("button").eq(0).click(function() {
// 1.浅复制一个元素
var $li = $("li:first").clone(false);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).click(function() {
// 1.深复制一个元素
var $li = $("li:first").clone(true);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("li").click(function() {
alert($(this).html());
});
});
</script>
</body>
二、 jQuery 进阶
1. 基本结构
- jQuery 本质是一个闭包(立即执行函数)
- 目的是为了多个框架的冲突
- 通过 window.xxx = xxx 来让外界访问内部定义的局部变量
- 让局部变量 变成 全局变量
- 使用window参数的原因
- 为了方便后期压缩 code
- 为了提升查找的效率
- 为什么要给自己接受一个 undefined 参数?
- 为了方便后期压缩 代码
- 注意:
i9
以下浏览器 undefined 可以被修改,为了保证内部使用的 undefined 不被修改,所以需要接受一个正确的 undefined
(funciton test() {
console.log("text");
})();// 闭包;立即执行函数
2. apply 和 call 方法
apply(对象,[数组])
call(对象,参数1,参数2,······)
- 二者相同之处:
- 都专门用于修改方法内部的 this
- 第一个参数的作用是一样的
- 不同:
- call 可以传入多个参数
- apply 只可以传入两个参数,第二个参数往往以数组形式传入
var Pet = { // 示例1: call()
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // 结果:Speak...
var Dog = {
words:'Wang'
}
//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang
//例2 apply()
function Pet(words){
this.words = words;
this.speak = function () {
console.log( this.words)
}
}
function Dog(words){
//Pet.call(this, words); //结果: Wang
Pet.apply(this, arguments); //结果: Wang
}
var dog = new Dog('Wang');
dog.speak();
3. extend 方法
extend([deep],target,object1,[objectN])
- 用一个或者多个对象来扩展一个对象,返回被扩展的对象
- 可以理解为 扩展静态方法
- 多个对象用 ({})定义
$.extend({
max:function(a, b){return a>b ? a:b;}
});
alert($.max(1,2)); // 2 扩展方法
4.监听 DOM 加载
onload 事件
-
等到 DOM 元素加载完毕,并且还会等到资源也加载完毕才会执行
-
window.onload = function (ev) { // var res = document.querySelectorAll("div"); // console.log(res); console.log("onload"); }
DOMContentLoaded
-
事件只会等到 DOM 元素加载完毕就会执行回调
-
document.addEventListener("DOMContentLoaded", function () { // var res = document.querySelectorAll("div"); // console.log(res); console.log("DOMContentLoaded..."); });
document.readyState
-
该属性描述了 document 的加载状态
-
值:一个文档的
readyState
可以是以下之一-
loading 正在加载
-
uninitialized 还未开始加载
-
interactive 已加载,文档与用户可以交互
-
complete 载入完成
-
//语法 let string = document.readyState;
switch (document.readyState) { case "loading": // 表示文档还在加载中,即处于“正在加载”状态。 break; case "interactive": // 文档已经结束了“正在加载”状态,DOM元素可以被访问。 // 但是像图像,样式表和框架等资源依然还在加载。 var span = document.createElement("span"); span.textContent = "A <span> element."; document.body.appendChild(span); break; case "complete": // 页面所有内容都已被完全加载. let CSS_rule = document.styleSheets[0].cssRules[0].cssText; console.log(`The first CSS rule is: ${CSS_rule }`); break; }
当该属性值发生变化时,会在 document 对象上触发
readystatechange
事件。5.原型上的属性和方法
jQuery 原型上的核心方法和属性:
-
jquery 获取版本号
-
selector 实例默认的选择器取值
-
length 实例默认的长度
-
push 给实例添加新元素
-
sort 对实例中的元素进行排序
-
splice 按照指定下标指定数量删除元素,也可以替换删除的元素
-
-
-
toArray把实例转换为数组返回
- get 获取指定下标的元素,获取的是原生DOM
-
eq 获取指定下标的元素,获取的是jQuery类型的实例对象
-
first 获取实例中的第一个元素,是jQuery类型的实例对象
-
last 获取实例中的最后一个元素,是jQuery类型的实例对象
- each 遍历实例,把遍历到的数据传给回调使用
- map 遍历实例,把遍历到的数据传给回调使用,然后把回调的返回值收集起来组成一个新的数组返回
学习自 -> https://developer.mozilla.org/zh-CN/
还有 李南江 的 jQuery
从入门到知根知底学习视频
有的示例过长,可以到 MDN
上查。
二脸懵逼
转载附原文链接
本文地址:https://blog.csdn.net/weixin_46313446/article/details/107243244