Day04jQueryDOM編程相關函數

DOM編程相關函數

注意：
1.1.在事件函數中this，代表觸發該事件的事件源—dom對象（this，事件標籤對象）
1.2.內置jquery的事件綁定爲靜態綁定
1.3 $jq.live(事件名稱，綁定的函數)；動態綁定
事件名稱：click（單擊）dbclick（雙擊）change（值修改）

$('a:contains(刪除)').live('click',del);//動態綁定
$('a:contains(刪除)').click(del);//靜態綁定

1.創建標籤

$(‘‘)；

2.修改（獲取）
1)val() 獲取input標籤對象的value屬性值

var bookname = $('input[name=bookname]').val();

2)val(新值) 修改input標籤的相關屬性
3)text() 內部元素普通字符串文本
text(新值)

$('<td></td>').text(bookname);
//等價於
var td1 = $('<td>'+bookname+'</td>');

4）html() 內部可包含有效的html標籤
html(新值)

$('<tr></tr>').html('<td>'+三國志+'</td>');
$('<tr></tr>').text('<td>'+三國志+'</td>');
以上二者區別：
html後添加的td是標籤
text後添加的是文本，所以text顯示出來的不會，會把<td>三國志</td>當做文本顯示出來

5）
css(“樣式屬性名”)；//獲取屬性值
css(“樣式屬性名”,”屬性值”)；//設置對應的屬性值
css({“樣式屬性名”:”屬性值”,”樣式屬性名”:”屬性值”,……})；
addClass(樣式類名) 增加樣式類
removeClass(樣式類名) 移除樣式類

    //將div元素樣式a刪除,添加b樣式
    $('.a').removeClass('a');
    $('div[class]').addClass('b');
    等價於
    $('.a').prop('class','b');

3.添加

append(jq對象) 向子標籤的末尾追加jq元素

$('body').append(td1).append(td2);//可以鏈式調用

prepend(jq對象) 向子標籤的開頭追加jq元素

var tr = $('<tr><td>三國志</td></tr>');//向tbody內添加前添加一個tr
$('tbody').prepend(tr);

before(jq對象) 向相鄰的哥哥位置添加jq元素

var tr = $('<tr><td>三國志</td></tr>');//向tbody內在第一個tr前添加一個tr
$('tbody'>tr:first).before(tr);

after(jq對象) 向相鄰的弟弟位置添加jq元素

var tr = $('<tr><td>三國志</td></tr>');//向tbody內在第一個tr後添加一個tr
$('tbody'>tr:first).after(tr);

4.
1)
prop(‘屬性名’) 獲取對象該屬性名所對應的值（ jquery1.6以後）
attr(‘屬性名’) jquery1.6以前

$('#ckh').prop('checked');

2)
prop(‘屬性名’,’屬性值’) 爲該屬性賦值新的屬性值
attr(‘屬性名’,’屬性值’)

$(tbody input:checkbox).prop('checked','true');//tbody下的input標籤中checkbox

5.刪除
1）empty() 將當前對象的所有子標籤清空

$('tbody').empty();

2）remove() 刪除當前自己本身的標籤

$('tbody>tr:first').remove();//刪除tbody中的第一個tr標籤

6.內置動畫效果
1）顯示與隱藏(左上角)
show(time) 元素從左上角開始顯示（time爲毫秒）
hide(time) 元素向左上角開始消失

$('div:first').show(1000);//將第一個div顯示，顯示變化時間爲1s
$('div:first').hide(1000);//將第一個div隱藏，顯示變化時間爲1s

2)淡入淡出
fadeIn(time)//淡入
fadeOut(time)//淡出

$('div:first').fadeIn(1000);
$('div:first').fadeOut(1000);

3)下滑顯示，上滑隱藏(像拉幕一樣的效果)
slideDown(time) 下滑顯示
slideUp(time) 上滑隱藏