Jquery 隨便寫些知識點

針對jQuery隨便寫些覺得還挺實用的一些東西，也沒系統的去理一番，只是想到哪寫到哪，寫的不完全也請多見諒。

jQuery和其他javascript庫產生$符號沖突了？
$符號想必用jQuery的人都不生疏，$即代表着jQuery函數。然而$符號並不是jQuery私有的一個符號，其他javascript庫也可以使用$符號作為他們的主函數。那么，當我們用的其他的庫與jQuery庫發生$符號沖突時該怎么辦呢？
我們用代碼來驗證下：

  console.log(jQuery === $); //true
  jQuery.noConflict();
  console.log(jQuery === $); //false
  var $jq = jQuery.noConflict();
  console.log(jQuery === $jq); //true

來看看jQuery.noConflict方法的源碼：

  jQuery.noConflict = function( deep ) {
      if ( window.$ === jQuery ) {
          window.$ = _$;
      }
      if ( deep && window.jQuery === jQuery ) {
          window.jQuery = _jQuery;
      }
      return jQuery;
  };

看了上面的源碼部分，假設我們給jQuery.noConflict()的括號內傳了任何有值的參數(非undefined/null/NaN/""空字符串等)，那么這時候再去看window.jQuery，他就會變成undefined了。所以給jQuery.noConflict()這個函數傳參是指需要深入銷毀window下的jQuery函數。

什么是jQuery對象？什么是DOM對象呢？兩者又有什么區別呢？
首先，我必須聲明下：要分清jQuery對象和DOM對象！要分清jQuery對象和DOM對象！要分清jQuery對象和DOM對象！ 重要的事情說三遍，希望這點有引起注意。
DOM對象是通過JavaScript的getElementById或者getElementsByTagName獲取的元素對象，它定義了訪問HTML文檔對象的一套屬性、方法和事件。。如：

  var div = document.getElementById("myDiv"); // 獲取需要進行操作DOM元素
  div.innerHTML = "Hello World"; // 給這個元素加入內容:Hello World
  div.style.color = "red"; // 給這個DOM元素一個樣式--顏色為紅色

jQuery對象是用jQuery對DOM對象進行封裝后的對象。在這個對象上，我們可以使用jQuery里的方法。比如：

  var $div = $(".container"); // 通過jQuery選擇器選中指定的並且封裝成jQuery對象的對象
  $div.hide(); // 這個對象執行了hide方法，將選中的DOM元素隱藏

在我們的開發中，我們最好對這兩者的命名做一些區別以便於區分，比如：$div 是jQuery對象，div是DOM對象。既然能將DOM對象封裝成jQuery對象，那么還能將jQuery對象轉換成DOM對象么？答案是ok的。比如：

  var $div = $(".container"); // 我(們)是一個jQuery對象
  var div = $div[0]; // 我是一個DOM對象
  var _$div = $(div); // 哈哈 我變成了jQuery對象了~

至於為什么第一個是我(們)呢？那是因為jQuery選擇器針對類返回的是一個集合，而后面取索引為0的對象，那么這時候就是單一的了，所以變成了"我"。
為什么要分清jQuery對象和DOM對象呢？我們分清了這兩者，就能分別使用對應的方法了，如果不分清，經常會出現: Uncaught TypeError: someObject.fn is not a function 錯誤。順便說下這個錯誤，就是你對某東西執行fn函數，然而fn方法並不存在someObject的屬性上，未分清是jQuery對象和DOM對象就是導致這個錯誤的原因之一。在一些前端開發群里，對這個錯誤進行提問的雖然不是很多，但也不會很少...本獸也看了些小伙伴貼出來的代碼，還是有一些人是沒注意到這兩者區別，直接調用對應不上的方法而報錯。

一些不常看到有人用，然而確實很實用的選擇器使用方法及介紹
平常用的那些就不多做介紹了，想必大家也是玩的很溜了。這里就寫些比較少見有使用的吧(返回的是一個包含符合選擇條件的元素集合對象)：
$("*")
選取所有元素。
$("selector+")
選取指定選擇條件的元素后的第一個元素,如果選擇的元素已經是最后一個了，那么返回的是選擇到的對象是木有的~
$("firstSelector:not(secondSelector)")
選取指定的元素並以集合形式返回，並在得到的集合中去除不符合not()括號內選擇條件的元素。
$("selector:gt(index)")和$("selector:lt(index)")
選取索引大於index的元素/選擇索引小於index的元素。
$("selector:animated")
選取當前正在執行動畫的所以元素，在DOM操作進行一些動畫的時候很有用。
$("selector:contains(text)")
選取含有文本內容為contains(text)內的text的元素。
$("selector:empty")和$("selector:parent")
選取不包含子元素或者文本的元素/選取含有子元素或者文本的元素。
$("selector:has(selector)")
選取含有選擇器所匹配的元素的元素。
$("selector:hidden")和$("selector:visible")
選取所有不可見的元素/選擇所有可見的元素。
$("[attribute]")
選取擁有這個屬性的元素。
$("[attribute=value]")和$("[attribute!=value]")
選取擁有這個屬性並且屬性值等於/不等於value的元素。
$("[attribute^=value]")和$("[attribute$=value]")和$("[attribute*=value]")
選取擁有這個屬性並且屬性值以value開頭/以value結尾/包含value的元素。
$("selector:enabled")和$("selector:disabled")和$("selector:checked")和$("selector:selected")
選取所有可用/不可用/被選中(單選框/復選框)/被選中的選項(下拉列表)的元素。
代碼：

 <div class="container">
      Hello World
  </div>
  <div class="lowerCase container">
      hello world
  </div>
  <p>
      Hello World
  </p>
  <div class="list">
      <ul>
          <li>1</li>
          <li>2</li>
          <li id="firstLi">3</li>
      </ul>
  </div>
  <div id="hello" style="display:none">
      Hello World
  </div>

  var $all = $("*"); // 這里的返回的集合包括了html標簽到li標簽甚至script標簽的元素對象
  var $next = $("#firstLi+"); // 這里返回的是緊跟在id為firstLi后的那個元素對象，也就是后面一個li
  var $notLowerCase = $(".container:not(.lowerCase)"); // 這里返回的是含有container類而不含有lowerCase類的元素對象集合 就是第一個div
  var $contains = $("div:contains(Hello)"); // 這里返回的集合2個包含元素對象，一個是類是container第一個div，另一個是id是hello的div
  var $hasLowerCase = $("div:has(ul)"); // 這里返回的是含有ul元素的div元素集合
  var $hideden = $("div:hidden"); // 這里返回的是隱藏了的div元素的集合

停止事件冒泡。
什么是事件冒泡？現在假設我們有三個div嵌套着，我們分別給這三個div添加click事件，最內層div點擊后打印1，中間層div點擊打印2，最外層div點擊打印1，那么當我們點擊最內層div的時候，會分別執行最內層>中間層>最外層div的click事件，所以將會依次打印1>2>3。有時候我們需要點擊最內層，對中間層和最外層的相同事件不執行，那么就需要停止這個依次向上級冒泡的事件了。在jQuery中，我們可以使用：event.stopPropagation()來停止事件冒泡，JavaScript中是：window.event.cancelBubble = true。這里同時提下，怎么停止默認事件：event.preventDefault(),在JavaScript中是：window.event.returnValue = false。

jQuery綁定事件和移除綁定事件

舊版本的.bind()：

　$("#myDiv").bind("click",function(){
  　　console.log("Hello World"); // 這里給id為myDiv的對象綁定一個click事件，點擊這個DOM元素將會在控制台打印“Hello World”
　});

舊版本的.unbind()：

  $("#myDiv").cilck(function(){
  　　$("#btn").unbind("click"); // 這里移除了原來id為btn的元素上的click事件
　});

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

格式：$(selector).on(event,childSelector,data,function,map)

  $("#btn").on("click",function(){
      console.log(123);
  });

.on可通過selector和childSelector進行頁面內后期動態加載的數據的事件綁定

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

格式：$(selector).off(event,selector,function(eventObj),map)

  $("#myDiv").cilck(function(){
  　　$("#btn").off("click"); // 這里移除了原來id為btn的元素上的click事件
  });

jQuery停止當前動畫

  $(".myDiv:animated").stop(false,false); // 停止當前動畫，第一個參數是決定是否停止所有的隊列動畫，第二個參數決定是否立刻完成當前動畫。兩個都默認false

 

不早了，就先寫這些吧，后續想寫再去整理些...   這些都是平常可以用到的知識