1. jQuery 的執行時間：

$(document).ready(function(){--- jQuery functions go here ----// 保證當文檔對象加載完成后，進行元素事件處理函數的綁定 });

?jQuery 是基于事件相應機制進行處理的，為給定元素的事件綁定事件處理函數，當事件發生時，觸發相關的函數。

2. 常用 函數

??? a.元素效果（隱藏和顯示） ???????

//語法： $(selector).hide(speed,callback); //隱藏元素；speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).show(speed,callback); //顯示元素；speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).toggle(speed,callback); // 隱藏顯示的元素，顯示隱藏的元素；speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).fadeIn(speed,callback); //淡入效果顯示被隱藏的元素； speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).fadeOut(speed,callback); //淡出效果隱藏已經顯示的元素 speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).fadeTo(speed,opacity,callback); //淡出顯示到 指定的透明度 $(selector).slideDown(speed,callback); //以下拉的效果顯示被隱藏的元素 speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).slideUp(speed,callback); //以上拉的效果隱藏顯示的元素?? speed :"slow"、"fast" 或毫秒 ms 數值， callback:回調函數名 $(selector).slideToggle(speed,callback); //以下拉的效果顯示被隱藏的元素，以上拉的效果隱藏顯示的元素
$(selector).animate(styles,options); //動畫元素

?2.元素內容的獲取

??

<element type='...' name='...' value='.....'> 文本內容<element> </element> </element>$(selector).text(); // 獲取或設置內容是元素標簽里定義的除去其他標簽的純文本： 即上面的 ：“文本內容” $(selector).html(); // 獲取或設置 元素標簽內的內容，包括其內的標簽 即上面的 ： “文本內容<element>.... </element>” $(selector).val(); // 獲取或設置 元素 value 屬性內的值
$(selector).attr(attribute); // 獲取元素 指定屬性的值
$(selector).attr(attribute，value); // 設置元素 指定屬性的值
$(selector).attr(attribute,function(index,oldvalue)); // 設置元素 指定屬性的值 index: 元素的索引值，oldvalue ：舊值
$(selector).attr({attribute:value, attribute:value ...})；// 同時設置多個值 ?

? 3.元素屬性操作

?

方法描述

addClass()	向匹配的元素添加指定的類名。
attr()	設置或返回匹配元素的屬性和值。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設置或返回匹配的元素集合中的 HTML 內容。
removeAttr()	從所有匹配的元素中移除指定的屬性。
removeClass()	從所有匹配的元素中刪除全部或者指定的類。
toggleClass()	從匹配的元素中添加或刪除一個類。
val()	設置或返回匹配元素的值。

?

4.元素添加

before_area1 <element .........>prepend_area2 someContent append_area3</element>after_area4 $(selector).append(contnents); // 將 contents 添加到 append_area3 位置$(selector).prepend(contents); // 將 contents 添加到? append_area2 位置$(selector).before(contents); // 將 contents 添加到? append_area1 位置 $(selector).after(contents); // 將 contents 添加到? append_area4 位置
這里的content可以是字符串表示的元素，也可以是元素變量，并且可以多元素添加。

?

5. 元素的刪除

<div id='root'><div id='child'><div id='grandchild'>...</div></div> </div><script> var elements = $(selector).remove([filter]); //移除滿足條件的元素和其子元素，并返回之，這個移除是讓 此元素和子節點從 DOM對象結構上移除，并將其保存于jQuery對象內。 // filter 滿足選擇器語法 $(selector).empty(); //清空元素內的內容，包括text，和內的節點 <script>

6.樣式表CSS 的使用

//獲取指定的值 var value=css("propertyname");//設置值 css("propertyname","value");// 設置多個值 css({"propertyname":"value","propertyname":"value",...});

7.尺寸控制

$(selector).width() ; $(selector).height();$(selector).innerWidth() ; $(selector).innerHeight();$(selector).outerWidth([boolean]) ; $(selector).outerHeight([boolean]) ;//false,不加外邊框；true，加外邊框

?

?8.選擇器參考

選擇器實例選取

*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
?	?	?
:first	$("p:first")	第一個 <p> 元素
:last	$("p:last")	最后一個 <p> 元素
:even	$("tr:even")	所有偶數 <tr> 元素
:odd	$("tr:odd")	所有奇數 <tr> 元素
?	?	?
:eq(index)	$("ul li:eq(3)")	列表中的第四個元素（index 從 0 開始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不為空的 input 元素
?	?	?
:header	$(":header")	所有標題元素 <h1> - <h6>
:animated	?	所有動畫元素
?	?	?
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	無子（元素）節點的所有元素
:hidden	$("p:hidden")	所有隱藏的 <p> 元素
:visible	$("table:visible")	所有可見的表格
?	?	?
s1,s2,s3	$("th,td,.intro")	所有帶有匹配選擇的元素
?	?	?
[attribute]	$("[href]")	所有帶有 href 屬性的元素
[attribute=value]	$("[href='#']")	所有 href 屬性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 屬性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 屬性的值包含以 ".jpg" 結尾的元素
?	?	?
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
?	?	?
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被選取的 input 元素
:checked	$(":checked")	所有被選中的 input 元素

?

?

?

?

轉載于:https://www.cnblogs.com/louluan/p/3542053.html

總結

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

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