文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
文档处理：
内部插入
append()
向每个匹配的元素内部追加内容
appendTo()
把所有匹配的元素追加到另一个指定的元素元素集合中
prepend()
向每个匹配的元素内部前置内容
prependTo()
把所有匹配的元素前置到另一个、指定的元素元素集合中
外部插入
after()
在每个匹配的元素之后插入内容
before()
在每个匹配的元素之前插入内容
insertAfter()
把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore()
把所有匹配的元素插入到另一个、指定的元素元素集合的前面
包裹
wrap()
把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap()
这个方法将移出元素的父元素
wrapAll()
将所有匹配的元素用单个元素包裹起来
wrapInner()
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
替换
replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll()
用匹配的元素替换掉所有 selector匹配到的元素
删除
empty()
删除匹配的元素集合中所有的子节点
remove()
从DOM中删除所有匹配的元素
detach()
从DOM中删除所有匹配的元素
克隆
clone()
克隆匹配的DOM元素并且选中这些克隆的副本
*/
// 1.向id为ul1的ul下添加一个span（最后）
// $('#ul1').append('<span>append添加的span</span>');
$('<span>appendTo添加的span</span>').appendTo($('#ul1'));
// 2.向id为ul1的ul下添加一个span（最前）
// $('#ul1').prepend('<span>prepend添加的span</span>');
$('<span>prependTo添加的span</span>').prependTo($('#ul1'));
// 3.在id为ul1的ul下的li（title为hello）的前面添加span
// $('#ul1').children('li[title=hello]').before('<span>before添加的span</span>');
$('<span>insertBefore添加的span</span>').insertBefore($('#ul1').children('li[title=hello]'));
// 4.在id为ul1的ul下的li（title为hello）的后面添加span
// $('#ul1').children('li[title=hello]').after('<span>after添加的span</span>');
$('<span>insertAfter添加的span</span>').insertAfter($('#ul1').children('li[title=hello]'));
// 5.将id为ul2的ul下的li（title为hello）全部替换为p
// $('#ul2').children('li[title=hello]').replaceWith('<p>replaceWith替换的p</p>');
$('<p>replaceWith替换的p</p>').replaceAll($('#ul2').children('li[title=hello]'));
// 6.移除id为ul2的ul下的所有li
$('#ul2').children('li').empty(); // ul2下li的内容被清空
// $('#ul2').empty(); // 所有子元素均被删除
// $('#ul2>*').remove(); // 所有子元素均被删除
// $('#ul2').children('li').remove();
$('#ul2').children('li').detach();
</script>
</head>
<body>
</body>
</html>
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
事件处理：
页面载入
ready()
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
事件处理
on()
在选择元素上绑定一个或多个事件的事件处理函数
off()
在选择元素上移除一个或多个事件的事件处理函数
bind()
为每个匹配元素的特定事件绑定事件处理函数
unbind()
bind()的反向操作，从每一个匹配的元素中删除绑定的事件
one()
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
trigger()
在每一个匹配的元素上触发某类事件
triggerHandler()
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
事件委派
delegate()
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
undelegate()
删除由 delegate() 方法添加的一个或多个事件处理程序
事件切换
hover()
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
toggle()
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
事件
focus()、focusin()
当元素获得焦点时，触发 focus、focusin 事件
blur()、focusout()
当元素失去焦点时，触发 blur、focusout 事件
change()
当元素的值发生改变时，会发生 change 事件
click()
触发每一个匹配元素的click事件
dblclick()
当双击元素时，会发生 dblclick 事件
error()
当元素遇到错误（没有正确载入）时，发生 error 事件
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup()
当在元素上放松鼠标按钮时，会发生 mouseup 事件
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件
mouseover()
当鼠标指针位于元素上方时，会发生 mouseover 事件
mouseout()
当鼠标指针从元素上移开时，发生 mouseout 事件
mousemove()
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
keypress()
当键盘或按钮被按下时，发生 keypress 事件
keydown()
当键盘或按钮被按下时，发生 keydown 事件
keyup()
当按钮被松开时，发生 keyup 事件
resize()
当调整浏览器窗口的大小时，发生 resize 事件
scroll()
当用户滚动指定的元素时，会发生 scroll 事件
select()
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
submit()
当提交表单时，会发生 submit 事件
unload()
在当用户离开页面时，会发生 unload 事件
*/
// 1.给.out绑定点击监听（用两种方法绑定）
// $('.outer').click(function () {
// alert('click outer');
// });
// $('.outer').on('click', function () {
// alert('click outer');
// });
$('.outer').bind('click', function () {
alert('click outer');
});
// 2.给.inner绑定鼠标移入和移出的事件监听
// $('.inner')
// .mouseenter(function () {
// alert('mouse enter');
// })
// .mouseleave(function () {
// alert('mouse leave');
// });
$('.inner').hover(
function () {
alert('mouse enter');
}, function () {
alert('mouse leave');
});
$('.outer')
.bind('mouseover', function () {
console.log('mouse over');
})
.bind('mouseout', function () {
console.log('mouse out');
});
// 3.点击btn1解除.inner上的所有事件监听
$('#btn1').on('click', function () {
// $('.inner').off();
$('.inner').unbind();
});
// 4.点击btn2解除.inner上的mouseenter事件
$('#btn2').on('click', function () {
// $('.inner').off('mouseenter');
$('.inner').unbind('mouseenter');
});
// 5.点击btn3得到事件坐标
$('#btn3').on('click', function (event) {
console.log('[' + event.offsetX + ', ' + event.offsetY + ']'); // [54, 8]
console.log('[' + event.pageX + ', ' + event.pageY + ']'); // [349, 259]
console.log('[' + event.clientX + ', ' + event.clientY + ']'); // [349, 59]
});
// 6.点击.inner区域，外部点击监听不响应
$('.inner').on('click', function (event) {
alert('click inner');
event.stopPropagation(); // 停止冒泡
});
// 7.点击链接，如果当前时间是偶数不跳转
$('#test4').on('click', function (event) {
if (Date.now() % 2 === 0) {
event.preventDefault(); // 阻止默认行为
}
})
</script>
</head>
<body>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
事件委托：
将多个子元素的事件监听委托给父辈元素处理，监听回调是加在了父辈元素上
当操作任何一个子元素时，事件会 冒泡 到父辈元素
父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素，通过这个子元素调用回调函数
事件委托的好处：
添加新的子元素，自动有事件响应处理
减少事件监听的数量：n==>1
事件委托API
delegate、undelegate
设置事件委托：$(parentSelector).delegate(childrenSelector, eventName, callback)
移除事件委托：$(parentSelector).undelegate(eventName)
*/
// 点击li背景就会变为红色
$('ul').delegate('li', 'click', function () {
this.style.backgroundColor = 'red';
});
// 点击btn1就添加一个li
$('#btn1').on('click', function () {
$('ul').append('<li>新增的li...</li>');
});
$('#btn2').on('click', function () {
$('ul').undelegate('click');
});
</script>
</head>
<body>
</body>
</html>
插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
插件：
jQuery.fn.extend()
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
jQuery.extend()
扩展jQuery对象本身
*/
/*
自定义插件
*/
// 1.给添加4个工具方法：
// *min(a,b)：返回较小的值
// *max(c,d)：返回较大的值
// *leftTrim()：去掉字符串左边的空格
// *rightTrim()：去掉字符串右边的空格
// 2.给jQuery对象添加3个功能方法：
// *checkAll()：全选
// *unCheckAll()：全不选
// *reverseCheck()：全反选
// 立即执行函数
(function () {
// 扩展$核心函数的方法
$.extend({
min: function (a, b) {
return a < b ? a : b;
},
max: function (c, d) {
return c > d ? c : d;
},
leftTrim: function (str) {
// var blankStr = str.match(/\s+/)[0];
// return str.substring(blankStr.length, str.length - 1);
return str.replace(/^\s+/, '');
},
rightTrim: function (str) {
// var blankArr = str.match(/\s+/g);
// let blankStr = blankArr[blankArr.length - 1];
// return str.substring(0, blankStr.length);
return str.replace(/\s+$/, '');
}
});
// 扩展jQuery对象的方法
$.fn.extend({
checkAll: function () {
this.prop('checked', true); // this是调用该方法的对象，所以这里是jQuery对象
},
unCheckAll: function () {
this.prop('checked', false);
},
reverseCheck: function () {
this.each(function () {
this.checked = !this.checked; // 这里的this是dom对象
})
}
})
})()
// 调用插件方法
// 扩展jQuery的工具方法
console.log($.min(2, 4), $.max(2, 4)); // 2 4
var str = ' ddd ';
console.log('---' + $.leftTrim(str) + '---'); // ---ddd ---
console.log('---' + $.rightTrim(str) + '---'); // --- ddd---
// 扩展jQuery对象的方法
let $items = $(':checkbox[name=items]');
$('#checkedAllBtn').click(function () {
$items.checkAll();
});
$('#checkedNoBtn').click(function () {
$items.unCheckAll();
});
$('#reverseCheckedBtn').click(function () {
$items.reverseCheck();
});
/*
JQuery插件：
validation
*/
// 声明式验证：程序员只需要声明各种验证规则，可以自定义验证错误信息
$('#myForm').validate({
messages: {
username: {
required: '用户名不能为空',
minlength: '用户名最少6位'
},
pwd1: {
required: '密码不能为空',
rangelength: '用户名6到8位'
},
pwd2: {
required: '确认密码不能为空',
equalTo: '确认密码不相同'
},
}
});
</script>
</head>
<body>
<form action="xxx" id="myForm">
<p>用户名（必须，最小6位）：<input id="uname" name="username" type="text" required minlength="6"></p>
<p>密码（必须，6到8位）：<input id="pwd1" name="pwd1" type="password" required rangelength="[6,8]"></p>
<p>确认密码（与密码相同）：<input id="pwd2" name="pwd2" type="password" required equalTo="#pwd1"></p>
<p><input type="submit" value="注册"></p>
</form>
</body>
</html>
