jquery學習基礎使用

Jquery獲取元素進行操做 一：基礎方式(四種) $(this).hide() 表示：jQuery 的hide() 函數，隱藏當前的 HTML 元素。 $("#test").hide() 表示：jQuery 的hide() 函數，隱藏 id="test" 的元素。 $("p").hide() 表示：jQuery 的hide() 函數，隱藏全部

元素。 $(".test").hide() 表示：jQuery 的 hide() 函數，隱藏全部 class="test" 的元素。 二：混合方式 $("p") 選取

元素。 $("p.intro") 選取全部 class="intro" 的

元素。 $("p#demo") 選取全部 id="demo" 的

元素。 $(this) 當前 HTML 元素 $("p") 全部

元素 $("p.intro") 全部 class="intro" 的

元素 $(".intro") 全部 class="intro" 的元素 $("#intro") id="intro" 的元素 $("ul li:first") 每一個

• 的第一個
• 元素 $("[href$='.jpg']") 全部帶有以 ".jpg" 結尾的屬性值的 href 屬性 $("div#intro .head") id="intro" 的元素中的全部 class="head" 的元素 藍色文字屬於xPath的表達式 Jquery的元素選取的原理 $(selector).action();-- $(選取元素).動做 注意$是美圓符號 注意：全部jquery的全寫在document ready的函數中： $(document).ready(function(){ Jquery的具體操做寫在這個倆面 }); 這個函數的意思是，在文檔加載完成以後進行的操做，因此當文檔加載完成前進行操做會出現問題 例如1隱藏未顯示的元素2操做未加載完的圖片 Jquery的事件 雖然$是jquery的簡介方式，及經常使用方式可是咱們也能夠經過 noConflict()進行替代 $(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成加載時） $(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件 $(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件 $(selector).focus(function) 觸發或將函數綁定到被選元素的得到焦點事件 $(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件 Jquery經常使用事件 隱藏和顯示 jQuery hide() 隱藏效果jQuery show()顯示效果 能夠在括號填寫東西進行顯示和隱藏速度的控制 jQuery fadeIn() 用於淡入已隱藏的元素-顯示。jQuery fadeOut() 方法用於淡出可見元素-隱藏 淡入和淡出 jQuery fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。 若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。 若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。 jQuery fadeTo() 方法容許漸變爲給定的不透明度（值介於 0 與 1 之間）。 上下滑動 jQuery slideDown() 方法用於向下滑動元素。 jQuery slideUp() 方法用於向上滑動元素。 jQuery slideToggle() 方法能夠在 slideDown() 與 slideUp() 方法之間進行切換。 若是元素向下滑動，則 slideToggle() 可向上滑動它們。 若是元素向上滑動，則 slideToggle() 可向下滑動它們。 元素動畫效果 $(selector).animate({params},speed,callback); 必需的 params 參數定義造成動畫的 CSS 屬性。 可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。 可選的 callback 參數是動畫完成後所執行的函數名稱。 JQquery stop() 方法 jQuery stop() 方法用於中止動畫或效果，在它們完成以前。 stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。 Jquery動畫的組合 jquery容許多個動畫同時進行經過 . 連接； 舉例$("#p1").css("color","red").slideUp(2000).slideDown(2000); Jquery的HTML元素的操做 文本內容進行操做 text() - 設置或返回所選元素的文本內容 html() - 設置或返回所選元素的內容（包括 HTML 標記） val() - 設置或返回表單字段的值---返回key value中的value值 html()和text()返回的文本內容的區別 html()返回的內容是元素中全部能夠顯示的內容樣式的文本 text()返回的內容是元素中的文本在樣式起做用後的文本內容 元素的文本屬性進行操做 文本屬性的方法attr() $("#test").attr("href","http://www.baidu.com"); 例如input的placeholder也能夠看成一種屬性； 屬性就是否是在style裏面的內容，功能屬性 元素文本處理先後插入內容 append() - 在被選元素的結尾插入內容 prepend() - 在被選元素的開頭插入內容 after() - 在被選元素以後插入內容 before() - 在被選元素以前插入內容 前兩個方法主要是插入文本內容的一種作法，然後兩種方法能夠插入相應的元素；例如p標籤 刪除元素/內容（而非樣式） remove() - 刪除被選元素（及其子元素）例如

  測試

   

  這個方法刪除div empty() - 從被選元素中刪除子元素 例如

  測試

  這個方法刪除p標籤 刪除p標籤中的class爲test的元素：$("p").remove(".test"); 文本樣式的修改(css和class) addClass() - 向被選元素添加一個或多個類 removeClass() - 從被選元素刪除一個或多個類 toggleClass() - 對被選元素進行添加/刪除類的切換操做 css() - 設置或返回樣式屬性 EG: $("h1,h2,p").addClass("blue"); $("h1,h2,p").removeClass("blue"); $("h1,h2,p").toggleClass("blue"); $("p").css({"background-color":"yellow","font-size":"200%"}); jQuery 尺寸 方法 width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。 height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。 innerWidth() 方法返回元素的寬度（包括內邊距）。 innerHeight() 方法返回元素的高度（包括內邊距）。 outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。 outerHeight() 方法返回元素的高度（包括內邊距和邊框）。 outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。 outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。