首页 > 代码库 > JQuery基础学习总结
JQuery基础学习总结
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=http://www.mamicode.com/‘‘>曹之后添加"); //在元素之后添加 $("#sp").before("<a href=http://www.mamicode.com/‘‘>曹之前添加"); //在元素之前添加 $("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="http://www.mamicode.com/样式练习/images/2.png">--> <!--<input type="button" class="hide" value="http://www.mamicode.com/隐藏"/>--></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>
JQuery基础学习总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。