jQuery選擇器及jQuery基本操作

吐血整理，如有錯誤，歡迎指出，感激不盡~

1. jq選擇器

• jq的選擇器，就是在執行jq函數時傳參
• 是用來獲取DOM元素的方法，通過下標可以獲取其中某一個DOM元素
• $ 函數不管使用選擇器選中了幾個元素，$函數的返回值都是一個對象（僞數組）
• jq選擇器是jq最核心的內容，大大簡化的了DOM對象的查詢
• css1-css3的選擇器，都可以當做$函數的參數，如下：

Id選擇器: $("#box");
Class選擇器: $(".box");
標籤選擇器: $("span");
通配符選擇器: $("*");
包含選擇器:  $("#box p");
子選擇器: $("#box>p");
羣組選擇器: $("#box,.cont,p");
屬性選擇器: $("input[type=button]");

• 還有一些特殊的選擇器，如下：

$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even");

• 及jq的篩選器（對選擇器獲取到的一組標籤對象進行篩選，便於鏈式編程），如下：

.first(): 匹配第一個
.last(): 匹配最後一個
.eq(): 匹配指定下標
.find(): 匹配指定的後代元素
.children(): 匹配指定的子元素
.prev(): 匹配上一個兄弟
.prevAll(): 匹配上面所有的兄弟
.next(): 匹配下一個兄弟
.nextAll(): 匹配下面所有兄弟
.siblings(): 匹配所有兄弟,不管上下
.parent(): 匹配直接父級
.parents(): 匹配所有父級
.end(): 匹配鏈式編程選擇器的上一級

• jq的$函數類似於原生就是document.querySelectorAll()
• 實際上先有jq，然後原生js纔有了querySelectorAll()
• 原生js的DOM對象和jq的DOM對象的轉換方式：

// 原生js轉jq
    $(原生DOM對象);
// jq轉原生js
    jqDOM對象[0];

• jq選擇器的使用方法如下，部分舉例，希望大家可以舉一反三哦~~

// 屬性
$("input[abc=hello][qwe]").css("background","red");

// 包含：後代
$(".msg h2").css("background","red");

// 羣組：
$("#box,.cont,span").css("background","red");

// 包含：子
$(".msg>h2").css("background","red");

// 下一個兄弟
$(".msg+span").css("background","red");
// 下面所有兄弟
$(".msg~span").css("background","red");

// 指定索引，從0開始
$(".cont:eq(1)").css("background","red");

// 第一個或最後一個
$(".list li:first").css("background","red");
$(".list li:last").css("background","red");

// 第奇數個或第偶數個
$(".list li:odd").css("background","red");
$(".list li:even").css("background","red");

// 匹配所有兄弟
$(".list").siblings().css("background","red");

// 匹配直接父級或所有父級
$(".xbox").parent().css("border","solid 1px black");
$(".xbox").parents().css("border","solid 1px black");

// 簡單連綴
$(".list").children("li").eq(3).end().css("background","red");

---

2. 屬性操作

原生JS設置屬性方式如下：

ele.setAttribute()
ele.getAttribute()

那麼來看jq，如下：

①.attr()方法：
attr()：

標籤對象.attr(屬性): 獲取指定屬性的屬性值
標籤對象.attr(屬性 , 屬性值): 設定屬性和屬性值
標籤對象.attr(自定義屬性 , 屬性值): 設定自定義屬性和屬性值

注意：jq中的設置方法一般都可以爲全部選中的元素設置，也就是說atrr方法內部自帶了循環操作。而獲取方法一般只能 獲取第一個選中的元素。設置屬性時，直接顯示在標籤上，爲可見的內置或自定義。

removeAttr()：

$('.box').removeAttr('name');
// 刪除所有類名爲box的name屬性

②.prop()方法:
prop():

標籤對象.prop(屬性)： 獲取指定屬性的屬性值
標籤對象.prop(屬性 , 屬性值)： 設定屬性和屬性值
標籤對象.prop(自定義屬性 , 屬性值)： 設定自定義屬性和屬性值

注意： 設置內置屬性時，可以直接顯示在標籤上，爲 可見的內置屬性 設置自定義屬性時，不會直接顯示在標籤上，爲不可見的自定義屬性。

removeProp():刪除指定的屬性，多用於自定義屬性。

---

3. Class操作

最常用的一個屬性操作是類名。
原生JS操作方式如下：

ele.className = 'item';

那麼來看jq，如下：

hasClass(class): 判斷標籤是否具有某個class，返回布爾值。
addClass(class) ：爲每個匹配的元素添加指定的類名。
removeClass(class) ：從所有匹配的元素中刪除指定的類。
toggleClass(class)：如果存在（不存在）就刪除（添加）一個類。

示例代碼（1）：

$('.box').hasClass('item');
$('.box').addClass('item');
$('.box').removeClass('item');
$('.box').toggleClass('item');	

示例代碼（2）：

①hasClass:

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

②addClass：

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

③removeClass：刪除最後一個元素上與前面重複的class。

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

④toggleClass：根據父元素來設置class屬性。

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

---

4. 樣式操作

（1）原生JS操作方式如下：

ele.style.width
getComputedStyle

（2）那麼來看jq，如下：

標籤對象.css(屬性)：獲取指定屬性的屬性值
標籤對象.css(屬性 , 屬性值) ： 設定屬性以及屬性值
標籤對象.css({屬性 : 屬性值}) ：以對象的形式,設定屬性以及屬性值，也可以同時設定多個屬性，屬性定義的方式比較靈活

示例代碼：

$('.box').css('width',100)
//將類名爲box的元素寬度設置爲100
$('.box').css('width')
//獲取第一個類名爲box的元素的寬度

（3）注意：

當用.css({屬性 : 屬性值}) 這種方法時，因爲是對象的形式，所以，其背景顏色（background-color）、行高（line-height）、字體大小（font-size）等這種由兩個單詞中間加中劃線組成的屬性在書寫時，要注意去掉中劃線，並寫成小駝峯模式。“px”可以省略（但行高（line-height）除外，如果“px”省略，則變成倍數）。

示例代碼：

$("#box").css({
    width:"100px",
    height:200,
    background:"red",
    opacity:0.5,
    fontSize:30,
    lineHeight:"100px"
});

---

5. 內容操作

（1）原生JS操作方式如下：

ele.innerHTML = '< h2 >ddd< /h2 >';
ele.innerText = '< h2 >aaa< /h2 >';
ipt.value = 'zhangsan'

（2）那麼來看jq，如下：

.html()：獲取或者設置元素的html內容，這個函數不能用於XML文檔。但可以用於XHTML文檔。在一個 HTML 文檔中，我們可以使用 .html() 方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素，那麼只有第一個匹配元素的 HTML 內容會被獲取。
.text()：獲取或者設置元素的文本內容，結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
.val()：獲取或者設置輸入框的內容，在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。

示例代碼（1）：
總結就是：沒有參數是獲取，有參數是設置。

$('.box').html();		// 獲取
$('.box').html('aaa');   // 設置

$('.box').text();		// 獲取
$('.box').text('aaa');  // 設置


$('.ipt').val();		// 獲取
$('.ipt').val('aaa');   // 設置

示例代碼（2）：
.html()：

$("p").html(function(n){
    return "這個 p 元素的 index 是：" + n;
    });

.text()：

$("p").text(function(n){
    return "這個 p 元素的 index 是：" + n;
    });

.val()：

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

---

6. 尺寸操作

• height([val])：取得匹配元素當前計算的高度值（px）。參數的意思是：設定CSS中 ‘height’ 的值，可以是字符串或者數字，還可以是一個函數，返回要設置的數值。函數接受兩個參數，第一個參數是元素在原先集合中的索引位置，第二個參數爲原先的高度。

示例如下：以 50 像素的幅度增加 p 元素的高度。

  $("button").click(function(){
    $("p").height(function(n,c){
    return c+50;
    });
  });

• width([val])：取得第一個匹配元素當前計算的寬度值（px）。設定CSS中 ‘width’ 的值，可以是字符串或者數字，還可以是一個函數，返回要設置的數值。函數接受兩個參數，第一個參數是元素在原先集合中的索引位置，第二個參數爲原先的寬度。

示例如下：以 50 像素的幅度增加 p 元素的寬度。

  $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });

注意：以下所有示例的HTML代碼爲：

<p>Hello</p><p>world</p>

• innerHeight()：獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

• innerWidth()：獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

• outerHeight()：獲取第一個匹配元素外部高度（默認包括補白和邊框）。此方法對可見和隱藏元素均有效。參數設置爲 true 時，計算邊距在內。

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

• outerWidth()：獲取第一個匹配元素外部寬度（默認包括補白和邊框）。此方法對可見和隱藏元素均有效。參數設置爲 true 時，計算邊距在內。

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

• offset([coordinates])：獲取匹配元素在當前視口的相對偏移。返回的對象包含兩個整型屬性：top 和 left，以像素計。方法只對可見元素有效。值對：比如 {top:100,left:0}

代碼①：

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

代碼②：

$("p:last").offset({ top: 10, left: 30 });

• position()：獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效。

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

---