簡介：

jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。

Jquery的語法與js和css的區別與聯系：

1.選擇器

css選擇器：
   基本選擇器：*  # . p
   組合選擇器：p,h    p h   p+h   p>h
   屬性選擇器：[class=‘aaa‘]     div[id]

js中DOM節點查找： 直接查找
                  導航屬性查找   6種
                          children
                          parentElement
 

                          firstElementChild
                          lastElementChild
                          nextElementSibling
                          previousElementSiling

jquery
   選擇器：
     基本選擇器
     層級選擇器
     屬性選擇器
         表單選擇器

   篩選器：
     $(‘li:eq(2)‘)
     過濾篩選器：$(‘li‘).eq(2)
     查找篩選器：children  find
 

                 next  nextall nextUntill
                 prev  prevAll prevUntill
                 parent  parents  parentUntil
                 siblings


2.文本節點（文檔操作）
JS和Jquery節點操作比較
JS：createElement
    appendChind
    insertBefore
    removeChind
    replaceChild

Jquery文檔操作：
    append  prepend       父節點添加子節點
 

    appendTo  prependTo     子節點添加到父節點

    after   before         兄弟標簽添加
    insertAfter   insertBefore

    replaceWith        替換
    empty     清空標簽內容
    remove     刪除標簽
    clone      克隆一個新的標簽

3.屬性操作


   js節點屬性操作：
      arribute屬性：  setAttribute(name,value)
                      getAttribute(name)
                      removeAttribute()
      class屬性：
                 node.className
                 node.classList.add()
                 node.classList.remove()
      node節點的值：innerText
                    innerHTML
      css屬性:
             node.style.color
      創建一個標簽：$(‘<p>‘)


jquery屬性：
      固有屬性: prop()  removeProp()
      自定義屬性:attr()   removeAttr()
      class屬性：
              addClass()
              removeClass()
      node節點的值：
                  html()
                  text()
                  val()    針對固有屬性
      css屬性：
              $().css(‘color‘,‘red‘)
              位置：  $().offset({left:0,top:0})  偏移量
                      $().position()
                      $().scrollTop()
                      $().scrollLeft()
              尺寸：$().height()   內容高度
                    $().width()    內容寬度
                    $().innerHeight() 加padding
                    $().innerWidth()
                    $().outerHeight() 加邊框
                    $().outerWidth()
                    $().outerHeight() 加margin
4.Jquery其他
jquery動畫效果：show  hide  toggle
                slideDown   slideUp   slideToggle
                fadeDown    fadeUp    fadeToggle
                回調函數
jquery循環：$.each（obj,fn）
     方式一： 遍歷數組或字典
              $.each(array,function(i,j){})       i:索引  j：元素值
              $.each({key:value},function(i,j){})  i: key      j:value

     方式二： 遍歷節點對象
              $(‘elector‘).each(function(){
                     $(this)})
5.事件綁定
JS
事件綁定方式一：
         <p onclick=func(this)>ppppp</p>
         function func(self){
          self                               self:當前操作標簽     DOM對象
          $(self)}                           $(self):當前操作標簽      Jquery對象


事件綁定方式二：
      var ele=document.getElementByid(‘‘)
      ele.onclick=function(){
        this                                    this:當前操作標簽     DOM對象
        $(this) }                               this:當前操作標簽      Jquery對象



this在全局，代指window對象

Jquery
事件綁定方式：
       $.bind(‘click‘,function(){})
       $(‘‘).click(function(){
            $(this)})
       $(‘‘).on(‘click‘,[selector],function(){})


Jquery事件：
         頁面加載: $(document).ready
         事件處理：on   off
         事件切換：hover（func1,func2）
         事件：blur
               change
               click
               dblclick
               focus
               keydown
               keyup
               keypress
               mouseover
               mouseout
               mouseleave
               mouseenter
               scroll
               select
               submit
               unload

6.擴展方法：插件
   1 $.extend({
     name: function(){};
     })
   2 $.fn.extend({
     name: function(){};
   })

Jquery基礎（二）