剛接觸了一點jquery入門！！明天補充！！ ...
jQ宗旨：write less do more
jq是js的框架，底層封裝了js代碼。
jq引入：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
jQ選擇器：推薦第一種：
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <body> <script> function run(){ //alert($("#xi").val()); alert(jQuery("#xi").val()); } </script> <input type="text" value="西游記" id="xi"/><br /> <input type="button" value="獲取id為xi的值" onclick="run()" /> </body>
jQ對象和js對象的互轉：
JS對象轉jq：var jq = $(js對象);
JQ對象轉js： var js = jq[0];或者jq.get(0); 因為jQ本質上是一個js數組
jQ頁面載入完成時執行的代碼：
<script> $(document).ready(function(){ //頁面載入完成時需要執行的代碼 }) $(function(){ //頁面載入完成時需要執行的代碼 //推薦這一種 }) </script>
jQ基本選擇器：
ID選擇器：$("#id");
類選擇器：$(".類名");
元素選擇器：$("元素名");
jQ數組遍歷的兩種方式：
1.$(數組).each(function(index){
alert(this+index);
})
2. $.each($(arr)，function（）{});
案例一：重寫彈出廣告
知識點：jQ動畫效果：
jQuery的隱藏和顯示相對JS更為動感圓滑。
<style> #d1{ background-color:lightskyblue; width:300px; height:300px; } </style> <script> //展示 function run1(){ //1.選中要顯示的元素對象 var v1 =$("#d1"); //滑動效果 //v1.show(2000) v1.slideDown(2000); // v1.fadeIn(2000,function(){ // alert("展示成功！！") // }); } //隱藏 function run2(){ //1.選中要隱藏的元素對象 var v2 = $("#d1"); v2.hide(3000); //v2.slideUp(3000); // v2.fadeOut(3000,function(){ // alert("隱藏成功！！") // }); } //切換顯示/隱藏 function run3(){ //1.選中要隱藏的元素對象 var v2 = $("#d1"); //v2.toggle(3000); //v2.slideToggle(3000); v2.fadeToggle(3000,function(){ alert("切換成功！！") }) } </script> <div id="d1"></div> <input type="button" value="顯示" onclick="run1()"/> <input type="button" value="隱藏" onclick="run2()"/> <input type="button" value="切換顯示/隱藏" onclick="run3()"/> </body>
案例實現顯示，隱藏廣告：
<body> <img src="../img/3.jpg" width="100%" style="display: none;"/> <script> //頁面載入完成時執行 $(function(){ //兩秒後彈出廣告 setTimeout("show()",2000); }) function show(){ // 選中改圖片 var ad =$("img"); //展示（滑動效果）； ad.slideDown(2000,function(){ //兩秒後再隱藏 setTimeout("hide()",2000); }); } function hide(){ var ad = $("img"); ad.slideUp(2000); } </script> </body>
一.1層級選擇器：
A B 獲得A元素內部的所有的B元素。 （子子孫孫）
A>B 獲得A元素下麵的所有B子元素。 兒子
A+B 獲得A元素同級下一個B元素 下麵的第一個兄弟
A~B 獲得A元素之後的所有B元素 所有的弟弟
<body> <script> $(function(){ //1、獲取id為main的span標簽 內 所有的div標簽 var arr1= $("#main div"); // jq對象 $(arr1).each(function(index){ alert($(this).text()+".."+index); }) //2、獲取id為main的span標簽 內 子元素div標簽 var arr2 =$("#main>div"); $(arr2).each(function(index){ alert($(this).text()+".."+index); }) // 3、獲取id為main的span標簽 後 第一個div兄弟標簽 var arr3 = $("#main+div"); $(arr3).each(function(index){ alert($(this).text()+".."+index); }) //4、獲取id為main的span標簽 後 所有的div兄弟標簽 var arr4 = $("#main~div"); $(arr4).each(function(index){ alert($(this).text()+".."+index); }) }); </script> <span id="main"> <div>111111</div> <div>222222</div> <div>333333</div> <span> <div>44444</div> </span> </span> <div>55555</div> <span> <div>66666</div> </span> <div>77777</div> </body>
一.2 屬性選擇器：
[屬性名] 獲得有 指定屬性名 的標簽對象。
[屬性名=值] 獲得 指定屬性名等於指定值 的標簽對象 value = man
[屬性名*=值] 獲得 指定屬性名 含有 指定值 的標簽對象 value *= a
[屬性值$='.jpg'] 所有的屬性名包含以".jpg"結尾的元素。
多個屬性選擇器可以組合使用 ：[選擇器1][選擇器2][選擇器3]
實例：
<script> $(function(){ //1、獲取所有存在type屬性的標簽 var arr1 = $("[type]"); $(arr1).each(function(index){ alert(this.value+".."+index); }) 2、獲取所有type屬性為radio的標簽 var arr2=$("[type=radio]") $(arr2).each(function(index){ alert(this.value+".."+index); }) 3、獲取所有type屬性含有o的標簽 var arr3 = $("[type*=o]"); $(arr3).each(function(index){ alert(this.value+".."+index); }) //4、獲取所有input標簽中的單選框，且name為sex的標簽 var arr4 = $("input[type=radio][name=sex"); $(arr4).each(function(index){ alert($(this).val()+".."+index); }) }); </script> 用戶名：<input type="text" name="uname" value="小劉"/><br /> 密碼：<input type="password" name="pwd" value="123"/><br /> 性別： <input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女<br /> 是否VIP：<input type="radio" name="vip" value="no" />不是 <input type="radio" name="vip" value="yes" />是<br /> </body>
一.3 基本過濾選擇器：
:first 第一個
:last 最後一個
:even 偶數，索引從 0 開始計數
:odd 奇數
:not(..) 除了指定內容 1234 : not(12) == > 34
:eq(index) 獲取指定索引的元素
:gt(index) 大於index索引的元素
:lt(index) 小於index索引的元素
<html> <!--在獲取到一系列標簽對象之後，的一些篩選條件。--> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script> </head> <body> <script> $(function(){ //1、在所有DIV標簽中，獲取第一個div //alert($("div:first").html()); //alert($("div:eq(0)").html()); //2、在所有DIV標簽中，獲取最後一個div //alert($("div:last").html()); //3、在所有DIV標簽中，獲取所有偶數位的div var arr1 = $("div:even"); $(arr1).each(function(index){ alert($(this).html()+".."+index); }) //4、在所有DIV標簽中，獲取所有奇數位的div var arr2 = $("div:odd"); $(arr2).each(function(index){ alert($(this).html()+".."+index); }) //5、在所有DIV標簽中，獲取除了第一位以外所有的div var arr3 = $("div:not(div:first)"); $(arr3).each(function(index){ alert($(this).html()+".."+index); }) //6、在所有DIV標簽中，獲取索引等於1的div alert($("div:eq(1)").html()); //7、在所有DIV標簽中，獲取索引大於1的div var arr4 = $("div:gt(1)"); $(arr4).each(function(index){ alert($(this).html()+".."+index); }) //8、在所有DIV標簽中，獲取索引小於1的div var arr5 = $("div:lt(1)"); $(arr5).each(function(index){ alert($(this).html()+".."+index); }) }) </script> <div>11111111，索引是0</div> <div>22222222，索引是1</div> <div>33333333，索引是2</div> <div>44444444，索引是3</div> <div>55555555，索引是4</div> <div>66666666，索引是5</div> <div>77777777，索引是6</div> <div>88888888，索引是7</div> </body> </html>
一.4表單屬性選擇器:
:checked 選中 ,是單選，覆選 的選中
:selected 選擇 ，是下拉列表中的算則。
:enabled 可用
:disabled 不可用。
<script> $(function(){ //獲取可用的表單輸入項 var arr1 = $("input:enabled"); alert(arr.length); $(arr).each(function(index){ alert($(this).val()+index) }) 獲取不可用的表單輸入項 var arr2 =$("input:disabled"); $(arr).each(function(){ alert($(this).val()); }) 獲取選中的覆選框 var arr3=$("[type=checkbox]:checked") alert(arr3.length) $(arr3).each(function(){ alert($(this).val()); }) //獲取國家下拉框中，被選中的option var arr4=$("#country>option:selected"); $(arr4).each(function(){ alert($(this).val()); }) }); </script> <h1>不可用的表單輸入項</h1> <input type="text" disabled="disabled" /> <input type="button" value
