jQuery主要功能簡析
阿新 • • 發佈:2020-12-13
獲取元素
jQuery的基本設計思想和主要用法,就是選擇某個網頁元素,然後對其進行操作。
css選擇器
$(document) 選擇整個文件
$('#myId') 選擇id為#id的網頁元素
$('div.myClass') 選擇class為myClass的選擇器
$('input[name=mine]') 選擇name屬性等於mine的input元素
jQuery特有的表示式
$('a:firt') 選擇網頁第一個a元素 $('tr:odd') 選擇表格的奇數行 $('#myForm :input')選擇表單中的input元素 $('div:visible') 選擇可見的div元素 $('div:gt(2)') 選擇所有的div元素,除了前三個 $('div:animated') 選擇當前處於動畫狀態的div的元素
鏈式操作
每一步的jQuery操作,返回的都是jQuery物件,所以可以連在一起
$('div').find('h3').eq(2).html('h3');
分解後
$('div') 找到div元素
.find('h3') 選擇其中的h3元素
.eq(2) 選擇第三個h3元素
.html('h3') 將它的內容改成h3
jQuery提供了end(),可以後退一步
建立元素
$('<p>Hello</p>'); $('<li class="new">new list item</li>'); $('ul').append('<li>list item</li>');
移動元素
$('div').insertAfter($('p')); 把div元素移動到p的後面
$('p').after($('div')); 在p元素的後面插入div元素
修改屬性
attr() 設定或返回備選元素的屬性值 removeAttr() 從每一個匹配的元素中刪除一個屬性 addClass() 為每個匹配的元素新增指定的類名。 removeClass() 從所有匹配的元素中刪除全部或者指定的類 toggleClass() 如果存在(不存在)就刪除(新增)一個類 html() 取得第一個匹配元素的html內容或設定html內容 text() 取得所有匹配元素的內容或設定text內容 val() 獲得匹配元素的當前值