JQuery基礎

第一章:JQuery簡介

1.簡介

通過$('#m')方法會得到一個$p的jQuery對象晨缴，$p是一個類數(shù)組對象。

這個對象里面包含了DOM對象的信息远搪，然后封裝了很多操作方法劣纲，調用自己的方法html與css，得到的效果與標準的JavaScript處理結果是一致的谁鳍。

通過標準的JavaScript操作DOM與jQuyer操作DOM的對比癞季，我們不難發(fā)現(xiàn)：

1. 通過jQuery方法包裝后的對象，是一個類數(shù)組對象倘潜。它與DOM對象完全不同绷柒，唯一相似的是它們都能操作DOM。

   ?

2. 通過jQuery處理DOM的操作涮因，可以讓開發(fā)者更專注業(yè)務邏輯的開發(fā)废睦，而不需要我們具體知道哪個DOM節(jié)點有那些方法，也不需要關心不同瀏覽器的兼容性問題养泡，我們通過jQuery提供的API進行開發(fā)嗜湃，代碼也會更加精短。

   ?

普通處理瓤荔，通過標準JavaScript處理：

var p = document.getElementById('imooc');
p.innerHTML = '您好净蚤！我是JS處理的p標簽';
p.style.color = 'red';

jQuery的處理：

var $p = $('#imooc');
$p.html('您好！我是JQuery處理的p標簽').css('color','red');

2. JQuery對象轉換為DOM對象

var $div = $('div') //jQuery對象
var div = $div[0] //1.轉化成DOM對象
var div = $div.get(0) //2.通過get()方法,轉化成DOM對象
div.style.color = 'red' //操作dom對象的屬性

3.DOM對象轉化成jQuery對象

var div = document.getElementsByTagName('div'); //dom對象
var $div = $(div); //jQuery對象
var $first = $div.first(); //找到第一個div元素
$first.css('color', 'red'); //給第一個元素設置顏色

4.JQuery選擇器之層級選擇器

第二章:常用方法

1.獲取元素

$(".className")                         //通過class   匹配到的是有class名的所有標簽,不管標簽是否相同
$("#id")                                //通過id名
$("HTML標簽名")                         //通過標簽名
$("HTML標簽名" ".className")            //匹配class名的所有元素下的 HTML標簽名的這個子元素.同$(".className").find("HTML標簽名")
$

2.$(document).ready()

 $(document).ready(function() {
   
  });

3. .addClass( )

給標簽添加類名

可以在原有的class上再添加class 不會影響原有的class

1. .addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名
2. .addClass( function(index, currentClass) ) : 這個函數(shù)返回一個或更多用空格隔開的要增加的樣式名

例1: 給div 再添加類名 father
<div class = "son"></div>
$('div').addClass("father");
=>  <div class = "son father"></div>

例2: 找到類名有 son 的div 給它再添加類名 father
<div class = "son"></div>
<div class = "son2"></div>
$('div').addClass(function(index,className){
  if(className.indexOf('son')!==-1){    //找到類名包含son的這個元素
    $(this).addClass('father')      //this指匹配集合中當前的這個元素
  }
})

4. .removeClass( )

移除class

1. .removeClass( className ) : 為每個匹配元素所要移除的一個或多個樣式名
2. .removeClass( function(index, currentClass) ) : 這個函數(shù)返回一個或更多用空格隔開的將要移除的樣式名

div.removeClass("father");

5. .css( )

獲取元素的屬性

.css( )樣式屬性優(yōu)先級高于addClass( )

$(".father").css("background-color","red");
$('.father').css({"background-color":"red"});

注:

當一個數(shù)只被作為值（value）的時候输硝， jQuery會將其轉換為一個字符串，并添在字符串的結尾處添加px程梦，
例如
.css("width",50}) 與 .css("width","50px"})一樣

'background-color'  也可寫成    'backgroundColor'
'font-size'         也可寫成    'fontSize'

//合并設置,通過對象傳設置多個樣式
        $('.father').css({
            'font-size'     :'15px',
            'background-color' :"blue",
            'border'        :"1px solid red"
        })

6. .prop( )

調整元素的屬性

 $("#target1").prop("disabled","true");  

7. .html( )

添加HTML標簽和文字到元素点把，而元素之前的內容都會被方法的內容所替換掉橘荠。

獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容，具體有3種用法：

1. .html() 不傳入值郎逃，就是獲取集合中第一個匹配元素的HTML內容
2. .html( htmlString ) 設置每一個匹配元素的html內容
3. .html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數(shù)

$("#target4").html("<em>#target4</em>");            //將id為target4的標簽內的內容替換為了強調體的#target4文字

**注:.html( )內部調用的是.innerHTML屬性來處理,即針對的是整個HTML的內容(不僅僅是文本內容)

8. .remove( )

移除HTML元素

$("#target4").remove();                             //將id為target4的這個標簽徹底移除

9. .appendTo( )

將元素從一個標簽移到另一個標簽中

$("#target2").appendTo("#right-well");              //將id為target2的這個元素從它原來的地方移到id為right-well的元素中

10. .clone( )

拷貝元素

有參數(shù)true,若無參,只是單純的克隆節(jié)點結構;若傳參數(shù)true進去,把附帶的事件和數(shù)據(jù)一并克隆了

$("#target5").clone().appendTo("#left-well");       //將id為target5的這個元素復制一份并添加到id為left-well的元素中

11. .parent( )

某個元素的父元素

參數(shù),可選 target.parent() 匹配target集合中的所有元素的父元素

? target.parent("selected") 匹配target集合中的所有元素的并滿足selected要求的父元素

 $("#target1").parent().css("background-color","red");              //匹配id為target1的父元素

 $(".target1").parent(":last").css("background-color","red");       //匹配所有class名為target1的父級元素集合中的最后一個

注:與其很像的 .parents( ) 方法,匹配的是所有元素的祖輩元素,查找模式從里向外,包括body html document

12. .children( )

jQuery是一個合集對象哥童，所以通過children是匹配合集中每一個元素的所有第一級子元素(即僅父子關系)

例1:
$("#right-well").children().css("color","orange");      //匹配id為right-well下的所有子元素

例2:
class名為father的3個div 
<div class = "father">
    <p>p標簽</p>
</div>
<div class = "father">
    <p>p標簽</p>
</div>
<div class = "father">
    <p>p標簽</p>
    <span>span標簽</span>
</div>
$('father').children().css('color','red')               //所有的p標簽以及span標簽都會被匹配改變顏色

children(.selected)內還可以傳參

如例2中,若在最后一步的children()中加入?yún)?shù)

$('father').children(':last').css('color','red')        //則只匹配到了所有集合中的最后一個元素,即只有span標簽會變色

13. :nth-child(n)

某個元素的指定的子元素(n從1開始)

$(".target:nth-child(2)").addClass("animated bounce");  //類名為target的所有元素,他們的第二個子元素

14. :odd

獲取元素中索引為奇數(shù)的所有元素

索引即為下標,下標從0開始

$(".target:odd").addClass("animated shake");

15. :even

獲取元素中索引為偶數(shù)的所有元素

索引即為下標,下標從1開始

$(".target:even").addClass("animated shake");

16. :first

匹配第一個元素

$(".target:first").addClass("animated shake");

17. :last

匹配最后一個個元素

$(".target:last").addClass("animated shake");

18. :not( )

一個用來過濾的選擇去,選擇全部,除了( ) 里的元素

$(".target:not(:fitst)").addClass("animated shake");        //選擇所有有target類名的元素除了第一個

19. :eq( )

語法: :eq( index ) 選擇索引值為index 的元素,index 從0開始

$(".target:eq(2)").addClass("animated shake");              //類名為target的元素中的索引值為2的元素

20. :gt( )

語法: :gt( index ) 選擇索引值大于index 的所有元素

$(".target:gt(2)").addClass("animated shake");

21. :lt( )

語法: :lt( index ) 選擇索引值小于index 的所有元素

$(".target:lt(2)").addClass("animated shake");

22. :header

選擇所有標題元素, 如h1 h2 h3 等

$(":header").css("color","red");

23. :lang( )

語法: :lang(language) 選擇指定語言的所有元素

<div id="n1" lang="en">China(英語)</div>
<div id="n2" lang="EN-US">China(美式英語)</div>
<div id="n3" lang="zh-cn">中國(大陸中文)</div>
<div id="n4" lang="zh-tw">中國(臺灣中文)</div>
<div id="n5" lang="fr">Chine(法語)</div>
<div id="n6" lang="ru">Китай(俄語)</div>

// 選擇了id分別為n3、n4的兩個元素
$(":lang(zh)");

24. :root

選擇這個文檔的根元素

25. :animated

選擇所有在執(zhí)行動畫效果的元素

$(":animated");

26. :contains( )

選擇所有包含指定文本的元素

$(".div:contains('我是div')").css("color", "#CD00CD");        //選擇類名為div的所有包含文本內容為"我是div"的元素

27. :has( )

選擇元素中至少包含指定選擇器的元素

$(".div:has(span)")                                         //選擇類名為div的所有包含span標簽的元素

28. :parent

選擇所有含有子元素或文本的元素

$("a:parent")                                           //選擇所有內容不為空的a標簽

29. :empty

選擇所有沒有子元素或文本的元素(與:parent相反);

$("a:empty")                                            //選擇所有內容為空的a標簽

30. :visible

選擇所有顯示的元素

$(":visible")

31. :hidden

選擇所有隱藏的元素

:hidden選擇器褒翰，不僅僅包含樣式是display="none"的元素贮懈，還包括隱藏表單、visibility等等

我們有幾種方式可以隱藏一個元素：

1. CSS display的值是none优训。
2. type="hidden"的表單元素朵你。
3. 寬度和高度都顯式設置為0。
4. 一個祖先元素是隱藏的揣非，該元素是不會在頁面上顯示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

如果元素中占據(jù)文檔中一定的空間,元素被認為是可見的抡医。
可見元素的寬度或高度，是大于零早敬。
元素的visibility: hidden 或 opacity: 0被認為是可見的忌傻，因為他們仍然占用空間布局。

32. this

this搞监，表示當前的上下文對象是一個html對象水孩，可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象琐驴，可以調用jQuery的方法和屬性值俘种。

$('p').click(function(){
    //把p元素轉化成jQuery的對象
    var $this= $(this) 
    $this.css('color','red')
})

33. val( )

.val()方法只針對表單元素

1. .val()無參數(shù)，獲取匹配的元素集合中第一個元素的當前值

2. .val( value )棍矛，設置匹配的元素集合中每個元素的值

3. .val( function ) 安疗，一個用來返回設置值的函數(shù)

   注:

   1. 通過.val()處理select元素， 當沒有選擇項被選中够委，它返回null

   2. .val()方法多用來設置表單的字段的值

   3. 如果select元素有multiple（多選）屬性荐类，并且至少一個選擇項被選中， .val()方法返回一個數(shù)組茁帽，這個數(shù)組包含每個選中選擇項的值

      例1:對于無selected的下拉框,輸出第一個

      <select id="single">   
         <option>你好</option>
          <option>王先生</option>
      </select>
            console.log($('#single').val())     獲取匹配的元素的集合中的第一個元素的當前值
      =>你好              
      

      例2:對于多個selected,輸出選擇了的內容

      <select id="multiple" multiple="multiple">
              <option selected="selected">王先生c</option>
              <option>你好</option>
              <option selected="selected">帥</option>
      </select>
                console.log($('#multiple').val())       
      =>            王先生,帥
      

   例3:用val( )修改文本內容

   <input type = 'text' value = "我是為被修改的input">
   <script>
    $('input[type=text]').val('我是修改了的input');       //選擇一個表單,修改value的值
   

34. taggleClass( )

toggleClass方法用于addClass( )和removeClass( )直接的切換

通過toggleClass方法動態(tài)添加刪除Class玉罐，一次執(zhí)行相當于addClass，再次執(zhí)行相當于removeClass

$("button").click(function(){
    $("p").toggleClass("main");
  });
  //第一次點擊按鈕,給P標簽添加class  再次點擊移除class

第三章:屬性篩選選擇器

在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫我們定位不同類型的元素潘拨，特別是表單form元素的操作

比如說input[type="text"],input[type="checkbox"]等

[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件

例:

//查找所有div中吊输，屬性name=p1的div元素
         $('div[name=p1]').css("border", "3px groove red"); 
         
         <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
         
//查找所有div中，有屬性p2的div元素
        $('div[p2]').css("border", "3px groove blue"); 
        
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        
//查找所有div中铁追，有屬性name中的值只包含一個連字符“-”的div元素
        $('div[name|="-"]').css("border", "3px groove #00FF00");   
        
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        
 //查找所有div中季蚂，有屬性name中的值包含一個連字符“空”和“a”的div元素
        $('div[name~="a"]').css("border", "3px groove #668B8B"); 
        
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
        
 //查找所有div中，屬性name的值是用imooc開頭的
         $('div[name^=imooc]').css("border", "3px groove red"); 
         
         <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
         
 //查找所有div中，屬性name的值是用imooc結尾的
         $('div[name$=immoc]').css("border", "3px groove blue"); 
         
         <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
         
 //查找所有div中扭屁，有屬性name中的值包含一個test字符串的div元素
        $('div[name*="test"]').css("border", "3px groove #00FF00"); 
        
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        
 //查找所有div中算谈，有屬性testattr中的值沒有包含"true"的div
        $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 
        
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
         

第四章:子元素篩選選擇器

1. :first-child

選擇所有父級元素下的第一個子元素

$('.target:first-child')                //選擇所有類名為target的元素  它們的第一個子元素
$('.target a:first-child')              //選擇所有類名為target的元素下的第一個a標簽元素

:first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素料滥。這相當于:nth-child(1)

2. :last-child

選擇所有父級元素下的最后一個子元素

$('.target:last-child')             //選擇所有類名為target的元素  它們的最后一個子元素

3. :only-child

如果某個元素是其父級元素下的唯一子元素,它就會被選中

4. :nth-child(n)

某個元素的指定的子元素(n從1開始) 從前往后計算

$(".target:nth-child(2)").addClass("animated bounce");  //選擇類名為target的所有元素,他們的第二個子元素

5. :nth-last-child(n)

某個元素的指定的子元素(n從1開始) 從后往前計算

第五章:表單元素選擇器

1.常用表單元素選擇器

? 注:除了input 選擇器,每個表單選擇器都對應一個input的type值

? 如:

$(":password")      還可以表示為      $("[type=password]")

2.表單對象屬性篩選

1. :enabled

選取可用的表單元素

//查找所有input所有可用的（未被禁用的元素）input元素然眼。
        $('input:enabled').css("border", "2px groove red");

2. :disabled

選取不可以的表單元素

//查找所有input所有不可用的（被禁用的元素）input元素。
        $('input:disabled').css("border", "2px groove blue");

3. :checked

選取被選中的<input>元素

//查找所有input所有勾選的元素(單選框,復選框)

     //移除input的checked屬性
    $('input:checked').removeAttr('checked')

注: 在某些瀏覽器中葵腹，選擇器:checked可能會錯誤選取到<option>元素高每，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

4. :selected

選取被選中的<option>元素

//查找所有option元素中,有selected屬性被選中的選項
         //移除option的selected屬性
        $('input:selected').removeAttr('selected')

注:

1. 選擇器適用于復選框和單選框践宴，對于下拉框元素, 使用 :selected 選擇器

第六章: 獲取設置元素屬性

1. .attr( )

1. attr(傳入屬性名)：獲取屬性的值
2. attr(屬性名, 屬性值)：設置屬性的值
3. attr(屬性名,函數(shù)值)：設置屬性的函數(shù)值
4. attr(attributes)：給指定元素設置多個屬性值鲸匿，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

2. .removeAttr( )

.removeAttr( 屬性名) 為匹配到的元素集合中的每一個元素都移除一個屬性

3. .attr()和prop()的區(qū)別

dom中有個概念的區(qū)分：Attribute和Property翻譯出來都是“屬性”，《js高級程序設計》書中翻譯為“特性”和“屬性”浴井。簡單理解晒骇，Attribute就是dom節(jié)點自帶的屬性.

如:

html中常用的id class title align 等用attr();

<div id='target' title='王先生'></div>

而Property是這個DOM元素作為對象，其附加的內容磺浙，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進行取值或賦值等

4. .html( ) 和 .text( ) .val( )的區(qū)別

.text( )

得到匹配元素集合中每個元素的文本內容結合洪囤，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容撕氧。瘤缩，具體有3種用法：

1. .text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代

2. .text( textString ) 用于設置匹配元素內容的文本

3. .text( function(index, text) ) 用來返回設置文本內容的一個函數(shù)

   注:返回的是一個字符串,包含所有匹配到的元素的文本集合.

   ?

   ?

   .html與.text的異同:

1. .html與.text的方法操作是一樣伦泥，只是在具體針對處理對象不同
2. .html處理的是元素內容剥啤，.text處理的是文本內容
3. .html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用
4. 如果處理的對象只有一個子文本節(jié)點不脯，那么html處理的結果與text是一樣的
5. 火狐不支持innerText屬性府怯，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持防楷，所以可以兼容所有瀏覽器