jQuery
-
jQuery：javascript库
版本： jquery-3.6.0.min.js：压缩版/发布版 88kb jquery-3.6.0.js：常规版/开发版 282kb -
初始化函数
$代表的就是jQuery，即：$ = JQuery ，他们之间可以互换 $(document).ready(function(){})：初始化函数。当网页中dom元素（不包含图片、视频、资源）全部加载完毕后，立即执行。 简化写法：$(function{});。 onload：vascript中的初始化函数。当网页中的dom元素（关联图片、视频、资源）全部加载关闭之后，立刻执行。他们之间的区别：
用法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jquery --> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <!-- 使用jquery --> <script type="text/javascript"> //初始化函数 $(document).ready(function(){ //加载函数 //alert("hello jquery"); }); //简化写法 $等价于jQuery，他们之间可以互换 $(function(){ //alert("hello j22"); }); jQuery(function(){ //alert("jqqqq"); }); //javascript中的加载函数 function init(){ alert("init..."); } </script> </head> <body onload="init()"> </body> </html> -
Dom模型与JQuery对象
将html、xml等文档结构中的标签语言看成dom模型
-
Dom节点有三种类型
元素节点：<html> <ul> ..... <p> 属性节点：title、src、alt...... 文本节点：标签之间的文本 -
Dom对象：以上三种节点类型的具体对象，就是Dom对象。
使用层面：凡是JavaScript能够直接操作的对象，就是Dom对象
例如： var title = document.getElementById("myTitle"); 通过js获取到的title对象就是一个dom对象（就是<p>对象） -
jQuery对象：凡是jQuery能够直接操作的对象，就是jQuery对象
例如： var $title = $("#myTitle"); 通过jQuery获取到的$title就是一个jQuery对象 -
Dom对象与jQuery对象的区别
同样一个元素，既可以成为一个dom对象（javascript对象），也可以成为一个jQuery对象。 注意： - dom对象：只适用于js的各种语法(其提供的属性、函数) - jQuery对象：也只适用于jQuery的各种语法(属性、函数)。 - dom对象和jquery对象各自独立。 例如： title是dom对象，因此可以使用js属性或方法：title.innerHTML $title是jquery对象，因此可以使用jquery属性或方法：$title.html() 建议： js对象：直接写title jquery对象：加上$，例如：$title -
dom对象和jquery对象的转换：
title.innerHTML：title————> $title $title.html()：$title————> title dom对象————> jquery对象： jQuery工厂：$(dom对象)：alert($(title).html()+"dom——》jquery"); jquery对象————> dom对象 注意：jquery对象默认是一个数组或集合；dom对象默认是一个单独的对象 数组：jquery对象[0] 集合：jquery对象.get(0) 转换： alert($title[0].innerHTML+"-jquery——dom111"); alert($title.get(0).innerHTML+"-jquery——dom222");
-
-
jQuery选择器：jQuery的根基
-
基本选择器
-
标签选择器
$("标签名") $("p").html() ：获取p标签对象，是jquery对象形式的 $("p").length -
类选择器
$(".class值") $(".myStyle").html() -
id选择器
$("#id值") $("#myTitle3").html() -
并集(或者)选择器 逗号，
$("#id值,.class值") $("#myTitle,.myStyle") -
交集选择器，连续接在一起写
$(".class值#id值") $("p.myStyle").html() ：选中class值为myStyle的p标签 -
全局选择器：选中全部的元素
$("*")
-
-
层次选择器（只取后面的元素）
相邻选择器 + $("选择器1+选择器2") $("#b+li").html() 同辈选择器 ~ $("选择器1~选择器2") 后代选择器 空格 $("选择器1 选择器2") 子代选择器 > $("选择器1 > 选择器2") -
属性选择器([])
$("[属性名]") $("[class]")：选中全部元素中有class属性的元素 $("[属性名=属性值]") 属性值加不加单引号都可以 $("[class=xxx]") $("[class='xxx']") $("[class != a ]")：class属性值不是a的、没有class属性的都选中 $("[class ^= a ]")：class属性值以a开头的元素 $("[class $= a ]")：class属性值以a结尾的元素 $("[class *= a ]")：class属性值包含a的元素 -
过滤选择器
有些过滤选择器的一些方法和其他函数类型，例如：$(“ul>li:first”)等价于$(“ul>li”).first()。但是有的不可以，例如：$(“ul>li:odd”)就不可以写成$(“ul>li”).odd();
- 基本过滤选择器（从0开始） :first——第一个 :last——最后一个 :even——偶数 :odd——奇数 :eq(index)——第index个 :gt(index)——大于index的全部元素 :lt(index)——小于index的全部元素 :not(选择器)——除了。。。之外 :header——选中所有的标题元素 h1 h2 h3 :focus——获取当前焦点的元素 //alert( $("ul>li").first().html() ); //alert( $("ul>li:first").html() ); //alert( $("ul>li").eq(2).html() ); //alert( $("ul>li:eq(2)").html() ); //alert( $( $("ul>li:odd")[1] ) .html() ); //alert( $("ul>li:lt(2)").length ); //alert( $("li:not(ul>li:eq(2))").length ); -
可见性选择器
:visible——选中所有可见的元素 :hidden——选中所有隐藏的元素 // alert( $(":visible").length ); // alert( $(":hidden").length );
-
-
事件 事件函数（事件方法）
前端的一些事件、方法，会在某些情况下失效，还需要注意兼容性的问题
javascript：onXxx() 例如： onclick(); ——写在<script>标签中，ready()函数外 jquery：没有on xxx() 例如： click() ——写在<script>内 ready(function(){ $(选择器).事件类型(function{ ...... }); });-
鼠标事件
window事件：ready(); 鼠标事件： click()：单击事件 mouseover()：鼠标悬浮 mouseout()：鼠标离开 $("div").mouseover(function(){ alert("鼠标悬浮"); }); $("div").mouseout(function(){ alert("鼠标离开"); }); 也可以这样写： $("div").mouseover(function(){ alert("鼠标悬浮"); }).mouseout(function(){ alert("鼠标离开"); }); -
键盘事件
keydown()——按下键盘的某个键 keyperss()——某键保持按下状态 keyup()——松开按键 可以通过event.keyCode指定具体按键 $("body").keydown(function(event){ if(event.keyCode == 13){ alert("回车键"); } });
-
表单事件
focus()——获取焦点 blur()——失去焦点 颜色值：英文单词/#6位十六进制 如果6位是两两相同的，可以写成3位。如：#aabbcc 可写成：#abc $("#uid").focus(function(){ //当前元素就是 $("#uid"),即 id="uid"的文本框 //当前元素可以用this表示 $(this).css("background-color","#abc"); }).blur(function(){ $(this).css("background-color","white"); }); -
绑定事件与移除事件
$(...).click(function(){...}); 绑定事件 $(...).bind("事件名",[数据，可有可无，一般不写],函数); $(...).bind("click",function(){...}); $(...).bind("mouseover",function(){...}); $(...).bind("focus",function(){...}); 批量绑定 $(...).bind({"事件名":函数,"事件名":函数 ,...,"事件名":函数}); 移除事件 $(...).unbind("事件名"); function myBind(){ $("#uname").bind("click",function(){ alert("click..."); }); } function myUnbind(){ $("#uname").unbind("click"); } -
复合事件
hover(function(){},function(){}); ——切换使用mouseover()和mouseout() toggle（函数1，函数2，函数3....函数n） 注意：jquery1.9之前的版本才支持该事件 toggle是多个click()事件，toggle()还有其他含义（隐藏域显示） $("h2").hover(function(){alert("悬浮。。");},function(){alert("离开");}); $("body").toggle(function(){ $(this).css("background-color","red"); },function(){ $(this).css("background-color","yellow");} ,function(){ $(this).css("background-color","blue"); }); -
显示效果（隐藏与显示）
形式：hide([速度],[回调函数]); 以下方法都是这种格式 其中速度可以是数字（以毫秒为单位），也可以是单词（fast、normal、slow 要加双引号） hide()——隐藏 show()——显示 toggle()——切换隐藏与显示 淡入淡出（透明度） fadeIn()——淡入，显示 fadeOut()——淡出，隐藏 控制高度 slideDown()——下拉，显示 slideUp()——上拉，隐藏 总结： 显示：show()、fadeIn()、slideDown() 隐藏：hide()、fadeOut()、slideUp()<script type="text/javascript"> function myshow(){ //$("h3").show(); //$("h3").fadeIn(); $("h3").slideDown(); } function myHide(){ //$("h3").hide(); //$("h3").fadeOut(3000); $("h3").slideUp(); } </script> <body> <h3>h3</h3> <button onclick="myshow()">显示</button> <button onclick="myHide()">隐藏</button> </body>
-
-
操作DOM
-
样式操作
设置css()
jquery对象.css("属性名","属性值"); jquery对象.css({"属性名":"属性值"，"属性名":"属性值"，..."属性名":"属性值"}); $("#color2").css("color","red"); $("#color2").css({"color":"blue","font-size":"100px","background-color":"gray"});追加或移除样式class
addClass("x"); 追加一个样式 addClass("x x x");追加多个样式 removeClass("x"); 移除一个样式 removeClass("x x x"); 移除多个样式 removeClass(); 移除全部样式 toggleClass("x x x"); 切换追加与移除 $("#mytest").addClass("myStyle myStyle2"); $("#mytest").click(function(){ //$("#mytest").removeClass("myStyle2"); //$("#mytest").removeClass(); $("#mytest").toggleClass("myStyle myStyle2"); }); }); -
内容操作
html()：获取值，获取的是元素的内容，包含了元素内部的各种标签，以及其中的文本内容 $("#mytest").html() text()：仅获取其中的文本值 $("#mytest").text() html("xx")：更改其中的内容 $("#mytest").html("<div style='background-color:yellow'><strong>hello world</strong></div>"); text("xx")：更改标签内显示的文本 $("#mytest").text("<div style='background-color:yellow'><strong>hello world</strong></div>"); val()：获取value值 alert($("#uid").val()); val("xx")：设置value值 $("#uid").val("987"); -
节点与属性操作
节点操作
1、查询节点（jquery选择器） 2、创建节点： $() $(选择器) —— 获取节点 $(DOM对象)—— 将dom对象转换为jquery对象 $(html字符串) —— $("<li>xxx</li>") 3、插入节点 //插入节点 var $myElement = $("<li>xx</li>"); //内部插入 //后面 //$("ul").append($myElement); //$myElement.appendTo($("ul")); //前面 //$("ul").prepend($myElement); //$myElement.prependTo($("ul")); //外部插入 $myElement = $("<p>hello node</p>"); //后面 //$("ul").after($myElement); //$myElement.insertAfter($("ul")); //前面 //$("ul").before($myElement); //$myElement.insertBefore($("ul")); 4、替换节点 $X.replaceWith($Y) 用$Y替换$X $("ul>li:eq(1)").replaceWith("<li>xxx</li>"); replaceAll(); $("<li>xxx</li>").replaceAll("ul>li:eq(1)"); 5、删除节点 remove() —— 彻底删除 例如：$("ul>li:eq(1)").remove(); detach() —— 将节点删除，但关联的事件、数据不会删除（不推荐使用） empty() —— 只删除内容 6、克隆节点 clone(true|flase) ：如果里面是true则连节点里的事件一起克隆，如果是false则只克隆节点不包括内容 $("ul").append($("ul>li:eq(1)").clone());
-
属性操作
attr("属性名") —— 获取属性值 alert($("#uid").attr("value")); attr("属性名","属性值") —— 设置属性值 $("#uid").attr("value","12345"); 批量设置属性值 attr({"属性名":"属性值","属性名":"属性值",...,"属性名":"属性值"}); $("#uid").attr({"id":"myId","name":"zhangsan","value":"20"}); - 获取结合与遍历集合 子节点集合 $(..).children("li") alert($("ul").children("li").length); 后代集合（不推荐使用，影响性能） $(..).find("li") alert($("body").find("li").length); 同辈集合： next() —— 后一个 alert($("ul>li:eq(1)").next().html()); prev() —— 前一个 alert($("ul>li:eq(1)").prev().html()); siblings() —— 同辈的所有元素（左右两边的所有） alert($("ul>li:eq(1)").siblings().length); 前辈集合 parent() —— 父代 parents() —— 祖先 ()里还可以再次选择，如parents("ul"),选择父代里是ul的；如sublings("p")，选择同辈里是p标签的。 过滤集合： - 很多方法的()就是一个过滤选择器 - filter("选择器..."); $("ul>li:eq(1)").siblings(":odd").css("background-color","pink"); 遍历集合： $(...).each(function(a,b){//其中的两个参数a和b可传可不传，a表示当前元素的索引，b表示当前元素，等价于this ... }); $("ul>li").each(function(){ //alert($(this).html()); }); $("ul>li").each(function(index,element){ alert(index+" , " + $(this).html() + " , " + $(element).html() ); });
-
-
CSS的dom操作
height(500) ; width(500) 获取： $("#div2").height() $("#div2").width() 传递值： $("#div2").height(500); $("#div2").width(500); offset()：偏移量（左上角的点）,left top 获取偏移量： var $myDivOffset = $("#div2").offset(); alert($myDivOffset.left + " , "+ $myDivOffset.top); offset(function(n,oldOffset){ ... }) /** * index一般不用，表示当前是第几个获取偏移量的。 * oldOffset：当前偏移量的对象 */ var $myDivOffet = $("#div2").offset(function(index,oldOffset){ //定义一个对象用于设置新的偏移量 var newOffset = new Object(); newOffset.left = oldOffset.left+100; newOffset.top = oldOffset.top+100; //将新的返回 return newOffset; }); offsetParent()：获取(已定位)的最近的祖先元素 什么是已定位？ 元素position属性(默认static)被设置为了relative absolute 或fixed $("#bid").click(function(){ $(this).offsetParent().css("border","10px blue solid"); }); 滚动条： scrollLet() scrollTop() -
最重要的：表单校验
- 获取要校验的元素值(选择器) 如：用户名、密码等 - 通过字符串处理方法，或者正则表达式等手段，进行校验 "aaa@abc.com".indexOf("@") != -1 - 触发校验的方法或者事件(校验时机) blur() 失去焦点时校验 submit() 点击表单的提交按钮(submit)时触发 onblur="xxx()" onsubmit = "xxx()" submit()或onsubmit的返回值 会决定表单是否跳转，如果返回true则正常跳转；如果返回false 则终止条件 在校验时，建议写法； if(....不合理的情况){ alert(); return false ; } if(....不合理的情况){ alert(); return false ; } if(....不合理的情况){ alert(); return false ; }正则：
正则表达式：用于定义规则 email="aaa" ; 正则表达式.test( email); 使用：手写的正则表达式规则.test(校验的值) -> true|false 正则表达式 误区：有些时候完全没必要使用表单校验
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ //当单击submit按钮时触发，通过返回值true|false告知程序，是否校验成功 /* $("#myForm").submit(function(){ var $name = $("#uname").val(); var $pwd = $("#upwd").val(); var $height = $("#uheight").val(); if($name.length<2 || $name.length>6){ alert("用户名必须在2-6位之间"); return false; } if($pwd.length<=6){ alert("密码不能少于6位数"); return false; } if($height < 100){ alert("身高不能低于100cm"); return false; } return true; }); */ $("#utel").blur(function(){ var $tel = $(this).val(); var reg =/^1\d{10}$/; //格式错误显示提示信息 if(!(reg.test($tel))){ $("#telTip").css("display","inline"); }else{ //反之如果填写正确，随即隐藏错误提示 $("#telTip").css("display","none"); } }); $("#uemail").blur(function(){ var $email = $(this).val(); //var reg = /^\w+@[0-9a-zA-Z]{2,4}\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/; var reg =/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/; if(!(reg.test($email))){ $("#emailTip").css("display","inline"); }else{ //反之如果填写正确，随即隐藏错误提示 $("#emailTip").css("display","none"); } }); }); function check(){ var $name = $("#uname").val(); var $pwd = $("#upwd").val(); var $height = $("#uheight").val(); if($name.length<2 || $name.length>6){ alert("用户名必须在2-6位之间"); return false; } if($pwd.length<=6){ alert("密码不能少于6位数"); return false; } if($height < 100){ alert("身高不能低于100cm"); return false; } return true; } </script> </head> <body> <form id="myForm" action="result.html" onsubmit="return check()"> 用户名：<input type="text" id="uname"/> <br/> 密 码：<input id="upwd" type="password" /> <br/> 身 高：<input id="uheight"/> <br/> 电 话：<input type="text" id="utel"/><font id="telTip" color="red" style="display:none">电话号码格式不正确</font><br/> 邮 箱：<input type="text" id="uemail"/><font id="emailTip" color="red" style="display:none">邮箱格式不正确</font><br/> <input type="submit" value="注册" /> </form> </body> </html>result.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* $(":input").each(function(){ alert($(this).attr("name")); }); alert($(":file").attr("name")); */ /* $(":input").each(function(index,element){ if(index == 0){ alert("football:"+$(element).attr("value")); }else if(index == 1){ alert("basketball:"+$(element).val()); }else if(index == 2){ alert("pingpang:"+$(element).attr("value")); } }); */ }); function testMethod(node){ alert($(node).val()); //获取同辈节点 alert("before："+$(node).prev().val()); alert("nexter："+$(node).next().val()); } </script> </head> <body> <input type="checkbox" value="football" name="hobby" />足球 <input type="checkbox" value="basketball" name="hobby" onclick="testMethod(this)" />篮球 <input type="checkbox" value="pingpang" name="hobby" />乒乓球 <!-- <input type="file" name="myFile"/> <input type="text" id="uname" name="myName"/> <input type="button" name="myButton" value="绑定" οnclick="myBind()"/> <textarea name="myTextArea">hello textarea</textarea> --> </body> </html> -
表单校验与回调函数图解
转载：https://blog.csdn.net/weixin_43670978/article/details/117398724
查看评论