日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript中的jQuery

發布時間：2023/12/8 javascript 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JavaScript中的jQuery 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
  • JavaScript學習過程中的個人筆記，詳細請看https://www.liaoxuefeng.com/wiki/1022910821149312
  • 再次感謝廖大
簡介
  • jQuery是JavaScript世界中使用最廣泛的一個庫。
  • jQuery可以幫我們干這些事情：
    1）消除瀏覽器差異
    2）簡潔的操作DOM的方法
    3）輕松實現動畫、修改CSS等各種操作
  • jQuery有1.x和2.x兩個主要版本，2.x移除了對IE 6、7、8的支持，因此代碼更精簡。
  • 使用jQuery只需要在頁面的<head>引入jQuery文件即可：<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>。
  • jQrery把所有功能全部封裝在一個全局變量jQrery中，而$也是一個合法的變量名，它是變量jQuery的別名。
  • $ 本質上是一個函數，但函數也是對象，所有$除了可直接調用外，也可以有很多其他屬性。
選擇器
  • 選擇器是jQuery的核心，一個選擇器寫出來類似$('#dom-id')。
  • 選擇器就是幫我們快速定位到一個或多個DOM節點。
//按ID查找var div = $('#bac');//查找<div id = "abc">//將返回一個jQuery對象[<div id="abc">...</div>]//如果不存在id為abc的<div>，將返回[]而不是null。var divDom = div.get[0]//假設存在dic，獲取第一個DOM元素var anothor = $(divDom);//重新包裝成jQuery對象。//按tag查找var ps = $('p');、、返回所有<p>節點//按class查找，在class名稱前加一個.var a = $(".red");//返回所有包含class = "red"的節點var b = $(".red.green");返回同時包含red和green的節點。//按屬性查找var emali = $('[name=email]');//找出<??? name="email>//當屬性的值包含空格等特殊字符時，需要用雙括號括起來//按屬性查找還可以使用前綴查找或后綴查找var icons = $('[name^=icon]');//找出所有name屬性以icon開頭的DOMvar name= $('[name$=with]');//找出所有name屬性以with結尾的DOM//組合查找var emailInput = $('input[name=email]')//找出所有name為email的<input>//多項選擇器$('p,dic');//找出所有的<p>和<div>$('p.red,p.green');//把<p class="red">和<p class="green">都選出來//選出來的元素是按照在HTML中出現的順序排列的，而且不會有重復元素。
  • 如果兩個DOM元素具有層級關系，可以使用層級選擇器$('ancestor descendant')來選擇，層級之間用空格隔開。
  • 層級選擇器的好處在于縮小了選擇范圍。
  • 子選擇器$('parend>child')類似層級選擇器，但是先頂了層級關系必須是父子關系。
  • 過濾器通常附加在選擇器上，幫助我們更精確地定位元素。
:first-child //第一個元素:last-child //最后一個元素:nth-child(2) //第二個元素:nth-child(even) //序號為偶數的元素:nth-child(odd) //序號為奇數的元素:input //<input>,<textarea>.<select>和<button>:file //<input type="type">,input[type=file]:checkbox //復選框，input[type=checkbox]:radio //單選框，input[type=radio:focus //當前輸入焦點的元素:checked //當前勾上的單選框和復選框:enabled //可正常輸入的<input>,<select>，也就是沒有灰掉的輸入:disabled //和enabled相反，選擇那些不能輸入的:visible //所有可見的:hidden //所有不可見的
  • 通常情況下選擇器可以直接定位到我們想要的元素，當我們拿到一個jQuery對象后，還可以以這個對象為基準，進行查找和過濾。
  • 最常見的查找是在某個節點的所有子節點中查找，只用find()方法，它本身又接收一個任意的選擇器。
  • parent()方法可以從當前節點向上查找。
  • next()和prev()方法可以查找同一層級的節點，可以傳入選擇器。
  • filter()方法可以過濾到不符合選擇器條件的節點，或者傳入一個函數，注意函數內部的this被綁定為DOM對象，而不是jQuery對象。
  • map()方法把一個jQuery對象包含的若干DOM節點轉化為其他對象。
  • 一個jQuery對象如果包含了不止一個DOM節點，first()、last()和slice()方法可以返回一個新的jQuery對象，把不需要的DOM節點去掉。
操作DOM
  • 通過jquery的選擇器拿到jQuery對象之后，下一步就是操作對應的DOM節點。
  • jQuery對象的text()和html()方法分別獲取節點的文本和原始HTML文本。
  • 可以通過向text()和html()方法傳入參數來設置文本和HTML文本。
  • 一個jQuery對象可以包含0個或任意個DOM對象，它的方法實際上會作用在對應的每個DOM節點上。
  • css(‘name’,‘value’)可以改變jQuery對象的css。
  • jQuery對象的所有方法都返回一個jquery對象，這樣我們可以進行鏈式調用。
  • jQuery對象的show()和hide()方法用來顯示和隱藏DOM元素。并未改變DOM樹的結構。
//瀏覽器可視窗口大小$(window).width();$(widons).height();//HTML文檔的大小$(document).width();$(document).height();attr()和removeAttr()方法用于操作DOM節點的屬性// <div id="test-div" name="Test" start="1">...</div>var div = $('#test-div');div.attr('data'); // undefined, 屬性不存在div.attr('name'); // 'Test'div.attr('name', 'Hello'); // div的name屬性變為'Hello'div.removeAttr('name'); // 刪除name屬性div.attr('name'); // undefinedprop()方法和attr()類似，但是HTML5規定有一種屬性在DOM節點中可以沒有值，只有出現與不出現，如：<input id="test-radio" type="radio" checked value="1">等價于<input id="test-radio" type="radio" checked="checked" value="1">prop() 和 attr()對于屬性checked處理有所不同。var radio = $('#test-radio');radio.attr('checked');//'checked'radio.prop('checked');//true也可以用 is()方法判斷radio.is(':checked');//true類似屬性還有selected,處理的時候最好用 is(':selected');
  • 對于表單，jQuery對象統一提供val()方法獲取和設置對應的value屬性。
  • jQuery的append()方法可以用來添加新的DOM節點。
  • append()方法可以傳入字符串、原始的DOM對象、jQuery對象和函數對象
  • append()方法傳入函數時，要求返回一個字符串、DOM對象或者jQuery對象。
  • append()把DOM添加到最后，prepend()則把DOM添加到最前。
  • 如果要添加的DOM節點已經存在，它會首先從文檔中移除，再添加。也就是說用append()，可以移動一個DOM節點。
  • 同級節點可以用after()或者before()方法。
  • 可以使用remove()方法刪除DOM節點。
事件
  • 對jQuery對象的on方法可以綁定一個事件，
var a = $('#test');a.on('click',fnction(){alert('Hello');});//另一種簡化的方法是直接調用click()方法a.click(function(){alert('Hello');});
  • 鼠標事件
    1）click:單擊觸發
    2）dblclick:雙擊觸發
    3）mouseenter:鼠標移入時觸發
    4）mouseleave:鼠標移出時觸發
    5）mousemove:鼠標在DOM內部移動時觸發
    6）hover:鼠標進入和退出時觸發兩個函數，相當于mouseenter加上mouseleave
  • 鍵盤事件僅作用于當前焦點的DOM上，通常是<intpu>和<textarea>
    1）keydown:鍵盤按下時觸發
    2）keyup:鍵盤松開時觸發
    3）keypress:按一次后觸發
  • 其他事件
    1）focus:當DOM獲得焦點時觸發
    2）blur:當DOM失去焦點時觸發
    3）change:當<input>、<select>或<textarea>的內容改變時觸發
    4）submit:當<form>提交時觸發
    5）ready:當頁面被載入并且DOM樹完成初始化后觸發
  • ready僅作用于document對象。ready事件在DOM完成初始化后觸發，且只觸發一次，所以適合用來寫其他的初始化代碼。
$(document).on('ready',function(){}); //寫法一$(document).ready(function(){}); //寫法二$(function(){}); //寫法三
  • 所有事件都會傳入Event對象作為參數，可以從Event對象上獲取到更多的信息。
  • off('click',function)可以用來解除綁定的事件。
  • off()方法無法移除一個已綁定的匿名函數。
  • 可以使用off('clock')一次性移除已綁定的click事件的所有處理函數
  • 無參數調用off()一次性移除已綁定的所有類型的事件
  • 事件的觸發總是由用戶操作引發的。
動畫
  • 用JavaScript實現動畫的原理就是以固定的時間間隔（如0.1秒），每次把DOM元素的CSS樣式修改一點，看起來就像動畫了。
  • jQuery內置的幾種動畫樣式：
    1）show/hide/toggle:以無參形式調用show()和hide()，會顯示和隱藏DOM元素，只要傳遞一個時間參數進去，就變成了動畫，時間單位是毫秒，也可以是slow/fast等字符串。toggle()則根據當前狀態決定是show()還是hide()
    2）slideUp()/slideDown():show()/hide()是從左上角逐漸展開或收縮的，而slideUp()和slideDown()則是在垂直方向逐漸展開或收縮的，同樣slideToggle()則根據元素是否可見來決定下一步動作。
    3）fadeIn/fadeOut:效果時淡入淡出，通過不斷設置DOM元素的opactiy屬性來實現，同樣有fadeToggle()方法。
    4）animate():可以實現任意動畫效果，我們需要傳入的參數就是DOM元素最終的CSS狀態和時間，還可以傳入第三個參數，傳入一個函數，當動畫結束的時候，被調用。
    5）delay():動畫可以串行執行，通過delay()方法可以實現暫停。
  • jQuery動畫的原理是逐漸改變CSS的值，對于不是block性質的DOM元素，對他們就不起作用。
  • jQuery沒有實現對background-color的動畫效果，用animate()設置顏色也沒有效果。這種可以使用CSS3的transition實現動畫效果。
AJAX
  • jQuery在$上綁定了ajax()函數，可以處理AJAX請求。
  • ajax(url, settings)接收一個URL和一個可選的setting對象，常用選項如下：
    1）async:是否異步執行AJAX請求，默認為true，不要指定為false
    2）method:發送的Method，缺省為GET，可指定為POST/PUT 等。
    3）contentType：發送POST請求的格式，默認為'application/x-www-form-urlencoded; charset=UTF-8'，可指定為text/plain、application/json。
    4）data：發送的數據，可以是字符串、數組或object。如果是GET請求，data將被轉換成query附加到URL上，如果是POST請求，根據contenType把data序列化成合適的格式。
    5）headers：發送的額外的HTTP頭，必須是一個object。
    6）dataType:接收的數據格式，可以指定為html/xml/json/text等，缺省情況下根據響應的content-Type猜測。
  • jQuery的jqXHR對象類似一個Promise對象，對于回調的響應，可以采用鏈式寫法來處理
var jqxhr = $.ajax('/aip/categories',{dataType:'json'}).done(function(data){//成功}).fail(function(data){//失敗}).always(function(){//請求完成});
  • 對于常用的AJAX操作，jQuery提供了單獨的get()、post()和getJSON()等方法。
擴展
  • 當jQuery內置的方法不滿足需求的時候，我們可以進行擴展。
  • 給jQuery對象綁定一個新插件函數是通過擴展$.fn對象實現的。
  • jQuery對象支持鏈式操作，所以我們寫的插件函數也要能繼續鏈式下去，需要在方法末尾加上return this;
  • jQuery提供的輔助方法$.extend(target, obj1,obj2...),它將多個object對象的屬性合并到第一個target對象中，遇到同名屬性，總是使用靠后的對象的值，也就是越往后優先級越高。
  • 插件函數要有默認值，綁定在$.fn.<pluginName>.defaults上
  • 用戶在調用時可以傳入設定值以便覆蓋默認值。

總結

以上是生活随笔為你收集整理的JavaScript中的jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。