Jquery 基本知識 一

2021-09-07 08:06:00 字數 3746 閱讀 3558

1.

dom物件:通過例如getelementbyid方法獲取到dom樹中的元素就是dom物件

jquery物件:通過jquery包裝dom物件後產生的物件

---注意:jquery物件和dom物件不能使用對方的任何方法

2.dom物件和jquery物件之間的轉化

jquery物件轉成dom物件有兩種方法:

1、[index]

var $div = $('div');//jquery物件

var div = $div[0];//dom物件

2、get(index)

var $div = $('div');//jquery物件

var div = $div.get(0);//dom物件

dom物件轉成jquery物件有一種方法:$(dom物件)

var div = document.getelementsbytagname('div')[0];//dom物件

var $div = $(div);//jquery物件

3.dom樹物件

document的理解:

第一點:document它管理了所有的html文件內容。

第二點:document它是一種文件樹結構。有層級關係。

第三點:它讓我們把所有的標籤物件化

第四點:我們可以通過document訪問所有的標籤物件。

document.getelementbyid(elementid)

通過標籤的id屬性查詢標籤dom物件,elementid是標籤的id屬性值

document.getelementsbyname(elementname)

通過標籤的name屬性查詢標籤dom物件,elementname標籤的name屬性值

document.getelementsbytagname(tagname)

通過標籤名查詢標籤dom物件。tagname是標籤名

document.createelement(tagname)

通過標籤名,建立乙個標籤dom物件在記憶體裡,tagname是標籤名。

4.jquery選擇器

1.基本選擇器

改變id為div1的所有div的背景色

$('#div1').css('background','#bbffaa');
改變所有p標籤和class為one的div的背景色

$('p,.one').css('background','#bbffaa');
2.層次選擇器

選取div裡的所有span元素

1         $('div span');
選取div下元素名是span的子元素

$('div > span');
選取class是one的下乙個同輩元素

$('.one + div');
選取class是one的後面的所有的同輩元素

$('.one ~ div');
3.過濾選擇器 

選取所有元素中第乙個元素

$('div:first');
選取class不是one的元素

$('div:not(.one)');
選取索引是偶數的的元素

$('div:even');
選取索引等於2的元素

$('div:eq(2)');
選取索引大於2的元素

$('div:gt(2)');
選取所有標題元素,例如h1、h2等

$(':header');
選取當前正在執行動畫的所有元素

$(':animated');
選取獲取當前焦點的元素

$(':focus');
選取含有文字「堅持」的元素

$('div:contains('堅持')');
選取不包含子元素或者文字的元素

$('div:empty');
選取含有元素的元素

$('div:has(p)');
選取含有子元素或者文字的元素

$('div:parent');
選取所有不可見的元素。包括,和

$(':hidden');
選取所有可見的元素

$('div:visible');
選取有id屬性的元素

$('div[id]');
選取id等於myid的元素

$('div[id="myid"]');
選取id值不等於myid的元素

$('div[id!="myid"]');
選取id值以my開頭的元素

$('div[id^="my"]');
選取id值以my結尾的元素

$('div[id$="my"]');
選取id值含有my的元素

$('div[id*="my"]');
選取屬性title等於en或者以en為字首(en後跟乙個連字元'-')的元素

$('div[title|="en"]');
選取屬性title中用空格分隔的值中包含字元en的元素

$('div[title~="en"]');
選取擁有屬性id並且屬性title以en為字首的元素

$('p[id][title|="en"]');
4.子元素過濾器

選取每個class為one的父元素下的第2個子元素

$('div.one :nth-child(2)');
選取每個class為one的父元素下的第1個子元素

$('div.one :first-child');
選取中是唯一子元素的元素

$('ul li:only-child');
5.表單物件屬性過濾選擇器選取id為"form1"表單內的所有可用元素

$('#form1:enabled');
選取id為"form1"表單內的所有不可用元素

$('#form1:disabled');
選取所有被選中的元素

$('input:checked');
選取所有被選中的選項元素

$('select option:selector');
6.表單選擇器

選取所有的、、和元素

$(':input');
選取所有的單行文字框

$(':text');
選取所有的不可見的元素

$(':hidden');

Jquery 基本知識 一

1.dom物件 通過例如getelementbyid方法獲取到dom樹中的元素就是dom物件 jquery物件 通過jquery包裝dom物件後產生的物件 注意 jquery物件和dom物件不能使用對方的任何方法 2.dom物件和jquery物件之間的轉化 jquery物件轉成dom物件有兩種方法 ...

jQuery基本知識

核心 操作dom 通過物件導向 1.jq是一種鏈式操作 可以拿到dom元素 document ready function 等同於 function document ready function 等同 document ready function 原理 function id id 一種炫酷效果...

jquery常用基本知識

一 基礎選擇器的使用 divid 選擇id未divid的元素 a 選擇所有元素 bgred 選擇所用css類未bgred的元素 選擇頁面所用元素 divid,a,bgred 同時匹配多個 二 層次選擇器 bgred div 選擇css類為bgred的元素中的所有 mylist li 選擇css類為m...