JQuery常用函式及功能小結

2022-04-28 15:42:07 字數 4911 閱讀 5375

1.文件載入完成執行函式

$(document).ready(function());

2.新增/刪除css類

$("#some-id").addclass("newclassname");

$("#some-id").removeclass("classnametoberemoved");

3.選擇符 利用了css和xpath(xml path language)選擇符的能力,以及jquery獨有的選擇符

3.1常用的:

1.根據標籤名: $('p')  選擇文件中的所有段落

2. 根據id: $("#some-id")

3.類: $('.some-class')

3.2使用css選擇符:

$("#some-id > li")  選擇特定id下的所有子li元素

$("#some-id li:not(.horizontal)")  偽類選擇,特定id下所有沒有.horizontal 類的li元素

3.3使用xpath選擇符:

屬性選擇:$("a[@title]") 選擇所有帶title屬性的鏈結

$("div[ol]") 選擇包含乙個ol元素的所有div元素

$('a[@href^="mailto:%22]')  選擇所有帶href屬性[@href]且該屬性值以mailto開頭^="mailto"(^標識字串開始,$標識字串結尾,*表示字串中任意位置)

$('a[@href$=".pdf"]') 選擇帶有href屬性且該屬性值以.pdf結尾的所有鏈結

$('a[@href*="mysite.com"]') 選擇mysite.com出現在href任意位置(包含mysite.com)的所有鏈結

3.4jquery自定義選擇符(過濾器,從已選擇的結果集中過濾出符合某一條件的所有元素),與css的偽類選擇符相似,使用「:」開頭

1.$('div.horizontal:eq(1)')  選擇帶有類horizontal的div集合中的第2個項

$('div:nth-child(1)')  選擇作為其父元素第1個子元素的所有div

2.自定義選擇符:odd和:even選擇奇偶行

$('tr:odd').addclass('odd'); //過濾選擇結果集中的奇數元素

$('tr:even').addclass('even'); //過濾選擇結果集中的偶數元素

3.自定義選擇符:contains()

$('td:contains("henry")') 選擇包含henry字串的所有**

3.5jquery選擇函式

1.$('#some-id').parent() 選擇特定元素的父元素

2.$('#some-id').next()  選擇特定元素最近的下乙個同級元素

3.$('#some-id').siblings() 選擇特定元素的所有同級元素

4.$('#some-id').find('.some-class') 選擇特定元素下所有包含特定類的元素

5.$('#some-id').find('td').not(':contains("henry")') 選擇特定元素下**內容不包含henry的所有元素

5.$('#some-id').find('td').not(':contains("henry")').end()  .end()表示回到最後一次.find()的元素處

3.6訪問dom元素,使用get()方法從選擇後的jquery物件中獲得,去掉jquery的包裝

var mytag = $('#some-id').get(0).tagname;

var mytag = $('#some-id')[0].tagname;  //與上面的等效

4.事件(都是給某一元素繫結事件)

4.1繫結事件 

$("#some-id").bind("click", function())

$("#some-id").unbind("click", bindedfunctionname);  //移除已繫結的事件,前提是繫結的函式有名稱(不是匿名函式)

$("#some-id").click(function())

4.2復合函式繫結事件

$("#some-id").toggle(function() ,function()); //交替執行

$(「#some-id」).toggleclass("hidden"); //  新增/刪除類交替進行

$("#some-id").hover(function(), function()); //滑鼠進入元素時執行第乙個函式,離開元素時執行第二個函式

$("#some-id").one("click", functionname);  //只需觸發一次,隨後便立即解除繫結

4.3模仿使用者觸發某一事件

$("#some-id").trigger("click"); //觸發特定元素的click事件

1.文件載入完成執行函式

$(document).ready(function());

2.新增/刪除css類

$("#some-id").addclass("newclassname");

$("#some-id").removeclass("classnametoberemoved");

3.選擇符 利用了css和xpath(xml path language)選擇符的能力,以及jquery獨有的選擇符

3.1常用的:

1.根據標籤名: $('p')  選擇文件中的所有段落

2. 根據id: $("#some-id")

3.類: $('.some-class')

3.2使用css選擇符:

$("#some-id > li")  選擇特定id下的所有子li元素

$("#some-id li:not(.horizontal)")  偽類選擇,特定id下所有沒有.horizontal 類的li元素

3.3使用xpath選擇符:

屬性選擇:$("a[@title]") 選擇所有帶title屬性的鏈結

$("div[ol]") 選擇包含乙個ol元素的所有div元素

$('a[@href^="mailto:%22]')  選擇所有帶href屬性[@href]且該屬性值以mailto開頭^="mailto"(^標識字串開始,$標識字串結尾,*表示字串中任意位置)

$('a[@href$=".pdf"]') 選擇帶有href屬性且該屬性值以.pdf結尾的所有鏈結

$('a[@href*="mysite.com"]') 選擇mysite.com出現在href任意位置(包含mysite.com)的所有鏈結

3.4jquery自定義選擇符(過濾器,從已選擇的結果集中過濾出符合某一條件的所有元素),與css的偽類選擇符相似,使用「:」開頭

1.$('div.horizontal:eq(1)')  選擇帶有類horizontal的div集合中的第2個項

$('div:nth-child(1)')  選擇作為其父元素第1個子元素的所有div

2.自定義選擇符:odd和:even選擇奇偶行

$('tr:odd').addclass('odd'); //過濾選擇結果集中的奇數元素

$('tr:even').addclass('even'); //過濾選擇結果集中的偶數元素

3.自定義選擇符:contains()

$('td:contains("henry")') 選擇包含henry字串的所有**

3.5jquery選擇函式

1.$('#some-id').parent() 選擇特定元素的父元素

2.$('#some-id').next()  選擇特定元素最近的下乙個同級元素

3.$('#some-id').siblings() 選擇特定元素的所有同級元素

4.$('#some-id').find('.some-class') 選擇特定元素下所有包含特定類的元素

5.$('#some-id').find('td').not(':contains("henry")') 選擇特定元素下**內容不包含henry的所有元素

5.$('#some-id').find('td').not(':contains("henry")').end()  .end()表示回到最後一次.find()的元素處

3.6訪問dom元素,使用get()方法從選擇後的jquery物件中獲得,去掉jquery的包裝

var mytag = $('#some-id').get(0).tagname;

var mytag = $('#some-id')[0].tagname;  //與上面的等效

4.事件(都是給某一元素繫結事件)

4.1繫結事件 

$("#some-id").bind("click", function())

$("#some-id").unbind("click", bindedfunctionname);  //移除已繫結的事件,前提是繫結的函式有名稱(不是匿名函式)

$("#some-id").click(function())

4.2復合函式繫結事件

$("#some-id").toggle(function() ,function()); //交替執行

$(「#some-id」).toggleclass("hidden"); //  新增/刪除類交替進行

$("#some-id").hover(function(), function()); //滑鼠進入元素時執行第乙個函式,離開元素時執行第二個函式

$("#some-id").one("click", functionname);  //只需觸發一次,隨後便立即解除繫結

4.3模仿使用者觸發某一事件

$("#some-id").trigger("click"); //觸發特定元素的click事件

JQuery常用函式及功能小結

1.文件載入完成執行函式 document ready function 2.新增 刪除css類 some id addclass newclassname some id removeclass classnametoberemoved 3.選擇符 利用了css和xpath xml path la...

jquery常用功能函式

1.運算元組和物件 主要包括元素的遍歷,篩選,合併等 1 遍歷each 格式 each object,fn object是要遍歷的物件。fn是遍歷所有物件所要執行的函式,可以接受兩個引數 1.陣列物件的屬性或者元素序號 2.屬性或者元素的值 例如 html 輸出每個列表項的值jquery butto...

小結 常用shell命令功能小結

1.如何快速檢視當前時間?date r 2.快速獲取insmod的驅動模組的主裝置號?awk 2 misc proc devices awk命令的使用參考 awk 模板 檔案 3.擷取本地ip的命令 ifconfig eth0 grep inet cut d f2 cut d f1 tmp ipad...