JQuery函式整理

2021-06-23 02:24:40 字數 2455 閱讀 9266

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.toggle fn,fn td toggle function function 作用 會進行切換,用於繫結兩個或多個事件處理器函式,以響應被選元素的輪流的 click 事件。2.wrap html test paragraph.p wrap 結果 test paragraph.作用 把所有匹配...

jQuery知識整理

1.頁面重新整理方法 有時候可能會用到 window.location.reload 重新整理當前頁面.親測有效 parent.location.reload 重新整理父親物件 用於框架 opener.location.reload 重新整理父視窗物件 用於單開視窗 top.location.rel...

jQuery學習資料整理

第二章 選擇器 一.選擇器 1.基本選擇器 2.層次選擇器 class div parent child class nextal div one next div silbings div 3.過濾選擇器 篩選出dom元素 a.基本過濾 div first div last div not cla...