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) 上滑隐藏