jQuery學習筆記
一、jQuery的常用方法使用示例
1 // 頁面加載之後執行 2 $(function(){ 3 // 事件的綁定方式1 4 $("#bt3").bind("click",function(){ 5 var old= $("#img_id").prop("width"); 6 $("#img_id").prop("width",old+100); 7 }); 8 9 // 事件的綁定方式2 10 $("#bt4").click(function(){ 11 //操作屬性值12 var old= $("#img_id").prop("width"); 13 $("#img_id").prop("width",old-100); 14 //操作value值 15 this.value;//this獲取的js對象,所以要使用value來獲取屬性值 16 var value= $(“#username”).val();//獲取value屬性的屬性值 17 $(“#username”).val(“aa”); //設置value屬性的屬性值,value方法只能用於：包含“value”屬性的表單18 //操作html內容 19 var str = $(“#aid”).html(); 20 $(“#divid”).html(“<a href=“#”>abced</a>”); 21 //操作文本 22 var str = $(“#aid”).text(); 23 $(“#pid”).text(“abced”); 24 //操作css屬性 25 $(“#pid”).css(“color”,“red”); 26 }); 27 );
二、jQuery基礎知識
1 jquery對象和js對象的互相轉換
1.1 認識兩者的不同
a. 來源不同
- 通過“document.getElementById()”獲得對象是：js對象。
- 通過“$(選擇器)”獲得對象是：jquery對象
b. 使用方式不同
- js對象，使用屬性，進行操作
- jquery對象，使用方法進行操作（示例中所有方法等)
c. 如何判斷是jquery對象和js對象（重點）
- 假定有一個對象，放在這裏，如何判斷，他是js對象，還是Jquery對象？
- 感知法：
- alert(item.innerHTML);
- alert(item.html());
- 感知法：
1.2 js對象 --> jquery對象
1.2.1 js對象--> jquery對象
a. 語法
- 把js對象p轉換成jQuery對象： $(p)，特別註意，不要寫成： $p, $("p")
b. 演示
// 獲得js對象
var js_item =document.getElementById("h1_id");
// 轉換成jquery對象(推薦用“$”便於區別,不是強制要求)
var $jquery_item = $(js_item);
// jquery對象使用jquery方法
$jquery_item.css("background-color","red");
1.2.2 jquery對象 --> js對象
a. 語法
- 把jQuery對象(q)轉換成js對象：q[0]或者q.get(0)
b. 演示
-- 準備數據
<h1 id="h1_id">我是中國人</h1>
--js代碼
// 獲得jquery對象
var #jquery_item = $("#h1_id");
// 轉換成js對象(方式1)
var js_item1=#jquery_item[0];
alert(js_item1.innerText); //使用js方法
// 轉換成js對象(方式2)
var js_item2=#jquery_item.get(0);
alert(js_item2.innerText); // 使用js方法
2 jquery的加載順序
2.1. 定義
- 和js一樣，jquery也存在加載順序問題。
- jquery自己封裝了一個document的ready方法，即“頁面加載完成時”觸發該方法。
2.2 語法
- $(document).ready(當頁面加載完成時要執行的函數)
2.3 特點
- $(document).ready(當頁面加載完成時要執行的函數)，其作用類似於：js中window的onload事件
- 兩者對比來看，ready事件執行時機比onload事件早，另外，可以多次執行。
2.4 使用演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 加載完直接彈框
$(document).ready(function(){
alert("加載完直接彈框");
}
);
// 加載後完成按鈕的綁定
$(document).ready(function(){
$("#but_id").bind("click",function(){
alert("點擊了測試按鈕");
});
});
</script>
</head>
<body>
<input id="but_id" type="button" value="測試"/><br>
</body>
</html>
2.5 偷懶的寫法
$(當頁面加載完成時要執行的函數)
$(function(){});
3 選擇器獲得多個元素的遍歷方法
3.1 獲得元素的個數
a. 使用演示
- $("h1").length
3.2 each方法--jquery方法
a. 語法
- $(selector).each(function(index,element))
// 留心這裏，element是js對象，表示元素的索引（次序）
b. 使用
--準備數據
<h1 class="bbb">aaa<strong>bbb1</strong>ccc</h1>
<h1 class="bbb">aaa<strong>bbb2</strong>ccc</h1>
<h1 class="bbb">aaa<strong>bbb3</strong>ccc</h1>
$("h1").each(function(index, element){
alert(index);
alert(element.innerText);
});
3.3 each搭配this使用
$("h1").each(function(index){
alert(index);
alert(this.innerText); // 留心這裏：this是js對象
});
jQuery學習筆記