2. 查找
| 方法 | 功能 |
| children() | 查找子标签 |
| find() | 查找后代标签 |
| parent() | 父标签 |
| prevAll() | 查找所有的兄弟标签 |
| nextAll() | 查找后面所有的兄弟标签 |
| siblings() | 查找前后所有的兄弟标签 |
//1.从子标签中找 children() console.log($("li").children("p").text()) //2.find() 后代标签中找 console.log($("li").find("b").text()) //3.父标签 parent() console.log($("p").parent().text()) //4.prevAll() 前面所有的兄弟标签 console.log($("b").prevAll().text()) //5.nextAll() 侯建所有的兄弟标签 console.log($("p").nextAll().text()) //6.silings() 前后所有的兄弟标签 console.log($("p").siblings().text())
七、文档处理
1.增
1.1内部插入
从前面：
//1.1将指定内容添加到指定元素前面 prepend() prependTo() $(".myli").prepend("<p>你好</p>") //仅仅是把当前整个标签元素追加到目的文本前面（不改变结构） $(".AI").prependTo(".myli")
从后面：
//1.2将指定内容添加到指定元素后面 append() appendTo() $(".AI").append("<p>你好</p>") //把当前整个标签元素追加到目的文本后面 $(".AI").appendTo(".myli")
1.2 外部插入
//before() 在匹配元素之前插入内容 $(".AI").before("嘿嘿"); //after() 在匹配元素之后插入内容 $(".AI").after("<h1>hehe</h1>");
2. 删
//empty() 删除匹配的元素集合中的所有子节点(不包括匹配的元素) $("h1").empty() //remove() 这个包括匹配的元素 $("p").remove();
3. 改
//replaceWith 将所有匹配的元素替换成指定的内容 $(".AI").replaceWith("<p>哎呦~</p>");
八、事件
1.加载Dom两种方式
js方式：
当网页中所有的内容加载完成后才会执行 ，只能编写一个
window.onload = function(){
alert(“123”)
}
JQuery方式：
JQuery1.0版本和2.0版本 : JQuery比window.onload先执行
Jquery3.0 : window.onload比JQuery先执行
window.onload = function() {
alert(“123”)
}
$(function() {
alert(“456”);
})
注意：
window.addEventListener 此事件可以调用多次
window.addEventListener(“load”,function(){
alert(“123”);
})
2. 绑定事件的两种方式
//jQUery的事件绑定与解绑 on off bind unbind 元素.on(事件名，function(){}) $("#dian").on("click", function() { $("#mydiv").css("background", "skyblue"); }) 元素.事件名(function(){}) $("#dian").click(function(){ $("#mydiv").css("background", "blue"); })
3. 合成事件/事件切换
//hover() 鼠标悬停合成事件 $("#dian").hover(function(){ $("div").hide(2000); },function(){ $("div").show(2000); }) //toggle鼠标点击合成事件 $("#dian").toggle(function(){ $("div").hide(2000); },function(){ $("div").show(2000); })
4. 事件传播
$("body").click(function(){ alert("123") }); $("#dian").click(function(){ alert("456"); //阻止了其他事件 return false ; });
5. 事件坐标
offsetX:当前元素左上角 clientX：窗口左上角 pageX：网页左上角
$("body").click(function() { console.log(event.pageX, event.offsetX, event.clientX); });
6. 移出事件
//元素.unbind("事件名") var foo = function() { alert("123"); } $("#dian").bind("click",foo); $("#dian").unbind("click",foo); // one()只执行一次 $("#dian").one("click",function(){ alert("456") })
九、动画效果
1.基本功能
//显示 show(time) 隐藏hide(time) 切换toggle(time) $("mydiv").show(3000) $("#mydiv").hide(3000); $("#mydiv").toggle(3000)
2.滑动动画
从下往上收缩
$(“#”).slideUp(2000);
从上往下收缩
$(“#”).slideDown(2000)
切换这两种效果
$(“#”).toggle(2000)
3.透明度动画
渐显
$(“#”).fadeIn(3000);
渐隐藏
$(“#”).fadeOut(3000);
切换这两种效果
$(“#”).fadeToggle(3000);
4.自定义动画
animate({“属性”:“属性值”},时间)
window.setInterval(function() { $("#mydiv").animate({ "width": "400px" }, 1000); }, 10)
十、扩展 - 表单插件
.Validate插件下载地址 jQuery Validate Plugin
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>课堂案例</title> <script src="../JQuery_01/js/jquery-3.6.4.min.js"></script> <!-- 导入表单插件 --> <script src="js/jquery.validate.min.js"></script> <script> $(function() { //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url) //找到表单标签 调用表单插件中的validate方法设置规则 $("#myForm").validate({ //规则 rules: { username: { //必须输入字段 required: true, minlength: 1, maxlength: 6 }, password: { required: true, minlength: 6, maxlength: 18 }, passwordTwo: { required: true, //输入值必须与#field相同 equalTo: "#password" }, age: { required: true, //必须输入整数 digits: true, //输入值必须介于1-120之间 range: [1, 120] }, email: { required: true, email: true }, Internet: { required: true, url: true } }, //信息提示 messages: { username: { required: "必填项,请输入", minlength: "昵称不能为空", maxlength: "昵称不能超过六位" }, password: { required: "必填项,请输入", minlength: "请输入长度为6-18的密码", maxlength: "密码超过了18位，请重试" }, passwordTwo: { required: "必填项,请输入", //输入值必须与#field相同 equalTo: "输入值必须与第一次密码相同" }, age: { required: "必填项,请输入", //必须输入整数 digits: "必须输入整数", //输入值必须介于1-120之间 range: "输入值必须介于1-120之间" }, email: { required: "必填项,请输入", email: "请输入正确格式的电子邮件" }, Internet: { required: "必填项,请输入", url: "请输入正确格式的网址" } } }) }) </script> </head> <body> <form id="myForm" action="#" method="get"> 账户: <input type="text" name="username" id="username"> <br> 密码: <input type="text" name="password" id="password"> <br> 确认密码: <input type="text" name="passwordTwo" id="passwordTwo"> <br> 年龄: <input type="text" name="age" id="age"> <br> 邮箱: <input type="text" name="email" id="email"> <br> 网址url: <input type="text" name="Internet" id="Internet"> <input type="submit"> </form> </body> </html>
