Jquery基礎
1.$(element)
定義和用法
element 選擇器選取帶有指定標籤名的元素。
標籤名引用 HTML 標籤的 < 與 > 之間的文本。
<script src="./jquerytest/jquery-1.7.1.min (2).js"></script>//配置的jquery
<script type="text/javascript">
function test1()
{
$(document).ready(function(){
$("span").css("color","red");//使用element
})
}
2.$().each
function testA(){
var divArr = document.getElementsByTagName("div");
for(var i=0;i<divArr.length;i++){
alert(divArr[i].innerHTML);//innerhtml獲取標籤內容 val 獲取文本框內容
}
}
function testB(){
$("div").each(function(){
alert($(this).text());
});
}
拓展
關於JQuery中的.each()與().each的理解
在學習JQuery中，對於().each方法遇見了.each,在這裏記錄自己對於這兩個東西的理解想、進行記錄。
一、$().each
在w3c中對each()的定義是規定爲每個匹配元素規定運行的函數。
語法：$(selector).each(function(index,element){
})
參數：index(選擇器index的位置);element(當前的元素（也可使用
“this” 選擇器）)
例子:定義四個div並用each遍歷其中的文本
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
$(".item").each(function(){
alert($(this).text());
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
這段代碼是彈出1,2,3,4.
對於這個方法，在對DOM操作的時候用的比較多
二、$.each();
用於遍歷任何的集合(無論是數組或對象),如果是數組,回調函數每次傳入數組的索引和對應的值(值亦可以通過this 關鍵字獲取,但javascript總會包裝this 值作爲一個對象,儘管是一個字符串或是一個數字),方法會返回被遍歷對象的第一參數。
從each()方法前綴我們也可以知道這兩個方法的區別。$().each,前面是JQuery選擇器，是選擇的元素對象。而$.each,前面是JQuery對象，數組或者對象都是Jquery對象，這裏又反應了Js中萬物皆對象。
語法：$.each(obj,function)
參數：obj：你所要遍歷的對象或者數組；function：你所遍歷要運行的函數。
例子1：遍歷一個json數據
var Json = {'name':'Tom','age':28,'sex':'man'};
$.each(Json,function(key,val){
alert(obj[key]); //Tom,28,man
//alert(val); //同樣一次彈出Tom，28，man；類型均爲字符串
})- 1
- 2
- 3
- 4
- 5
例子2：
function testC(){
var divArr = $("div");
$.each(divArr, function(i, div){
alert( "第" + ++i + "個元素: " + $(div).html());
});
}3.selector1,selector2,selectorN
V1.0概述
將每一個選擇器匹配到的元素合併後一起返回。
你可以指定任意多個選擇器，並將匹配到的元素合併到一個結果內。
描述:
找到匹配任意一個類的元素。
HTML 代碼:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery 代碼:
$("div,span,p.myClass")結果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]function testC(){
var classArr = $("#a1,div,span,p.myClass");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "個元素: " + $(obj).html());
});
}
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<hr>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<h1 id="a1">多多聯繫</h1>
<p class="notMyClass">p class="notMyClass"</p>
<input type="button" value="點我1" onclick="testA()"/>
<input type="button" value="點我1" onclick="testC()"/>
</body>4.parent > child
概述
在給定的父元素下匹配所有的子元素
function testB(){
var classArr = $("form > input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "個元素: " + $(obj).val());
});
}
<body>
<form>
<label>Name:</label>
<input name="name" />-----------------------------顯示（子）
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />----不顯示（孫子）
</fieldset>
</form>
<input name="none" />----沒有在指定標籤下
<form>
<label>Name:</label>
<input name="name" />-----------------------------顯示
5.parent child
概述
在給定的父元素下匹配所有的子、孫子元素
function testC(){
var classArr = $("form input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "個元素: " + $(obj).val());
});
}6.prev + next
概述
匹配所有緊接在 prev 元素後的 next 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("label + input")
結果:
[ <input name="name" />, <input name="newsletter" /> ]function testF(){
var classArr = $("label + input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "個元素: " + $(obj).val());
});
}