一片文章叫你玩轉JQuery
阿新 • • 發佈：2019-01-26
1.為什麼要學習jQuery？
js的缺點：
1）花費10天時間開發設計，js中有很多的漏洞；不適合於大系統的開發。
2）獲取dom元素時，是很不靈活的，主要通過4個方法。
3）方法的長度太長，記憶難度比較大。
4）方法還有瀏覽器大戰遺留下的問題，開發時需要做相容性處理。
若像CSS一樣獲取DOM元素：
[1] id選擇器：#id名稱
[2] class 選擇器：.className
[3] 標籤選擇器：tagName
2.jQuery 的簡介：
1）jQuery 是 js 的庫檔案，對js做了封裝。類似於jar包的概念。
2）jQuery 可以像CSS一樣獲取DOM元素。
3）jQuery 提供了很多的方法，方便對DOM元素的操作。
4）jQuery 提供了很多的外掛，方便開發者使用。（jQuerySchool）
5）jQuery 社群網站特別的繁榮。
3.jQuery 在開發領域：佔了舉足輕重的作用；
一個專案而言：一半java一半jQuery.
選擇器是jQuery的核心重點，要操作dom元素，首先要通過選擇器獲取DOM元素
所有的選擇器（除了過濾方法），其他的都是css選擇器。
1.基本選擇器：
[1] id選擇器：#id名稱
[2] class選擇器：.className
[3] 標籤選擇器：tagName<div id="oDiv">div元素</div> <h1 class="cls">H1 元素</h1> <h2 class="cls">H2 元素</h2> <h3 class="cls">H3 元素</h3> <ul> <li>吃飯</li> <li>睡覺</li> <li>淘寶雙11</li> </ul> <!-- 1.引入jquery的庫檔案 --> <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> <script type="text/javascript"> //ID選擇器 $("#oDiv").css("color","red"); //class選擇器 $(".cls").css("color","green"); //標籤選擇器 $("li").css("color","blue"); </script>
2.層級選擇器：查詢某個元素下的子元素或者後代元素
[1] parent > child : 查詢parent下所有的子元素
[2] parent child : 查詢parent下所有的後代元素<body> <div id="haha"> <p>你好1</p> <p>你好2</p> <p>你好3</p> </div> <div> <p>你好4</p> <p>你好5</p> <p>你好6</p> </div> <ul id="ul"> <li> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </li> </ul>
3.基本過濾選擇器：從一堆dom元素中，過濾出需要的元素
[1] :first , 獲取第一個元素
[2] :last , 獲取最後一個元素
[3] :eq(index) , 獲取第index個元素，index下標從0開始
[4] :gt(index) , 獲取>index的元素，index下標從0開始
[5] :lt(index) , 獲取<index的元素，index下標從0開始
[6] :even , 獲取偶數行元素，以下標為準 0,2,4 ...
[7] :odd , 獲取奇數行元素，以下標為準 1,3,5 ...<!-- 1.引入jquery的庫檔案 --> <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> <script type="text/javascript"> //:first , 過濾出第一個元素 $("tr:first").css("background","red"); //:last , 過濾出最後一個元素 $("tr:last").css("background","blue"); //:eq(index) : 將第三行設定黃色 $("tr:eq(2)").css("background","yellow"); //:gt(index) greater $("tr:gt(3)").css("background","green"); //:lt(index) letter $("tr:lt(2)").css("background","gray"); //實現隔行變色 //:even $("tr:even").css("background","pink"); //:odd $("tr:odd").css("background","orange"); </script>
4.過濾方法
[1] eq(index) : 通過下標獲取元素，等價於 :eq(index)
[2] first() : 獲取第一個元素，等價於 :first
[3] last() : 獲取最後一個元素，等價於 :last
[4] next() : 獲取緊挨著的下一個同胞元素
[5] prev() : 獲取緊挨著的上一個同胞元素
[6] siblings() : 獲取所有的同胞元素
[7] parent() : 獲取父元素
[8] parents(選擇器) ： 通過選擇器獲取任何一個祖先元素
[9] find(選擇器) ：通過選擇器查詢後代元素，等價於後代選擇器<body> <div>table 之前的div元素</div> <table border="1" cellpadding="5" cellspacing="0" width="500"> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> <td>地址</td> </tr> <tr> <td>張三</td> <td>23</td> <td>男</td> <td>北京海淀</td> </tr> <tr> <td>李四</td> <td>44</td> <td>女</td> <td>北京通州</td> </tr> <tr> <td>王五</td> <td>67</td> <td>男</td> <td>北京昌平</td> </tr> <tr> <td>趙六</td> <td>88</td> <td>女</td> <td>北京朝陽</td> </tr> <tr> <td>錢琪</td> <td>25</td> <td>女</td> <td> <button id="del">刪除</button> </td> </tr> </table> <h1><></h1> <h1>哈哈</h1> <!-- 1.引入jquery的庫檔案 --> <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> <script type="text/javascript"> //first() : 獲取第一個元素 //獲取第一個tr var first = $("tr").first(); first.css("background","green"); //last() : 獲取最後一個元素 //獲取最後一個tr $("tr").last().css("background","red"); //eq(index) : 獲取第index個元素，index從0開始 $("tr").eq(2).css("background","gray"); //next() ： 獲取緊挨著的下一個同胞元素 //獲取table緊挨著的下一個同胞元素 $("table").next().css("color","red"); //prev() : 獲取緊挨著的上一個同胞元素 //獲取table緊挨著的上一個同胞元素 $("table").prev().css("font-size","30px"); //siblings() : 獲取所有的同胞元素 //獲取table所有的同胞元素 console.log($("table").siblings()); //parent() : 獲取父元素 //獲取table的父元素 console.log($("table").parent()); //parents(選擇器) : 獲取任何一個祖先元素 //獲取id=del的祖先元素tr console.log($("#del").parents("tr")); //find(選擇器) ：通過選擇器查詢後代元素 //在table中查詢id=del的後代元素 $("table").find("#del").css("color","blue"); </script>
5.屬性過濾選擇器
1）[屬性名稱=屬性值] ： 獲取“屬性名稱=屬性值“的元素，經常用在獲取表單元素UserName : <input type="text" name="username" /> Password : <input type="password" name="pwd" /> <!-- 1.引入jquery的庫檔案 --> <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> <script type="text/javascript"> //屬性過濾選擇器,一般用在獲取表單元素，因為表單元素必有name屬性 //查詢 name=username的input元素 $("input[name=username]").css("border","2px solid red"); //查詢name=pwd的input元素 $("input[name=pwd]").css("border","2px solid green"); </script>
6.子元素過濾選擇器：根據層次關係過濾需要的元素
[1] :first-child , 獲取第一個子元素
[2] :last-child ， 獲取最後一個子元素
[3] :nth-child(index) , 獲取任何一個子元素 index ：從1開始<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> <!-- 1.引入jquery的庫檔案 --> <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> <script type="text/javascript"> //1.先獲取 ul下所有的li元素 //2.刷選出第一個元素 //$("ul li:first").css("background","red"); //子元素過濾選擇器 //1.查詢所有的ul //2.查詢每個ul下邊第一個子元素 $("ul li:first-child").css("background","red"); $("ul li:last-child").css("background","green"); $("ul li:nth-child(2)").css("background","blue"); </script>
7.表單過濾選擇器：獲取表單元素
:checked , 獲取選中的checkbox或者radio<body> 性別： <input type="radio" value="男" name="sex">男 <input type="radio" value="女" name="sex">女 興趣： <input type="checkbox" value="吃飯" />吃飯 <input type="checkbox" value="睡覺" />睡覺 <input type="checkbox" value="打豆豆" />打豆豆 <input type="checkbox" value="淘寶雙11" />淘寶雙11 <input type="checkbox" value="LOL" />LOL <button id="btn">獲取選中的checkbox</button> <!-- 1.引入jquery的庫檔案 --> <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> <script type="text/javascript"> document.getElementById("btn").onclick = function() { //獲取選中的checkbox console.log($("input:checked")); //只獲取選中的radio console.log($("input[name=sex]:checked")); } </script>
jQuery為了簡化事件的處理，封裝了一套事件方法
事件方法：
事件屬性去掉on就是事件方法
1.事件的新增方式：
$(選擇器).事件方法(事件處理函式);
2.常用事件：
[1] 點選事件 ：click(fn);fn:事件處理函式$("button").click(function() { alert("點選事件觸發"); });
[2] 失去焦點事件：blur(fn);fn:事件處理函式$("input[name=username]").blur(function() { console.log("失去焦點事件") });
[3] 獲取焦點事件：focus(fn);fn:事件處理函式$("input[name=username]").focus(function() { console.log("獲取焦點事件") });
[4] 內容改變事件：change(fn);fn:事件處理函式$("input[name=username]").change(function() { console.log("內容改變了"); });
[5] 表單提交事件：submit(fn);fn:事件處理函式$("form").submit(function() { alert("表單提交了"); //通過返回值可以控制表單的提交，返回true是提交表單；返回false是阻止提交表單 return true; });
1）隱藏和顯示：通過改變透明度、寬度以及高度來隱藏顯示元素
show(time) : 花費time毫秒顯示元素
hide(time) : 花費time毫秒隱藏元素
1.ready的事件：
1）當文件載入完畢時，會執行ready事件。
2）ready事件的使用：
完全體：
$(document).ready(function() {
});
簡化版：
$(function(){
})
3）onload 事件和 ready 事件的區別？
1）onload 事件一個網頁只能有一個；
ready事件，一個網頁中可以有多個，非常適合團隊開發；彼此程式碼互不干擾。
2）onload 等文件載入完畢時觸發，要等整個資源(圖片,視訊,音訊)都載入完畢；
ready事件，等文件結構載入完畢，不用管資源是否載入完畢。
2.jQuery物件和DOM的轉換問題：
1） DOM物件 ： 所有的HTML元素，js認為都是DOM物件.
2) jQuery物件 ： $ 函式的返回值，都是jQuery物件.
3) 聯絡：
jQuery 物件中儲存了DOM物件，可以對DOM物件進行操作。
4）DOM物件轉換為jQuery物件：
var jQuery物件 = $(DOM物件);
5）jQuery物件轉換為DOM物件：
[1] 通過陣列的索引獲取DOM物件：var btn1 = btns[1];[2] 通過jQuery物件的get(index) ： var btn1 = btns.get(0);
你兒時望著的月亮
從離家那晚跌落了東山
就沒再爬起過