【jquery入門】學習01
阿新 • • 發佈：2019-01-07
一:什麼是jQuery？為什麼要使用jQuery？
1.jQuery是一個優秀的實用JavaScript庫，內部封裝了很多實現的函式和物件.
2.jQuery是目標是：寫少程式碼，做多事情，是相對於原始javascript+dom的方式而言.3.jQuery是開源的js實用庫.
4.jQuery分為min版和非min版，min版適合真正釋出Web應用，非min版適合學習使用.
5.jQuery在主流的瀏覽器中可以使用.
6.jQuery能夠做dom能做的一切事情.
7.jQuery文件齊全，便用學習.
8.提倡對每個元素節點設定一個id屬性.
9. jQuery沒有將所有的javascript進行封閉，jQuery只爭對它所關注的領域進行封裝.
二:jQuery的開發步驟？
1.$username.val() vs value屬性
2.$username.html() vs innerHTML屬性
3.個人程式碼約束
dom物件 inputElement inputText
jquery物件 $inputinputText
4.開發步驟
1)在需要使用jquery技術的頁面中（html/jsp)，通過<script>標籤引用jquery庫
2)使用jquery常用API（重點）
程式碼實現（jQuery體驗入門）
jquery.jsp:
<head> <title></title> <!-- 引入js檔案 --> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <input id="domID" type="button" value="dom的屬性"> <input id="jqueryID" type="button" value="jquery的屬性"> <div id="divID">哈哈</div> </body> <script type="text/javascript"> //dom方式獲取value的屬性值 var inputElement = document.getElementById("domID"); var inputText = inputElement.value; alert(inputText); //jquery方式獲取value的屬性值 var $input = $("#jqueryID"); var inputText = $input.val(); alert(inputText); //獲取div的內容 var $div = $("#divID"); var divText = $div.html(); alert(divText); </script>
三:DOM物件和jQuery物件相互轉換
1）按照dom規則，通過javascript語法創建出來的物件，叫dom物件2）用jquery語法創建出來的物件，叫jquery物件。
3）jquery物件是對dom物件的封裝，dom中大部份屬性，在jquery封裝後，都變化了方法，更加符合OO的設計規則
4）dom物件轉成jquery物件$(dom物件) 返回值：jquery物件
5）jquery物件可以看作是一個封裝dom物件的陣列，如果只有一個dom物件的話，下標位於0處
方式一:jquery物件[0] 返回值：dom物件
方式二:jquery物件.get(0) 返回值：dom物件
Dom物件轉換成jquery物件：
dom2jquery.jsp
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" id="inputID" value="dom轉成jQuery物件">
</body>
<script type="text/javascript">
//dom轉成jQuery物件
//建立dom物件
var inputElement = document.getElementById("inputID");
//把dom物件轉成jquery物件
var $input = $(inputElement);
//操作jQuery物件的API
var inputText = $input.val();
alert(inputText);
//jQuery轉成dom物件
var inputElement = document.getElementById("inputID");
var $input = $(inputElement);
var inputText = $input.val();
alert(inputText);
</script>jquery物件轉成dom物件的二種方式：
<body>
<div id="divID">hello jquery</div>
</body>
<script type="text/javascript">
//建立jquery物件
var div1 = $("#divID");
//jquery物件轉成dom物件方法一
var divElement = div1[0];
var divText = divElement.innerHTML;
alert(divText);
</script><body>
<div id="divID">hello jquery</div>
</body>
<script type="text/javascript">
//jquery物件轉成dom物件方法二
var div2 = $("#divID");
var divElement = div2.get(0);
var divText = divElement.innerHTML;
alert(divText);
</script>四:DOM操作與jQuery操作對錯誤的處理方式的比較
jquery定位元素節點有三種方式：
方式一：通過id，例如：$("#divID") --------- > getElementById("divID")
方式二：通過標籤名，例如：$("div")------------> getElementsByTagName("div")方式三：通過樣式名，例如：$(".oneClass")
程式碼體現如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM操作與jQuery操作對錯誤的處理方式的比較</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.oneClass {
font-size: 44px;
color: red
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="text" id="usernameID" value="[這就是jQuery]" />
<div id="divID" class="oneClass">這是div中的內容</div>
<script type="text/javascript">
//通過"#id"定位<input>
//var $input=$("#usernameID");
//var inputText=$input.val();
//alert(inputText);
//通過"標籤名"定位<input>
//var $input=$("input");
//var inputText=$input.val();
//alert(inputText);
//通過"樣式名"定位<div>
//var $div=$(".oneClass");
//var divText=$div.html();
//alert(divText); <span style="font-family: Arial, Helvetica, sans-serif;"> </span><body>
<input type="text" id="inputID" value="這是jQuery"/>
<div id="divID" class="oneClass">這是div中的內容</div>
</body>
<script type="text/javascript">
//dom錯誤處理和jquery錯誤處理
//dom錯誤處理
var inputID = document.getElementById("inputID");
if(inputID != null){
var inText = inputID.value;
alert(inText);
}else{
alert("查無此元素節點!");
}
//jquery錯誤處理
var inputElement = $("#inputID");
var inputText = inputElement.val();
//alert(inputText);
</script>需要注意的是：jquery物件只能呼叫jquery物件的方法或屬性，不能呼叫dom物件的方法或屬性，反之一樣。
五：jQuery九類選擇器【在網頁中獲取你需要的節點(參見jQueryAPI.chm手冊)】1）基本選擇器
$("#div1ID")
$("div")
$(".myClass")
$("div,span,p")
$("#div1ID,.myClass,p")
<body>
<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>
</body>
<script type="text/javascript">
//1)查詢ID為"div1ID"的元素個數
//alert($("#div1ID").size());
//alert($("#div2ID").size());
//2)查詢DIV元素的個數(標籤名大小寫不敏感，但id屬性值大小寫敏感)
//alert($("div").size());
//3)查詢所有樣式是"myClass"的元素的個數(標籤名大小寫不敏感，但class屬性值大小寫敏感)
//alert($(".myClass").size());
//4)查詢所有DIV,SPAN,P元素的個數
//alert($("div,span,p").size());
//5)查詢所有ID為div1ID,CLASS為myClass,P元素的個數
alert($("#div1ID,.myClass,p").size());
</script>2）層次選擇器
$("from input")祖先 後代$("form>input")父親 孩子
$("form+input")第一個兄弟
$("form~input")所有兄弟
<body>
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="a"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
</body>
<script type="text/javascript">
//1)找到表單form下[後代]所有的input元素的個數
//alert($("form input").size());
//2)找到表單form下所有的子級[第一級孩子]input元素個數
//alert($("form>input").size());
//3)找到表單form同級[兄弟]第一個input元素的value屬性值
//alert($("form+input").val());
//4)找到所有與表單form同級[兄弟]的input元素個數
alert($("form~input").size());
</script>3）增強基本選擇器
$("ul li:first")
$("ul li:last")
$(":checkbox:not(:checked)")找查所有未選中的複選框
$(":checkbox:checked")找查所有選中的複選框
$("table tr:even")，索引號為偶數
$("table tr:odd")，索引號為奇數
$("table tr:eq(0)"，從0開始
$("table tr:gt(1)"
$("table tr:eq(1)"
$(":header")
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<table border="1">
<tr><td>line1[0]</td></tr>
<tr><td>line2[1]</td></tr>
<tr><td>line3[2]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查詢UL中第一個元素的內容
//alert($("ul li:first").html());
//2)查詢UL中最後個元素的內容
//alert($("ul li:last").html());
//3)查詢所有未選中的input元素個數
//alert($(":checkbox:not(:checked)").size());
//4)查詢表格的1、3、5...奇數行個數，索引號，從0開始
//alert($("table tr:even").size());
//5)查詢表格的2、4、6...偶數行個數，索引號，從0開始
//alert($("table tr:odd").size());
//6)查詢表格中第二行的內容，從索引號0開始
//alert($("table tr:eq(1)").html());
//7)查詢表格中第二第三行的個數，即索引值是1和2，也就是比0大
//alert($("table tr:gt(0)").size());
//8)查詢表格中第一第二行的個數，即索引值是0和1，也就是比2小
//alert($("table tr:lt(2)").size());
//9)給頁面內所有標題<h1><h2><h3>加上紅色背景色
//$(":header").css("color","red");
</script>4）內容選擇器：
$("div:contains('John')")
$("p:empty")
$("div:has(p:has(span))")
$("p:parent")
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
.myClass{
font-size:44px;
color:blue
}
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<p></p>
<p></p>
<div></div>
<script type="text/javascript">
//1)查詢所有包含文字"John"的div元素的個數
//alert($("div:contains('John')").size());
//2)查詢所有p元素為空的元素個數
//alert($("p:empty").size());
//3)給所有包含p元素的div元素新增一個myClass樣式
// alert($("div:has(p:has(span))").size());
//4)查詢所有含有子元素或者文字的p元素個數,即p為父元素
alert($("p:parent").size());
</script>5）可見性選器
$("table tr:hidden")
$("table tr:visible")
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查詢隱藏的tr元素的個數
//alert($("table tr:hidden").size());
//alert($("tr:hidden").size());
//2)查詢所有可見的tr元素的個數
alert($("tr:visible").size());
</script>$("div[id]")
$("input[name='newsletter']")
$("input[name!='newsletter']")
$("input[name^='news']")
$("input[name$='letter']")
$("input[name*='letter']")
$("input[id][name$='letter']")
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
<script type="text/javascript">
//1)查詢所有含有id屬性的div元素個數
//alert($("div[id]").size());
//2)查詢所有name屬性是newsletter的input元素，並將其選中
//$("input[name='newsletter']").attr("checked","checked");
//3)查詢所有name屬性不是newsletter的input元素，並將其選中
//$("input[name!='newsletter']").attr("checked","checked");
//4)查詢所有name屬性以'news'開始的input元素，並將其選中
//$("input[name^='news']").attr("checked","checked");
//5)查詢所有name屬性以'letter'結尾的input元素，並將其選中
//$("input[name$='letter']").attr("checked","checked");
//6)查詢所有name屬性包含'news'的input元素，並將其選中
//$("input[name*='ws']").attr("checked","checked");
//7)找到所有含有id屬性，並且它的name屬性是以"letter"結尾的，並將其選中
$("input[id][name$='letter']").attr("checked","checked");
</script>7）子元素選擇器：
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)")從1開始
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
//1)迭代每個ul中第1個li元素中的內容,索引從1開始
//$("ul li:first")---size---1
//$("ul li:first-child")size---3
//$("ul li:first-child").each(function(){
// //此時this表示<li>元素節點
// //將this這個dom物件轉成jquery物件
// alert($(this).html());
// }
//);
$("ul li:nth-child(2)").each(function(){
alert($(this).html());
});
//2)迭代每個ul中最後1個li元素中的內容,索引從1開始
//$("ul li:last-child").each(function(){
// alert($(this).html());
//});
//3)在ul中查詢是唯一子元素的li元素的內容
//$("ul li:only-child").each(function(){
// alert($(this).html());
//});
</script>8）表單選擇器：
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":input:hidden")
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1)查詢所有input元素的個數
//alert($(":input").size());
//2)查詢所有文字框的個數
//alert($(":text").size());
//3)查詢所有密碼框的個數
//alert($(":password").size());
//4)查詢所有單選按鈕的個數
//alert($(":radio").size());
//5)查詢所有複選框的個數
//alert($(":checkbox").size());
//6)查詢所有提交按鈕的個數
//alert($(":submit").size());
//7)匹配所有影象域的個數
//alert($(":image").size());
//8)查詢所有重置按鈕的個數
//alert($(":reset").size());
//9)查詢所有普通按鈕的個數
//alert($(":button").size());
//10)查詢所有檔案域的個數
//alert($(":file").size());
//11)查詢所有input元素為隱藏域的個數
//alert($(":input:hidden").size());
alert($("input[type='hidden']").size());
</script>9）表單物件屬性選擇器：
$("input:enabled")
$("input:disabled")
$(":checkbox:checked")
$(":checkbox:not(:checked)")
$("select option:selected")
$("select option:selected")
<form>
<input name="email" disabled="disabled" />
<input name="password" disabled="disabled" />
<input name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select>
<option value="1">北京</option>
<option value="2" selected="selected">廣州</option>
<option value="3">上海</option>
</select>
</form>
<script type="text/javascript">
//1)查詢所有可用的input元素的個數
//alert($("input:enabled").size());
//2)查詢所有不可用的input元素的個數
//alert($("input:disabled").size());
//3)查詢所有選中的複選框元素的個數
//alert($(":checkbox:checked").size());
//4)查詢所有未選中的複選框元素的個數
//alert($(":checkbox:not(:checked)").size());
//5)查詢所有選中的選項元素的個數
//alert($("select option:selected").size());
//6)查詢所有選中的選項元素的內容
//alert($("select option:checked").html());
//alert($("select option:selected").html());
</script>六：jQuery中常用方法（上）【在網頁中操作需要的節點】
1）val()：取得標籤的value屬性值
2）html()：取得標籤之間的文字值
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script type="text/javascript">
$("p").each(function(){
//為每一個<p>元素節點新增單擊事件
$(this).click(function(){
//獲取每一個<p>元素節點的內容
alert($(this).html());
})
});
</script>4）css("background-color","red")：設定背景色
5）css("color","red")：設定前景色，即字型色
<table border="1" align="center">
<tr>
<th>使用者名稱</th>
<th>密碼</th>
</tr>
<tr>
<td>張三</td>
<td>123456</td>
</tr>
<tr>
<td>李四</td>
<td>654321</td>
</tr>
<tr>
<td>王五</td>
<td>162534</td>
</tr>
</table>
<script type="text/javascript">
$("table tr:first").css("background-color","pink");
$("table tr:gt(0):odd").css("background-color","yellow");
$("table tr:gt(0):even").css("background-color","blue");
</script> 7）attr("checked","checked")
8）each(函式)
9）click(函式)
<input type="checkbox" value="籃球"/>籃球
<input type="checkbox" value="排球"/>排球
<input type="checkbox" value="羽毛球"/>羽毛球
<input type="checkbox" value="乒乓球"/>乒乓球
<input type="button" value="選中的個數"/>
<input type="button" value="迭代顯示選中的value"/>
<script type="text/javascript">
$(":button:first").click(function(){
alert($(":checkbox:checked").size())
});
$(":button:last").click(function(){
$(":checkbox:checked").each(function(){
alert($(this).val());
});
});
</script>