即能设置元素的值,也能获取元素的值:
attr()/html()/text()/height()/width()/val()/css()
jquery第三章:
---------------------------------------------DOM操作----------------------------------
1.插入节点:
append()
appendTo():可以用来移动元素--$("ul li:eq(0)").appendTo("ul");
prepend()
prependTo()
after()
insertAfter()
before()
insertBefore()
2.删除节点:
remove():
返回一个指向已经被删除的节点的引用,因此可以在后面继续使用被删除的节点。
可以通过传递参数来选择性的删除元素--$("ul li").remove("li[title='南']");
detach():
和remove不同的是,remove删除之后再追加,绑定事件会失效,而detach不会。
empty()
清空节点
3.复制节点:
clone():
$(this).clone().appendTo("ul");--这样复制出来的节点不具有任何的行为。
$(this).clone(true).appendTo("ul");--复制元素同时复制绑定事件。
4.替换节点:
如果替换之前已经为元素绑定事件,替换后,会一起消失,需要在新元素上重新绑定事件。
replaceWith():前-后
replaceAll():后-前
5.包裹节点:
wrap():
$("strong").wrap("<b></b>");
所有的元素进行单独包裹
wrapAll():
所有匹配的元素用一个元素包裹
如果被包裹的多个元素之间有其它元素,其它元素会被放到包裹元素之后。
wrapInner():
包裹元素之间的内容
6.属性操作:
attr():
获取和设置元素属性:
一次性设置多个属性:$("p").attr({"title":"yourTitle", "name":"yourName"});
removeAttr():
删除元素属性
---------------------------------------------style操作----------------------------------
1.获取样式和设置样式:
attr():
2.追加样式:
addClass():
3.移除样式:
removeClass():
4.切换样式:
toggle():交替一组动作
$toggleBtn.toggle(function(){
//显示元素
}, function(){
//隐藏元素
})
5.判断是否包含某个样式:
hasClass():
---------------------------------------------设置和获取HTML、文本和值----------------------------------
1.获取html
html():
获取p元素的HTML代码:$("p").html();
设置:
text():--javascript:innerText
val():--javascript:value
文本框、下拉框和单选框
focus():--javascript:onFocus
blur():--javascript:onBlur
this 指向当前文本框
this.defaultValue 当前文本框的默认值
val():还拥有选中功能
$("#valSelect").val("选中三号");
$("#valAnySelect").val(["选中二号","选中四号"]);
$(":checkbox").val(["xi"]);--多选框即使选一个也要包含在方括号中
$(":radio").val(["radio1"]);
2.遍历节点:
children():
只考虑子,不考虑孙子
next():
匹配元素之后的同辈元素
打印对象:html()
prev():
匹配元素之前的同辈元素
siblings():
匹配元素前后所有的同辈元素
closest():
取得最近的匹配元素
返回最先匹配的祖先元素:
parent():
第一个父亲节点
parents():
所有父亲节点
windows.onload 和 $(document).ready()方法的区别
windows.onload:多个函数引用只能保存一个,后面的会覆盖掉前面的。