jQuery学习笔记-基础知识
- 01 初识jQuery
- 02 jQuery和JavaScript的固定写法
- 03 jQuery和JavaScript加载模式
- 04 jQuery 入口函数其它写法
- 05 jQuery 冲突问题
- 06 jQuery核心函数
- 07 jQuery对象
- 08 静态方法和实例方法
- 09 静态方法 each 方法
- 10 静态方法 map 方法
- 11 jQuery中的其它静态方法
- 12 静态方法holdReady方法
- 13 通过webstorm简化操作
- 14 jQuery内容选择器
- 15 属性和属性节点
- 16 jQuery的attr方法
- 17 jQuery的prop方法
- 18 attr和prop方法练习
- 19 jQuery操作类相关的方法
- 20 jQuery文本值相关的方法
- 21 jQuery操作CSS样式的方法
- 22 jQuery位置和尺寸操作的方法
- 23 jQuery的scrollTop方法
- 24 jQuery事件绑定
- 25 jQuery事件移除（事件解除）
- 26 jQuery事件冒泡和默认行为
- 27 jQuery事件自动触发
- 28 jQuery自定义事件
- 29 jQuery事件命名空间
- 30 jQuery事件命名空间面试题
- 31 jQuery事件委托（委派）
- 事件委托
- 删除事件委托
- 32 jQuery事件委托练习
- 33 jQuery移入移出事件
- 34 jQuery电影排行榜上
- 35 jQuery电影排行榜下
- 36 TAB选项卡上
- 37 TAB选项卡下
- 38 TAB选项卡终极
- 39 jQuery显示和隐藏动画
- 显示动画
- 隐藏动画
- 切换动画
- 40 对联广告
- 41 jQuery展开和收起动画
- 42 折叠菜单上
- 43 折叠菜单下
- 44 下拉菜单
- 45 jQuery淡入淡出动画
- 46 弹窗广告
- 47 jQuery自定义动画
- 48 jQuery的stop和delay方法
- stop
- delay
- 49 图标特效
- 50 无限循环滚动
- 51 jQuery添加节点相关方法
- 52 jQuery删除节点相关方法
- 53 jQuery替换节点相关方法
- 54 jQuery复制节点相关方法
- 55 新浪微博
- 56 狂拍灰太狼游戏
- 57 QQ音乐播放器
jQuery是JavaScript的一个库，能够简化JavaScript的操作，极大地提高了我们的开发效率。
01 初识jQuery
jQuery和JavaScript的对比
window.onload = function (ev) {
// 1.利用原生的JS查找DOM元素
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2");
// 1.2 利用原生的JS修改背景颜色
// div1.style.backgroundColor = "red";
// div2.style.backgroundColor = "blue";
// div3.style.backgroundColor = "yellow";
}
$(function () {
//2.利用jQuery查找DOM元素
var $div1 = $("div");
var $div2 = $(".box1");
var $div3 = $("#box2");
// 2.2 利用修改背景颜色
$div1.css({
background: "red",
width: "200px",
height: "200px"
});
$div2.css({
background: "blue"
});
$div3.css({
background: "yellow"
});
});由此不难看出不论是获取DOM元素，还是对DOM元素的CSS样式设置，jQuery都比JavaScript的代码量少了许多，理解也相对容易，这是是jQuery的一些优势，简化代码量。
02 jQuery和JavaScript的固定写法
// 1.原生JS的固定写法
window.onload = function (ev) { }
// 2.jQuery的固定写法
$(document).ready(function () {
alert("hello lnj");
});03 jQuery和JavaScript加载模式
原生JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
- jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
window.onload = function (ev) {
// 1.通过原生的JS入口函数可以拿到DOM元素
var images = document.getElementsByTagName("images")[0];
console.log(images);
// 2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(images).width;
console.log("JavaScript 获取的宽度：", width);
}
/*
* 1.原生JS和jQuery入口函数的加载模式不同
* 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
* jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
*/
$(document).ready(function () {
// 1.通过jQuery入口函数可以拿到DOM元素
var $images = $("images");
console.log($images);
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
var $width = $images.width();
console.log("jQuery 获取的宽度：", $width);
});原生JS和jQuery入口函数的加载模式不同
- 原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
- jQuery中编写多个入口函数,后面的不会覆盖前面的
/*
1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
2.jQuery中编写多个入口函数,后面的不会覆盖前面的
*/
// window.onload = function (ev) {
// alert("hello lnj1");
// }
// window.onload = function (ev) {
// alert("hello lnj2");
// }
$(document).ready(function () {
alert("hello lnj1");
});
$(document).ready(function () {
alert("hello lnj2");
});04 jQuery 入口函数其它写法
// 1.第一种写法
$(document).ready(function () {
// alert("hello lnj");
});
// 2.第二种写法
jQuery(document).ready(function () {
// alert("hello lnj");
});
// 3.第三种写法(推荐)
$(function () {
// alert("hello lnj");
});
// 4.第四种写法
jQuery(function () {
alert("hello lnj");
});05 jQuery 冲突问题
$ 符号是 jQuery 的专用符号，如果编程过程中遇到需要用到 $ 符号的时候，可释放对 $ 符号的使用权，并自定义一个访问符号替代 $
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});06 jQuery核心函数
// $();//jQuery原理();就代表调用jQuery的核心函数1.接收一个函数
$(function () {
});2.接收一个字符串
2.1接收一个字符串选择器
- 返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);2.2接收一个字符串代码片段
- 返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
console.log($p);
$box1.append($p);3接收一个DOM元素
- 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);07 jQuery对象
1.什么是jQuery对象
- jQuery对象是一个伪数组
var $div = $("div");
console.log($div);2.什么是伪数组?
- 有0到length-1的属性, 并且有length属性
var arr = [1, 3, 5];
console.log(arr);08 静态方法和实例方法
静态方法
// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () {
alert("staticMethod");
}
// 静态方法通过类名调用
AClass.staticMethod();实例方法
// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod();09 静态方法 each 方法
原生的forEach方法只能遍历数组, 不能遍历伪数组
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};//伪数组
/*
第一个参数: 遍历到的元素（value）
第二个参数: 当前遍历到的索引（index）
*/
arr.forEach(function (value, index) {
console.log(index, value);
});
obj.forEach(function (value, index) {
console.log(index, value);
});利用jQuery的each静态方法遍历数组
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};//伪数组
/*
第一个参数: 当前遍历到的索引（index）
第二个参数: 遍历到的元素（value）
*/
$.each(arr, function (index, value) {
console.log(index, value);
});
$.each(obj, function (index, value) {
console.log(index, value);
});10 静态方法 map 方法
利用原生JS的map方法遍历
var arr = [1, 3, 5, 7, 9];
/*
第一个参数: 当前遍历到的元素（value）
第二个参数: 当前遍历到的索引（index）
第三个参数: 当前被遍历的数组（array）
注意点:
和原生的forEach一样,不能遍历的伪数组
*/
arr.map(function (value, index, array) {
console.log(index, value, array);
});注意点:
- 和原生的forEach一样,不能遍历的伪数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};//伪数组
obj.map(function (value, index, array) {
console.log(index, value, array);
});利用 jQuery 的 map 方法遍历
var arr = [1, 3, 5, 7, 9];
/*
第一个参数: 要遍历的数组（obj）
第二个参数: 每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数: 遍历到的元素（value）
第二个参数: 遍历到的索引（index）
注意点:
和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
*/
$.map(arr, function (value, index) {
console.log(index, value);
});注意点：
和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};//伪数组
var res = $.map(obj, function (value, index) {
console.log(index, value);
return value + index;
});
var res2 = $.each(obj, function (index, value) {
console.log(index, value);
return value + index;
});
console.log(res);
console.log(res2);jQuery中的each静态方法和map静态方法的区别：
- each静态方法默认的返回值是,：遍历谁就返回谁
- map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
11 jQuery中的其它静态方法
去除空格$.trim(); 作用： 去除字符串两端的空格
参数：需要去除空格的字符串
返回值：去除空格之后的字符串
var str = " lnj ";
var res = $.trim(str);
console.log("---"+str+"---");
console.log("---"+res+"---");判断是否为window对象$.isWindow(); 作用：判断传入的对象是否是window对象
返回值：true/false
var w = window;// window对象
var res = $.isWindow(w);
console.log(res);判断是否为真数组$.isArray(); 作用：判断传入的对象是否是真数组
返回值：true/false
var arr = [1, 3, 5, 7, 9];// 真数组
var res = $.isArray(arr );
console.log(res);判断是否为函数$.isFunction(); 作用: 判断传入的对象是否是一个函数
返回值：true/false
注意点：jQuery框架本质上是一个函数
(function( window, undefined ) {
})( window );var fn = function(){};// 函数
var res = $.isFunction(jQuery);
console.log(res);判断是否为空对象$..isEmptyObject(); 作用：判断传入的对象是否为空对象
返回值：true/false
var res = $.isEmptyObject();
console.log(res);判断是否为纯粹对象$..isPlainObject(); 作用：判断传入的对象是否为纯粹对象
纯粹对象： 通过 “{}” 或者 “new Object” 创建的
返回值：true/false
var res = $.isPlainObject({});
var res1 = $.isPlainObject("test");
console.log(res);
console.log(res1);判断是否为数字$..isNumeric(); 作用：判断传入的对象是否为数字
返回值：true/false
var res = $.isNumeric("10");
var res1 = $.isNumeric("aaa");
console.log(res);
console.log(res1);12 静态方法holdReady方法
$.holdReady() 作用：暂停ready执行 $.holdReady(true)暂停执行 $.holdReady(false)恢复执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-静态方法holdReady方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$.holdReady(true);//暂停ready执行
$(document).ready(function () {
alert("ready");
});
</script>
</head>
<body>
<button>回复ready事件</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
$.holdReady(false);//恢复ready执行
}
</script>
</body>
</html>13 通过webstorm简化操作
理解性知识，需要请看bilibili视频 通过webstorm简化操作
14 jQuery内容选择器
:empty 作用：找到既没有文本内容也没有子元素的指定元素
var $div = $("div:empty");
console.log($div);:parent 作用：找到有文本内容或有子元素的指定元素
var $div = $("div:parent");
console.log($div);:contains(text) 作用：找到包含指定文本内容的指定元素
var $div = $("div:contains('我是div')");
console.log($div);:has(selector) 作用：找到包含指定子元素的指定元素
var $div = $("div:has('span')");
console.log($div);15 属性和属性节点
1.什么是属性?
- 对象身上保存的变量就是属性
2.如何操作属性?
- 对象.属性名称 = 值;
- 对象.属性名称;
- 对象[“属性名称”] = 值;
- 对象[“属性名称”];
3.什么是属性节点?<span name = "it666"></span>
- 在编写HTML代码时,在HTML标签中添加的属性就是属性节点
- 在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
- 在attributes属性中保存的所有内容都是属性节点
4.如何操作属性节点?
- 设置：DOM元素.setAttribute(“属性名称”, “值”);
- 获取：DOM元素.getAttribute(“属性名称”);
5.属性和属性节点有什么区别?
- 任何对象都有属性, 但是只有DOM对象才有属性节点
属性
function Person() {
}
var p = new Person();
// p.name = "lnj";
p["name"] = "zs";
// console.log(p.name);
console.log(p["name"]);属性节点
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "lnj");//设置属性节点
console.log(span.getAttribute("name"));//获取属性节点16 jQuery的attr方法
attr(name|pro|key,val|fn) 作用：获取或者设置属性节点的值
- 可以传递一个参数, 也可以传递两个参数
- 如果传递一个参数, 代表获取属性节点的值
- 如果传递两个参数, 代表设置属性节点的值
注意点：
- 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
- 如果是设置:找到多少个元素就会设置多少个元素
- 如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
removeAttr(name name name) 作用：删除一个或多个属性节点（用空格隔开）
注意点:
- 会删除所有找到元素指定的属性节点
// console.log($("span").attr("class"));
$("span").attr("class", "box");
// $("span").attr("abc", "123");
// $("span").removeAttr("class name");17 jQuery的prop方法
prop方法 作用：获取或者设置属性节点的值（特点和attr方法一致）
- 可以传递一个参数, 也可以传递两个参数
- 如果传递一个参数, 代表获取属性节点的值
- 如果传递两个参数, 代表设置属性节点的值
removeProp方法 特点和removeAttr方法一致
注意点：
- prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐 在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
console.log($("input").prop("checked")); // true / false
console.log($("input").attr("checked")); // checked / undefined18 attr和prop方法练习
理解性知识，需要请看bilibili视频 attr和prop方法练习
19 jQuery操作类相关的方法
addClass(class|fn) 作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
removeClass([class|fn]) 作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
toggleClass(class|fn[,sw]) 作用: 切换类
有就删除, 没有就添加
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");
}20 jQuery文本值相关的方法
html([val|fn]) 作用：用于设定HTML内容
有内容：设置内容
无内容：获取内容text([val|fn]) 作用：用于设置元素内的文本
有内容：设置内容
无内容：获取内容val([val|fn|arr]) 作用：用于设置输入框的值
有内容：设置内容
无内容：获取内容
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
$("div").html("<p>我是段落<span>我是span</span></p>");
}
btns[1].onclick = function () {
console.log($("div").html());
}
btns[2].onclick = function () {
$("div").text("<p>我是段落<span>我是span</span></p>");
}
btns[3].onclick = function () {
console.log($("div").text());
}
btns[4].onclick = function () {
$("input").val("请输入内容");
}
btns[5].onclick = function () {
console.log($("input").val());;
}21 jQuery操作CSS样式的方法
jQuery操作CSS样式有三种方法设置
- 逐个设置
- 链式设置
- 批量设置（推荐）
// 1.逐个设置
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");
// 2.链式设置
// 注意点: 链式操作如果大于3步, 建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "blue");
// 3.批量设置
$("div").css({
width: "100px",
height: "100px",
background: "red"
});
// 4.获取CSS样式值
console.log($("div").css("background"));22 jQuery位置和尺寸操作的方法
offset([coordinates]) 作用: 获取元素距离窗口的偏移位
$(".son").offset().leftposition() 作用: 获取元素距离定位元素的偏移位
$(".son").position().left注意点: position方法只能获取不能设置
$(".son").position({
left: 10
});$(".son").css({
left: "10px"
});23 jQuery的scrollTop方法
获取滚动的偏移位
console.log($(".scroll").scrollTop());获取网页滚动的偏移位
注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop());设置滚动的偏移位
$(".scroll").scrollTop(300);设置网页滚动偏移位
注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
$("html,body").scrollTop(300);24 jQuery事件绑定
jQuery中有两种绑定事件方式eventName(fn); 编码效率略高/ 部分事件jQuery没有实现,所以不能添加
$("button").click(function () {
alert("hello lnj");
});
$("button").click(function () {
alert("hello 123");
});
$("button").mouseleave(function () {
alert("hello mouseleave");
});
$("button").mouseenter(function () {
alert("hello mouseenter");
});on(eventName, fn); 编码效率略低/ 所有js事件都可以添加
$("button").on("click", function () {
alert("hello click1");
});
$("button").on("click", function () {
alert("hello click2");
});
$("button").on("mouseleave", function () {
alert("hello mouseleave");
});
$("button").on("mouseenter", function () {
alert("hello mouseenter");
});注意点: 可以添加多个相同或者不同类型的事件,不会覆盖
25 jQuery事件移除（事件解除）
定义事件
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
// 编写jQuery相关代码
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function () {
alert("hello mouseleave");
});
$("button").mouseenter(function () {
alert("hello mouseenter");
});.off() 如果不传递参数, 会移除所有的事件
$("button").off();.off() 如果传递一个参数, 会移除所有指定类型的事件
$("button").off("click");.off() 如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);26 jQuery事件冒泡和默认行为
什么是事件冒泡?
- 父
div中包含一个子div，给父、子div都设置一个点击事件，当点击子div时触发子div的点击事件，同时也会触发父div的点击事件。
$(".son").click(function (event) {
alert("son");
});
$(".father").click(function () {
alert("father");
});如何阻止事件冒泡?
- 用
return false - 用回调函数
event.stopPropagation();
$(".son").click(function (event) {
alert("son");
// return false;
event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});什么是默认行为?
- 例如点击事件；移入、移出事件；悬浮事件等，有事件默认的行为，下文的点击事件，点击后弹出提示框，这就叫“默认行为”
如何阻止默认行为?
- 用
return false - 用回调函数
event.preventDefault();
$("a").click(function (event) {
alert("弹出注册框");
// return false;
event.preventDefault();
});27 jQuery事件自动触发
trigger()自动触发事件triggerHandler()自动触发事件
$(".son").click(function (event) {
alert("son");
});
$(".father").click(function () {
alert("father");
});
$(".father").trigger("click");
$(".father").triggerHandler("click");自动触发事件的事件冒泡trigger()如果利用trigger自动触发事件,会触发事件冒泡triggerHandler()如果利用triggerHandler自动触发事件, 不会触发事件冒泡
$(".son").trigger("click");//会触发事件冒泡
$(".son").triggerHandler("click");//不会触发事件冒泡自动触发事件的默认行为trigger()如果利用trigger自动触发事件,会触发默认行为triggerHandler()如果利用triggerHandler自动触发事件, 不会触发默认行为
$("input[type='submit']").click(function () {
alert("submit");
});
$("input[type='submit']").trigger("click");//会触发默认行为
$("input[type='submit']").triggerHandler("click");//不会触发默认行为$("span").click(function () {
alert("a");
});
$("a").triggerHandler("click");//不会触发默认行为
$("span").trigger("click");//会触发默认行为28 jQuery自定义事件
想要自定义事件, 必须满足两个条件
- 事件必须是通过on绑定的
- 事件必须通过trigger来触发
$(".son").on("myClick", function () {
alert("son");
});
$(".son").trigger("myClick");myClick本身不是任何事件，但通过triggerHandler（）就成了自动触发的点击事件
29 jQuery事件命名空间
在多人协同编码时，为避免事件编写的重复，利用事件命名空间来区分谁写的事件，即使事件重复，也不影响使用。
想要事件的命名空间有效,必须满足两个条件
- 事件是通过on来绑定的
- 通过trigger触发事件
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");30 jQuery事件命名空间面试题
注意：
- 利用
trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发 - 利用
trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
$(".father").on("click.ls", function () {
alert("father click1");
});
$(".father").on("click", function () {
alert("father click2");
});
$(".son").on("click.ls", function () {
alert("son click1");
});
$(".son").trigger("click.ls");//父元素带相同命名空间的事件也会被触发
$(".son").trigger("click");//子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发31 jQuery事件委托（委派）
事件委托
delegate(selector,[type],[data],fn)
参数含义：selector,[type],fn
-
selector选择器字符串，用于过滤器触发事件的元素。 -
type附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 -
fn当事件发生时运行的函数
selector,[type],[data],fn
-
selector选择器字符串，用于过滤器触发事件的元素。 -
type附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 -
data传递到函数的额外数据 -
fn当事件发生时运行的函数
原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。
什么是事件委托?
- 请别人帮忙做事情, 然后将做完的结果反馈给我们
在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
$("ul>li").click(function () {
console.log($(this).html());
});以下代码的含义
- 让ul帮li监听click事件
- 之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
- 之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
$("button").click(function () {
$("ul").append("<li>我是新增的li</li>");
})
$("ul").delegate("li", "click", function () {
console.log($(this).html());
});删除事件委托
delegate(selector,[type],[data],fn)参数含义：selector,[type],fn
-
selector需要删除事件处理程序的选择器。 -
type需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。
selector,[type],fn
-
selector需要删除事件处理程序的选择器。 -
type需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。 -
fn要删除的具体事件处理函数。
selector,events
-
selector需要删除事件处理程序的选择器。 -
events一个或多个事件类型的字符串和函数的数据映射来执行他们。
namespace
-
namespace一个字符串，其中包含一个命名空间取消绑定的所有事件。
$("p").undelegate();
$("p").undelegate( "click" )从form元素删除由 delegate() 方法添加的".whatever"命名空间：
var foo = function () {
};
//用delegate() 方法给click事件增加".whatever"命名空间
$("form").delegate(":button", "click.whatever", foo);
$("form").delegate("input[type='text']", "keypress.whatever", foo);
// 用undelegate()方法删除delegate()方法增加的".whatever"命名空间
$("form").undelegate(".whatever");32 jQuery事件委托练习
理解性知识，需要请看bilibili视频 jQuery事件委托练习
33 jQuery移入移出事件
mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件
$(".father").mouseover(function () {
console.log("father被移入了");
});
$(".father").mouseout(function () {
console.log("father被移出了");
});mouseenter/mouseleave事件，子元素被移入移出不会触发父元素的事件
$(".father").mouseenter(function () {
console.log("father被移入了");
});
$(".father").mouseleave(function () {
console.log("father被移出了");
});hover事件，同mouseenter/mouseleave事件，子元素被移入移出不会触发父元素的事件
$(".father").hover(function () {
console.log("father被移入了");
},function () {
console.log("father被移出了");
});或者
$(".father").hover(function () {
console.log("father被移入移出了");
});34 jQuery电影排行榜上
基于
- 33 jQuery 移入移出事件的练习
理解性知识，需要请看bilibili视频 jQuery电影排行榜上
35 jQuery电影排行榜下
基于
- 33 jQuery 移入移出事件的练习
理解性知识，需要请看bilibili视频 jQuery电影排行榜下
36 TAB选项卡上
基于
- 33 jQuery 移入移出事件的练习
理解性知识，需要请看bilibili视频 TAB选项卡上
37 TAB选项卡下
基于
- 33 jQuery 移入移出事件的练习
理解性知识，需要请看bilibili视频 TAB选项卡下
38 TAB选项卡终极
基于
- 33 jQuery 移入移出事件的练习
理解性知识，需要请看bilibili视频 TAB选项卡终极
注意知识点：.siblings()取得同级非当前元素
思想： 排他思想
HTML 代码
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>jQuery 代码
$("div").siblings()运行结果
[ <p>Hello</p>, <p>And Again</p> ]39 jQuery显示和隐藏动画
显示动画
show([speed,[easing],[fn]])显示隐藏的匹配元素。
参数含义：speed[,fn]
speed[,fn]-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(0).click(function () {
// $("div").css("display", "block");
// 注意: 这里的时间是毫秒
$("div").show(1000, function () {
// 作用: 动画执行完毕之后调用
alert("显示动画执行完毕");
});
});隐藏动画
hide([speed,[easing],[fn]])隐藏显示的元素
参数含义：
speed[,fn]-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(1).click(function () {
// $("div").css("display", "none");
$("div").hide(1000, function () {
alert("隐藏动画执行完毕");
});
});切换动画
1.9版本 .toggle()方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
toggle([speed],[easing],[fn])如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参数含义：fn,fn2,[fn3,fn4,...]
-
fn第一数次点击时要执行的函数。 -
fn2第二数次点击时要执行的函数。 -
fn3,fn4,...更多次点击时要执行的函数。
[speed] [,fn]
-
speed隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。” -
fn在动画完成时执行的函数，每个元素执行一次。
[speed], [easing ], [fn ]
-
speed隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。” -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
switch
- 用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
alert("切换动画执行完毕");
});
});40 对联广告
基于
- 22 jQuery位置和尺寸操作的方法
- 23jQuery的scrollTop方法
理解性知识，需要请看bilibili视频 对联广告
知识点： 监听网页滚动
$(window).scroll(function () {
});41 jQuery展开和收起动画
slideDown([speed],[easing],[fn])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
参数含义：speed,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(0).click(function () {
$("div").slideDown(1000, function () {
alert("展开完毕");
});
});slideUp([speed,[easing],[fn]])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
参数含义：speed,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(0).click(function () {
$("div").slideUp(1000, function () {
alert("收起完毕");
});
});slideToggle([speed,[easing],[fn]])通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
参数含义：speed,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(0).click(function () {
$("div").slideToggle(1000, function () {
alert("切换完毕");
});
});42 折叠菜单上
基于
- 19 jQuery操作类相关的方法
- 41 jQuery展开和收起动画
理解性知识，需要请看bilibili视频 jQuery折叠菜单上
43 折叠菜单下
基于
- 19 jQuery操作类相关的方法
- 41 jQuery展开和收起动画
理解性知识，需要请看bilibili视频 jQuery折叠菜单下
注意知识点：.siblings()取得同级非当前元素
思想： 排他思想
HTML 代码
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>jQuery 代码
$("div").siblings()运行结果
[ <p>Hello</p>, <p>And Again</p> ]44 下拉菜单
基于
- 19 jQuery操作类相关的方法
- 24 jQuery事件绑定
知识点：stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。
参数含义：[clearQueue],[gotoEnd]
-
clearQueue如果设置成true，则清空队列。可以立即结束动画。 -
gotoEnd让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd]
-
queue用来停止动画的队列名称 -
clearQueue如果设置成true，则清空队列。可以立即结束动画。 -
jumpToEnd如果设置成true，则完成队列。可以立即完成动画。
在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画
// 1.监听一级菜单的移入事件
$(".nav>li").mouseenter(function () {
// 1.1拿到二级菜单
var $sub = $(this).children(".sub");
// 停止当前正在运行的动画：
$sub.stop();
// 1.2让二级菜单展开
$sub.slideDown(1000);
});
// 2.监听一级菜单的移出事件
$(".nav>li").mouseleave(function () {
// 2.1拿到二级菜单
var $sub = $(this).children(".sub");
// 停止当前正在运行的动画：
$sub.stop();
// 2.2让二级菜单收起
$sub.slideUp(1000);
});45 jQuery淡入淡出动画
淡入动画fadeIn([speed],[easing],[fn])
- 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
- 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数含义：speed,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(0).click(function () {
$("div").fadeIn(1000, function () {
alert("淡入完毕");
});
});淡出动画fadeOut([speed],[easing],[fn])
- 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
- 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数含义：speed,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(1).click(function () {
$("div").fadeOut(1000, function () {
alert("淡出完毕");
});
});淡入/淡出 切换动画yfadeToggle([speed],[easing],[fn])
- 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
- 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数含义：speed,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(2).click(function () {
$("div").yfadeToggle(1000, function () {
alert("切换完毕");
});
});淡入/淡出 调整到指定透明度fadeTo([speed],[easing],[fn])
- 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
- 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数含义：speed,opacity,[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
opacity一个0至1之间表示透明度的数字。 -
fn在动画完成时执行的函数，每个元素执行一次。
[speed],opacity,[easing],[fn]
-
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
opacity一个0至1之间表示透明度的数字。 -
easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" -
fn在动画完成时执行的函数，每个元素执行一次。
$("button").eq(3).click(function () {
$("div").fadeTo(1000, function () {
alert("调整完毕");
});
});46 弹窗广告
基于
- 16 jQuery的attr方法
- 41 jQuery展开和收起动画
- 45 jQuery淡入淡出动画
知识点：stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。
参数含义：[clearQueue],[gotoEnd]
-
clearQueue如果设置成true，则清空队列。可以立即结束动画。 -
gotoEnd让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd]
-
queue用来停止动画的队列名称 -
clearQueue如果设置成true，则清空队列。可以立即结束动画。 -
jumpToEnd如果设置成true，则完成队列。可以立即完成动画。
在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画
// 1.监听span的点击事件
$("span").click(function () {
$(".ad").remove();
});
// 2.执行广告动画
/*
$(".ad").slideDown(1000, function () {
$(".ad").fadeOut(1000, function () {
$(".ad").fadeIn(1000);
});
});
*/
$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);47 jQuery自定义动画
知识点：animate(params,[speed],[easing],[fn])用于创建自定义动画的函数
参数含义：params,[speed],[easing],[fn]
-
params一组包含作为动画属性和终值的样式属性和及其值的集合 -
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) -
easing要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”. -
fn在动画完成时执行的函数，每个元素执行一次。
params,options
-
params一组包含作为动画属性和终值的样式属性和及其值的集合 -
options动画的额外选项。如：speed - 设置动画的速度,easing - 规定要使用的 easing 函数,callback - 规定动画完成之后要执行的函数,step - 规定动画的每一步完成之后要执行的函数,queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始,specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
$("button").eq(0).click(function () {
/*
$(".one").animate({
width: 500
}, 1000, function () {
alert("自定义动画执行完毕");
});
*/
$(".one").animate({
marginLeft: 500
}, 5000, function () {
// alert("自定义动画执行完毕");
});
/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
marginLeft: 500
}, 5000, "linear", function () {
// alert("自定义动画执行完毕");
});
})
$("button").eq(1).click(function () {
$(".one").animate({
width: "+=100"
}, 1000, function () {
alert("自定义动画执行完毕");
});
});
$("button").eq(2).click(function () {
$(".one").animate({
// width: "hide"
width: "toggle"
}, 1000, function () {
alert("自定义动画执行完毕");
});
})48 jQuery的stop和delay方法
stop
stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。
参数含义：[clearQueue],[gotoEnd]
-
clearQueue如果设置成true，则清空队列。可以立即结束动画。 -
gotoEnd让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd]
-
queue用来停止动画的队列名称 -
clearQueue如果设置成true，则清空队列。可以立即结束动画。 -
jumpToEnd如果设置成true，则完成队列。可以立即完成动画。
$("button").eq(1).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);
});delay
delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。
参数含义：duration,[queueName]
-
duration延时时间，单位：毫秒 -
queueName队列名词，默认是Fx，动画队列。
delay方法的作用就是用于告诉系统延迟时长
$("button").eq(0).click(function () {
$(".one").animate({
width: 500
// height: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
});49 图标特效
基于
- 24 jQuery事件绑定
- 47 jQuery自定义动画
理解性知识，需要请看bilibili视频 图标特效
50 无限循环滚动
基于
- 22 jQuery位置和尺寸操作的方法
- 33 jQuery移入移出事件
- 45 jQuery淡入淡出动画
理解性知识，需要请看bilibili视频
注意知识点：.siblings()取得同级非当前元素
思想： 排他思想
HTML 代码
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>jQuery 代码
$("div").siblings()运行结果
[ <p>Hello</p>, <p>And Again</p> ]51 jQuery添加节点相关方法
内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后
$("button").click(function () {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").append($li);
// $li.appendTo("ul");
});prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面
$("button").click(function () {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").prepend($li);
// $li.prependTo("ul");
});外部插入
after(content|fn)
insertAfter(content)
会将元素添加到指定元素外部的后面
$("button").click(function () {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").after($li);
// $li.insertAfter("ul");
});before(content|fn)
insertBefore(content)
会将元素添加到指定元素外部的前面
$("button").click(function () {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").before($li);
// $li.insertBefore("ul");
});52 jQuery删除节点相关方法
empty()
- 删除匹配的元素集合中所有的子节点。
remove([expr])
- 从DOM中删除所有匹配的元素。
- 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])
- 从DOM中删除所有匹配的元素。
- 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("button").click(function () {
// $("div").remove();
// $("div").empty();
// $("li").remove(".item");
// 利用remove删除之后再重新添加,原有的事件无法响应
// var $div = $("div").remove();
// 利用detach删除之后再重新添加,原有事件可以响应
var $div = $("div").detach();
// console.log($div);
$("body").append($div);
});
$("div").click(function () {
alert("div被点击了");
});53 jQuery替换节点相关方法
replaceWith(content|fn)
- 将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)
- 用匹配的元素替换掉所有 selector匹配到的元素。
/*
替换
replaceWith(content|fn)
replaceAll(selector)
替换所有匹配的元素为指定的元素
*/
$("button").click(function () {
// 1.新建一个元素
var $h6 = $("<h6>我是标题6</h6>");
// 2.替换元素
// $("h1").replaceWith($h6);
$h6.replaceAll("h1");
});54 jQuery复制节点相关方法
clone([Even,[deepEven]])
- 克隆匹配的DOM元素并且选中这些克隆的副本。
- 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
参数含义：Events
-
Events一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
Events,[deepEvents]
-
Events一个布尔值（true 或者 false）指示事件处理函数是否会被复制。 -
deepEvents一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
如果传入false就是浅复制, 如果传入true就是深复制
浅复制： 只会复制元素, 不会复制元素的事件
深复制： 会复制元素, 而且还会复制元素的事件
$("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());
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
