前端之jq簡單知識
阿新 • • 發佈：2020-08-10
1 <title>js物件和jq物件轉換</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 function jsChangeText(){ 5 div_text=document.getElementById("div_text"); 6 div_text.innerHTML="使用js替換文字成功"; 7 } 8 function jsTojqChangeText(){ 9 div_text=document.getElementById("div_text"); 10 $(div_text).html("jstojq替換文字成功"); 11 } 12 $(function(){ 13 $("#button_change_text").click(function(){14 $("#div_text").html("使用jq替換文字成功"); 15 }); 16 }); 17 $(function(){ 18 $("#button_jqTojsChange_text").click(function(){ 19 // var div_text=$("#div_text").get(0);或者下面這樣 20 var div_text=$("#div_text")[0];//這裡好像只能用0,id不能重複 21 22 div_text.innerHTML="jqTojs替換文字成功"; 23 }); 24 }); 25 </script> 26 </head> 27 <body> 28 <input type="button" value="使用js替換文字內容" onclick="jsChangeText()"/> 29 <input type="button" value="使用jq替換文字內容" id="button_change_text"/> 30 <input type="button" value="使用js_to_jq替換文字內容" onclick="jsTojqChangeText()"/> 31 <input type="button" value="使用jq_to_js替換文字內容" id="button_jqTojsChange_text"/> 32 <div id="div_text"> 33 這裡是將要被替換的內容 34 </div> 35 36 </body>
1 <title>圖片動畫效果</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 $(function(){ 5 $("#button_showImg").click(function(){ 6 // $("#img_nice").show("slow");//或者直接用數字 7 // $("#img_nice").slideDown("slow");//這種方式要指定寬度,拉窗簾的效果 8 // $("#img_nice").fadeIn("slow");//淡入淡出 9 $("#img_nice").animate({width:"1000px"},"slow")//自定義效果 10 }); 11 $("#button_hideImg").click(function(){ 12 // $("#img_nice").hide("slow"); 13 // $("#img_nice").slideUp("slow"); 14 // $("#img_nice").fadeOut("slow"); 15 $("#img_nice").animate({width:'100px'},"slow") 16 }); 17 }); 18 </script> 19 </head> 20 <body> 21 <input type="button" name="" id="button_showImg" value="顯示" /> 22 <input type="button" name="" id="button_hideImg" value="隱藏" /><br /> 23 <img src="../images/nice.jpg" id="img_nice" width="500px"/> 24 25 </body>
1 <title>定時彈出廣告</title> 2 <script type="text/javascript"src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 function showImg(){ 5 $("#img1").slideDown("4000"); 6 setTimeout("hideImg()",5000); 7 } 8 9 function hideImg(){ 10 $("#img1").slideUp("4000"); 11 } 12 $(function(){ 13 setTimeout("showImg()",5000); 14 15 }); 16 </script> 17 </head> 18 <body> 19 <img src="../images/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" id="img1" style="display:none"/> 20 </body>
1 <title>基本選擇器</title> 2 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 3 <script type="text/javascript"src="../js/jquery-1.11.0.js"></script> 4 <script type="text/javascript"> 5 $(function(){ 6 $("#btn1").click(function(){ 7 $("#two").css("background-color","red");//id選擇器 8 }); 9 $("#btn2").click(function(){ 10 $(".mini").css("background-color","red");//類選擇器 11 }); 12 $("#btn3").click(function(){ 13 $("div").css("background-color","red");//元素選擇器 14 }); 15 $("#btn4").click(function(){ 16 $("*").css("background-color","red");//統配選擇器 17 }); 18 $("#btn5").click(function(){ 19 $(".mini,span").css("background-color","red");//選擇器分組 20 }); 21 }); 22 23 </script> 24 </head> 25 <body> 26 <input type="button" value="找出ID為two的元素" id="btn1" /> 27 <input type="button" value="找出mini類的所有元素" id="btn2" /> 28 <input type="button" value="找出所有div元素" id="btn3" /> 29 <input type="button" value="萬用字元選擇器" id="btn4" /> 30 <input type="button" value="找出mini類和span元素" id="btn5" /> 31 32 <br /> 33 <div id="one"> 34 <div class="mini">1-1</div> 35 </div> 36 <div id="two"> 37 <div class="mini">2-1</div> 38 <div class="mini">2-2</div> 39 </div> 40 <div id="three"> 41 <div class="mini">3-1</div> 42 <div class="mini">3-2</div> 43 <div class="mini">3-3</div> 44 </div> 45 <span id="four"> 46 </span> 47 </body>
1 <title>層級選擇器</title> 2 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 3 <script type="text/javascript"src="../js/jquery-1.11.0.js"></script> 4 <script type="text/javascript"> 5 $(function() { 6 $("#btn1").click(function() { 7 $("body > div").css("background-color", "red"); 8 9 }); 10 11 $("#btn2").click(function() { 12 $("body div").css("background-color", "red"); 13 14 }); 15 $("#btn3").click(function() { 16 $("div > div").css("background-color", "red"); 17 18 }); 19 $("#btn4").click(function() { 20 $("#one+div").css("background-color", "red"); //one的弟弟div 21 22 }); 23 $("#btn5").click(function() { 24 $("#one~div").css("background-color", "red"); //one的所有弟弟div 25 26 }); 27 28 }); 29 </script> 30 </head> 31 <body> 32 <input type="button" value="找出body的子元素" id="btn1" /> 33 <input type="button" value="找出body的所有子元素" id="btn2" /> 34 <input type="button" value="找出div下的div元素" id="btn3" /> 35 <input type="button" value="找出one的相鄰兄弟" id="btn4" /> 36 <input type="button" value="找出one的所有相鄰兄弟" id="btn5" /> 37 38 39 <br /> 40 <div id="one"> 41 <div class="mini">1-1</div> 42 </div> 43 <div id="two"> 44 <div class="mini">2-1</div> 45 <div class="mini">2-2</div> 46 </div> 47 <div id="three"> 48 <div class="mini">3-1</div> 49 <div class="mini">3-2</div> 50 <div class="mini">3-3</div> 51 </div> 52 <span id="four"> 53 54 </span> 55 </body>
1 <title>表單選擇器</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 $(function(){ 5 // $(":input").css("background-color","red");//input與元素選擇器不同，多了textarea... 6 $(":text").css("background-color","red"); 7 $("#button_clickme").click(function(){ 8 $("option:selected").css("background-color","green"); 9 }); 10 $("ul li:nth-child(2)").css("background-color","yellowgreen");//第二個li標籤 11 }); 12 </script> 13 </head> 14 <body> 15 <form> 16 <input type="button" value="Input Button"/> 17 <input type="checkbox" /> 18 19 <input type="file" /> 20 <input type="hidden" /> 21 <input type="image" /> 22 23 <input type="password" /> 24 <input type="radio" /> 25 <input type="reset" /> 26 27 <input type="submit" /> 28 <input type="text" /> 29 <select><option>Option</option></select> 30 31 <textarea></textarea> 32 <button>Button</button> 33 <br /> 34 <select multiple="multiple"> 35 <option >選擇1</option> 36 <option >選擇2</option> 37 <option >選擇3</option> 38 </select> 39 <input type="button" value="點我更換顏色" id="button_clickme"/> 40 <br /> 41 ----------------------------------------------------------------------------------------<br /> 42 子元素選擇器<br /> 43 <ul> 44 <li>hello1</li> 45 <li>hello2</li> 46 <li>hello3</li> 47 <li>hello4</li> 48 </ul> 49 <ul> 50 <li>world1</li> 51 <li>world2</li> 52 <li>world3</li> 53 <li>world4</li> 54 </ul> 55 56 </form> 57 </body>
1 <title>基本過濾器</title> 2 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 3 <script type="text/javascript"src="../js/jquery-1.11.0.js"></script> 4 <script type="text/javascript"> 5 $(function(){ 6 $("#btn1").click(function(){ 7 $("div:even").css("background-color","red");//從0索引開始，不分層級，找出索引為偶數 8 }); 9 $("#btn2").click(function(){ 10 $("div:odd").css("background-color","red");//從0索引開始，不分層級，找出索引為奇數 11 }); 12 $("#btn3").click(function(){ 13 $("div:first").css("background-color","red");//找出第一個 14 }); 15 $("#btn4").click(function(){ 16 $("div:gt(2)").css("background-color","red");// 17 }); 18 $("#btn5").click(function(){ 19 $(".mini,span").css("background-color","red");// 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <input type="button" value="div偶數過濾器" id="btn1" /> 26 <input type="button" value="div奇數過濾器" id="btn2" /> 27 <input type="button" value="過濾所有div中第一個元素" id="btn3" /> 28 <input type="button" value="過濾索引大於2的div" id="btn4" /> 29 <input type="button" value="找出mini類和span元素" id="btn5" /> 30 31 <br /> 32 <div id="one"> 33 <div class="mini">1-1</div> 34 </div> 35 <div id="two"> 36 <div class="mini">2-1</div> 37 <div class="mini">2-2</div> 38 </div> 39 <div id="three"> 40 <div class="mini">3-1</div> 41 <div class="mini">3-2</div> 42 <div class="mini">3-3</div> 43 </div> 44 <span id="four"> 45 46 </span> 47 48 </body>
匯入的css檔案內容
1 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} 2 form div { margin:5px 0;} 3 .int label { float:left; width:100px; text-align:right;} 4 .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} 5 .sub { padding-left:100px;} 6 .sub input { margin-right:10px; } 7 .formtips{width: 200px;margin:2px;padding:2px;} 8 .onError{ 9 background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center; 10 padding-left:25px; 11 } 12 .onSuccess{ 13 background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center; 14 padding-left:25px; 15 } 16 .high{ 17 color:red; 18 } 19 20 21 div,span,p { 22 width:140px; 23 height:140px; 24 margin:5px; 25 background:#aaa; 26 border:#000 1px solid; 27 float:left; 28 font-size:17px; 29 font-family:Verdana; 30 } 31 div.mini { 32 width:55px; 33 height:55px; 34 background-color: #aaa; 35 font-size:12px; 36 } 37 div.hide { 38 display:none; 39 } 40 41 42 table { border:0;border-collapse:collapse;} 43 td { font:normal 12px/17px Arial;padding:2px;width:100px;} 44 th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} 45 .even { background:#FFF38F;} /* 偶數行樣式*/ 46 .odd { background:#FFFFEE;} /* 奇數行樣式*/ 47 .selected { background:#FF6500;color:#fff;} 48 49 div.mini2 { 50 width:20px; 51 height:20px; 52 background-color: #aaa; 53 font-size:12px; 54 }
1 <title>表格隔行換色和全選全不選</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 $(function(){ 5 $("tr:even:gt(0)").css("background-color","red"); 6 $("tr:odd").css("background-color","green"); 7 $("#check1").click(function(){ 8 // $("input[type='checkbox']:gt(0)").prop("checked",this.checked);//使用屬性選擇器 9 // $(":checkbox:gt(0)").prop("checked",this.checked);//this指的是當前函式的所有者，使用表單選擇器 10 $("tbody > tr > td > input").prop("checked",this.checked);//使用層級選擇器 11 }); 12 }); 13 </script> 14 </head> 15 <body> 16 <table border="1px" width="600px" id="table_fenlei"> 17 <thead> 18 <tr> 19 <td><input type ="checkbox" id="check1"/></td> 20 <td>分類ID</td> 21 <td>分類名稱</td> 22 <td>分類商品</td> 23 <td>分類描述</td> 24 <td>操作</td> 25 </tr> 26 </thead> 27 <tbody> 28 <tr> 29 <td><input type ="checkbox" name="check_e"/></td> 30 <td>分類ID</td> 31 <td>分類名稱</td> 32 <td>分類商品</td> 33 <td>分類描述</td> 34 <td><a href="#">修改</a>|<a href="#">刪除</a></td> 35 </tr> 36 <tr> 37 <td><input type ="checkbox" name="check_e"/></td> 38 <td>分類ID</td> 39 <td>分類名稱</td> 40 <td>分類商品</td> 41 <td>分類描述</td> 42 <td><a href="#">修改</a>|<a href="#">刪除</a></td> 43 </tr> 44 </tbody> 45 </table> 46 </body>
1 <title>文件載入完成事件</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 // 文件載入完成事件，進行頁面初始化操作，例如，繫結點選事件，啟動定時器 5 jQuery(document).ready(function(){ 6 alert("jQuery(document).ready(function()"); 7 }); 8 $(document).ready(function(){ 9 alert("$(document).ready(function()"); 10 }); 11 $(function(){ 12 alert("$(function()111"); 13 }); 14 </script> 15 </head> 16 <body> 17 18 </body>
1 <title>jq的dom操作</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 $(function(){ 5 $("#btn").click(function(){ 6 // $("#div1").append("<font color='red' size='7'>我新增的內容</font>");//新增兒子 7 // $("<font color='red' size='7'>我新增的內容</font>").appendTo("#div1");//給自己找父親 8 // $("#div1").prepend("<font color='red' size='7'>我新增的內容</font>");//在前面新增 9 $("#div1").after("<font color='red' size='7'>我新增的內容</font>");//新增一個同級的，在此div之後 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <input type="button" id="btn" value="點我新增" /> 16 <div id="div1">這裡是將要新增的區域</div> 17 </body>
1 <title>省市聯動</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 var city_infos=[ 5 ['連雲港','鹽城市','宿遷市','江陰市'], 6 ['青島市','臨沂市','牛欄山','大海邊'], 7 ['義烏市','哈哈市','哦哦市','嘻嘻市'] 8 ]; 9 $(function(){ 10 $("#select_province").change(function(){ 11 var cities=city_infos[this.value]; 12 // var select_city=$("#select_city").get(0); 13 // select_city.options.length=0;//使用js方式清空 14 $("#select_city").empty();//使用jq方式清空 15 16 //兩種遍歷方式 17 // $(cities).each(function(i,n){ 18 // $("#select_city").append("<option>"+n+"</option>"); 19 // }); 20 $.each(cities,function(i,n){ 21 $("#select_city").append("<option>"+n+"</option>"); 22 }); 23 }); 24 }); 25 </script> 26 </head> 27 <body> 28 <select id="select_province" > 29 <option value="-1">--請選擇--</option> 30 <option value="0">江蘇省</option> 31 <option value="1">山東省</option> 32 <option value="2">安徽省</option> 33 </select> 34 <select id="select_city"> 35 36 </select> 37 </body>
1 <title>左右移動元素</title> 2 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 3 <script type="text/javascript"> 4 $(function(){ 5 $("#a_left1").click(function(){ 6 $("#select_right").append($("#select_left>option:selected")); 7 }); 8 $("#a_left2").click(function(){ 9 $("#select_right").append($("#select_left>option")); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <table border="1px" width="400px" align="center"> 16 <tr> 17 <td>分類名稱</td> 18 <td><input type="text" value="手機數碼"></td> 19 </tr> 20 <tr> 21 <td>分類描述</td> 22 <td><input type="text" value="這裡都是手機數碼"></td> 23 </tr> 24 <tr > 25 <td>分類商品</td> 26 <td> 27 <div style="float:left"> 28 已有商品<br /> 29 <select multiple="multiple" id="select_left" > 30 <option value="">蘋果</option> 31 <option value="">華為</option> 32 <option value="">榮耀</option> 33 <option value="">vivo</option> 34 35 </select><br /> 36 <a href="#" id="a_left1">>></a><br /> 37 <a href="#" id="a_left2">>>></a> 38 </div> 39 <div style="float:right"> 40 未選商品<br /> 41 <select multiple="multiple" id="select_right"> 42 <option value="">諾基亞</option> 43 <option value="">中興</option> 44 <option value="">藍莓</option> 45 <option value="">魅族</option> 46 47 </select><br /> 48 <a href="#"><<</a><br /> 49 <a href="#"><<<</a> 50 </div> 51 </td> 52 </tr> 53 <tr> 54 <td colspan="2"><input type="submit" value="提交" /></td> 55 56 </tr> 57 </table> 58 </body>