JQuery基础学习总结
简单总结下JQuery：
一：事件
1.change事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <select id="s"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> <div></div> <script type="text/javascript"> $(function () { $("#s").change(function(){ $("div").html("您选择的是:"+$(this).val()) }) }); </script> </body> </html>
2.hover事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .red { color: red; } </style> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div> sda </div> <script type="text/javascript"> $(function () { $("div").hover( function(){ $(this).addClass("red") }, function(){ $(this).removeClass("red") } ) }); </script> </body> </html>
3.toggleClass事件：实现点击鼠标样式切换，可以和hover比较
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .red { color: red; } </style> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div> sdaasdas </div> <script type="text/javascript"> $(function () { $("div").click(function(){ $("div").toggleClass("red"); }) }); </script> </body> </html>
4.one事件：一次性事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div >cao</div> <script type="text/javascript"> $(function () { var n = 20; $("div").one("click",function(){ n++; $(this).css("font-size",n+"px"); }) }); </script> </body> </html>
5. click事件：鼠标单击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div id="test"> 点击触发 </div> <script type="text/javascript"> $(function(){ $("#test").click(function(e){ // alert(e.target.innerHTML); alert(e.target.id); }) }); </script> </body> </html>
6.dblclick事件：鼠标双击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div>点我</div> <p>我变颜色</p> <script type="text/javascript"> $(function () { $("div").dblclick(function(){ $("p").css("color","red") }) }); </script> </body> </html>
7.siblings事件：选择除了自己以外的兄弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div class="d"> <ul> <li class="l1">草莓</li> <li class="l2">香蕉</li> <li class="l3">橘子</li> <li class="l4">苹果</li> </ul> </div> <script type="text/javascript"> $(function () { $(".l1").siblings().css("border", "1px red solid"); }); </script> </body> </html>
8.next事件：选择自己的相邻元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div class="d"> <ul> <li class="l1">草莓</li> <li class="l2">香蕉</li> <li class="l3">橘子</li> <li class="l4">苹果</li> </ul> </div> <script type="text/javascript"> $(function () { $(".l1").next().css("border", "1px red solid"); }); </script> </body> </html>
9.内容添加事件：包括append;appendTo;after;before
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>各种方法</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div> <span id="sp">曹</span> </div> <p id="p">曹泰</p> </body> <script type="text/javascript"> var $h = "<div>我是添加的</div>"; $("body").append($h); //不能直接写便签名字，或者类名，把$h添加到body元素之后 $("#p").appendTo("span"); //可以直接写便签名字，或者类名，把p元素添加到span元素之后 $("#sp").after("<a href=''>曹之后添加</a>"); //在元素之后添加 $("#sp").before("<a href=''>曹之前添加</a>"); //在元素之前添加 $("body").append($("#p").clone()); //克隆 </script> </html>
10.删除事件：remove;empty
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> <style type="text/css"> .red{ color: red; } </style> </head> <body> <span class="s">我是曹泰</span> <span class="s1">我是曹泰1</span> </body> <script type="text/javascript"> // $("span").remove(); //移除span标签 // $("span").empty(); //移除span标签 // $("span").remove(".s"); // 移除span标签中的s $(".s1").empty("span");// .s1标签的内容 </script> </html>
11.bind,unbind事件：绑定,解绑事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div>sad</div> <input type="button" value="解除绑定"/> <script type="text/javascript"> $(function () { // $("div").bind("click dblclick",function(){ // $(this).css("color","red"); // }) $("div").bind({ click:function(){ $(this).css("color","red"); }, dblclick:function(){ $(this).css("background-color","blue"); } }); $("input").bind("click",function(){ $("div").unbind(); }) }); </script> </body> </html>
12.on,off事件：绑定，解绑事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div>sad</div> <input type="button" value="解除绑定"/> <script type="text/javascript"> $(function () { $("div").on({ click:function(){ $(this).css("color","red"); }, dblclick:function(){ $(this).css("background-color","blue"); } }); $("input").on("click",function(){ $("div").off(); }) }); </script> </body> </html>
13.show,hide事件：显示隐藏事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <!--分别对显示和隐藏绑定--> <img src="../../样式练习/images/2.png"> <input type="button" class="show" value="显示" disabled/> <input type="button" class="hide" value="隐藏"/> <!--只绑定一个button--> <!--<img src="../../样式练习/images/2.png">--> <!--<input type="button" class="hide" value="隐藏"/>--> </body> <script type="text/javascript"> $(function(){ //分别对显示和隐藏绑定 $(".show").bind("click",function(){ $("img").show(1000,function(){ $(".show").attr("disabled",true); $(".hide").attr("disabled",false); }); }); $(".hide").bind("click",function(){ $("img").hide(1000,function(){ $(".hide").attr("disabled",true); $(".show").attr("disabled",false); }); }); //只绑定一个button // $(".hide").bind("click",function(){ // $("img").toggle(1000,function(){ // $(".hide").val()=="隐藏" ? $(".hide").val("显示"): $(".hide").val("隐藏"); // }) // }) }) </script> </html>
14.mousemove事件：鼠标移动事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; border: 0; } div{ border: 1px solid salmon; } </style> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div id="n1"> <p>鼠标在此区域移动触发mousemove</p> <span class="s1">移动的X位置</span> <span class="s2">移动的Y位置</span> </div> <script type="text/javascript"> $(function () { $("#n1").mousemove(function(e){ $(".s1").html("移动的X位置:"+e.pageX); $(".s2").html("移动的Y位置:"+e.pageY); }) }); </script> </body> </html>
15.mouseenter,mouseleave事件:鼠标移入移出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mouseover/mouseout</title> <style type="text/css"> .main{width:150px;height: 50px;line-height:50px;text-align:center;background-color:#8C0000;color:#fff;position:relative} .list{width:148px;height: 200px;color:#f00;border:1px solid red;position: absolute;top:50px;display:none} </style> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div class="main"> 标题 <div class="list"> 下拉列表 </div> </div> <script type="text/javascript"> $(function () { $(".main").mouseenter(function () { $(".list").css("display","block"); }).mouseleave(function () { $(".list").css("display","none"); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mouseover与mouseenter</title> <style type="text/css"> div{width:350px;height:150px;padding:5px;margin:5px;border:1px solid #ccc;} p{height: 50px;border:1px solid red;margin:30px;} </style> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div class="aa"> <p>鼠标离开此区域触发mouseover事件</p> <span>冒泡事件触发次数</span> </div> <div class="bb"> <p>鼠标离开此区域触发mouseenter事件</p> <span>冒泡事件触发次数</span> </div> </body> <script type="text/javascript"> $(function(){ var i=0; $(".aa").mouseover(function(){ $(".aa span").html("mouseover事件触发的次数："+(++i)); }); var n=0; $(".bb").mouseenter(function(){ $(".bb span").html("mouseover事件触发的次数："+(++n)); }) }); </script> </html>
16.focus,blur事件：聚焦,失焦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点/失焦</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <from> <div></div> <input type="text" value=""> </from> </body> <script type="text/javascript"> $(function () { $("input").focus(function(){ $("div").html("请您输入您的姓名"); }).blur(function(){ if($(this).val().length==0){ $("div").html("您的名称不能为空"); } }); }); </script> </html>
二：方法
1.arrt方法：获取指定属性名的属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>各种方法</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <a href="http://127.0.0.1" id="a1">点我就ok</a> <div>我要取得地方是:<span id="tip"></span></div> </body> <script type="text/javascript"> $("#a1").removeAttr("href"); var $url=$("#a1").attr("href"); $("#tip").html($url); // js方法 // var a = document.getElementById("a1"); // alert(a.getAttribute("href")); </script> </html>
例子：表单选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" rel="stylesheet"> .red { border: 1px solid red; } </style> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <form id="f"> <input type="text"/> <select id="i" multiple="multiple"> <option id="o" value="曹泰">选1</option> <option selected="selected">选2</option> <option >选3</option> <option >选4</option> <option selected="selected">选5</option> </select> 男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/> <br/> A<input type="checkbox"/> B<input type="checkbox"/> C<input type="checkbox"/> D<input type="checkbox"/> </form> <br/> <div>asc</div> </body> <script type="text/javascript"> $(function () { $("#f :input").addClass("red"); $("#f input:text").addClass("red"); // $("#f :text").addClass("red"); $("#f :radio").attr("disabled", "true"); $("#f :checkbox").attr("checked", "checked"); $("#f :checkbox").attr("disabled", "true"); $("#i :selected").html("你被选中了"); alert($("#i #o").val()); $("div").html("<b>你被选中了</b>"); }); </script> </html>
2.替换方法：replaceWith;replaceAll;warp:warpInner
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>替换方法</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> <style type="text/css"> .red{ color: red; } </style> </head> <body> <span class="s">我是曹</span> <span class="s">我是曹</span> </body> <script type="text/javascript"> // $(".s").replaceWith("<div class='red'>想你了</div>");//span添加了div便签，div包裹span var $h ="<div class='red'>你好</div>"; $($h).replaceAll(".s"); //替换所有的span标签 // $(".s").wrap("<p class='red'>aa</p>"); //span添加了p便签，p包裹span // $(".s").wrapInner("<i></i>"); //span添加了i便签，span包裹i </script> </html>
3.遍历：children,parent,parents,find
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <div class="d"> <ul> <li>草莓<span>我的最爱</span></li> <li>香蕉</li> <li class="l3">橘子</li> <li><span>苹果</span></li> </ul> </div> <script type="text/javascript"> $(function () { // $("ul li").each(function(i){ // if(i==1){ // $(this).css("color","red"); // } // }); // $("ul").children().css("color", "red"); //查找下一辈 （向下找） // $("ul").children("span").css("color", "red"); //查找下一辈，不能实现查找span （向下找） // $(".l3").parent().css("border", "1px solid red"); //查找父亲（向上找） // $("li").find("span").css("color", "red"); //查找下辈所有的 （向下找） // $(".l3").parents().css("border", "1px solid red"); //查找所有祖辈 （向上找） // $(".l3").parents(".d").css("border", "1px solid red"); //查找祖辈到d （向上找） }); </script> </body> </html>
三：选择器
选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> <script type="text/javascript"> // $(document).ready(function(){ // $("p").html("hello"); // } // ) // $(function () { // $("p").html("元素选择器"); // } // ); // $(function () { // $("#id").html("id选择器"); // } // ); // $(function () { // $(".ul").html("类选择器"); // } // ); // $(function () { // $("p a").html("祖孙选择器"); // }); // $(function () { // $(".div1,.div2").html("div"); // }); $(function () { // $("div>p").html("hello"); // div的直系亲属 // $("span+p").html("hello"); // span下面的p标签 $("p~span").css('color','red') }) </script> </head> <body> <!--------------------------------------------------------------------> <!--<p>--> <!--<p>--> <!--<p>--> <!--------------------------------------------------------------------> <!--<div id="id"></div>--> <!--<ul class="ul">--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--</ul>--> <!--------------------------------------------------------------------> <!--<p><a></a></p>--> <!--<div class="div1"></div>--> <!--<div class="div2"></div>--> <!--------------------------------------------------------------------> <!--<div>--> <!--<p>ad</p>--> <!--<span> <p>ad</p></span>--> <!--</div>--> <!--<p>ads</p>--> <!--<p>asd</p>--> <!--------------------------------------------------------------------> <!--<div>--> <!--<span>曹</span>--> <!--<p></p>--> <!--<p>曹</p>--> <!--<p>曹</p>--> <!--</div>--> <!--------------------------------------------------------------------> <p>阿三djasdj；lkj</p> <span>adssdada</span> <span>adssdada</span> <a><span></span></a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> </head> <body> <ul> <li title="我是曹泰">asdsda</li> <li title="曹泰是我">asdddd</li> <li title="曹泰">asdddd</li> </ul> <script type="text/javascript"> $(function(){ $("li[title = '曹泰']").css("color","red"); // $("li[title != '我是']").css("color","blue"); // $("li[title *= '曹泰']").css("font-weight","bold"); }); </script> </body> </html>
过滤选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> <script type="text/javascript"> // $(function(){ // $("ul li:first").html("1"); // $("ul li:first").css("color","red"); // // n从0开始 // $("ul li:eq(1)").html("2"); // $("ul li:eq(2)").html("3"); // // $("ul li:last").html("4"); // $("ul li:last").css("color","red"); // }); // $(function(){ //// 含有曹泰的li变为红色 // $("li:contains('曹泰')").css('color',"red"); // }) // $(function () { //// 含有a的p变为红色 // $("p:has('span')").css('color', "red"); // }); // // $(function () { // var $s=$("p:hidden").html(); // $("div").html($s); // }); // $(function () { // var $s=$("p:hidden").html(); // $("div").html($s); // }); $(function () { var $s=$("p:visible").html(); $("div").html($s); }); </script> </head> <body> <!--<ul>--> <!--<li>2</li>--> <!--<li>2</li>--> <!--<li>2</li>--> <!--<li>2</li>--> <!--</ul>--> <br/> <!--<ul class="ul1">--> <!--<li>曹泰阿斯顿撒旦</li>--> <!--<li>帅阿斯</li>--> <!--<li>曹泰爱神的箭</li>--> <!--</ul>--> <br/> <!--<p>as<span>a阿斯顿</span></p>--> <br/> <!--<div></div>--> <!--<p style="display: none">隐藏</p>--> <br/> <p>我是</p> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script> <script type="text/javascript"> $(function(){ $("li:first-child").css("color","red"); $("li:last-child").css("color","red"); $("li:nth-child(2)").css(("background-color"),("green")); // 就是指的第二个,n从1开始 }); </script> <body> </head> <ul> <li>曹泰</li> <li>曹泰</li> <li>曹泰</li> <li>曹泰</li> <li>曹泰</li> </ul> <ul> <li>曹泰</li> <li>曹泰</li> <li>曹泰</li> <li>曹泰</li> <li>曹泰</li> </ul> </body> </html>