jQuery中的DOM操作
DOM(Document Object Model----文档对象模型):一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件。
DOM操作的分类:
DOM Core:DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种是用来标记语言编写出来的文档,例如XML。
HTML DOM:使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性。
CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM主要用于获取和设置style对象的各种属性。
查找节点
查找属性节点,通过jQuery的选择器完成
操作属性节点:查找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种值。
操作文本节点:通过text()方法。
创建节点
创建节点:使用Jquery的工厂函数
(
)
:
():
():(html);会根据传入的html对象标记字符串创建一个DOM对象,并把这个dom对象包装成一个jQuery对象返回。
注意:
动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中。
当创建单个元素时,需注意闭合标签和使用标准的XHTML格式,例如创建一个
元素,可以使用 ( " < p / > " ) 或 ("<p/>")或 ("<p/>")或("
"),但是不能使用 ( " < p > " ) 或 ("<p>")或 ("<p>")或("")
创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建。
插入节点
动态创建的HTML元素并没有实际用处,还需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点。
方法 描述
append() 向每个匹配的元素的内部的结尾处追加内容
appendTo() 每个匹配的元素追加到指定的元素中的内部的结尾处
prepend() 向每个匹配元素的内部的开始处插入内容
prependTo() 将每个匹配的元素插入到指定元素内部的开始处
A.append(B) 等价于 B.appendTo(A)
after() 向每个匹配的元素之后插入内容
insertAfter() 将每个匹配的元素的插入到指定元素之后
before() 向每个匹配的元素之前插入内容
insertBefore() 将每个匹配的元素插入到指定元素之前
实验三
需求1:点击submit按钮时,检查是否选择type,若没有选择给出提示:“请选择类型”;
检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:“请给出内容”
若检查都通过,则在相应的ul节点中添加对应的li节点。
需求2:使包括新增的li都能响应onclick事件:弹出li的文本值。
$(function(){
function showContent(li){
alert($(li).text());
}
$("li").click(function(){
showContent(this);
});
$(":submit").click(function(){
var $type = $(":radio[name='type']:checked");
if($type.length == 0){
alert("请选择类型");
return false;
}
var type = $type.val();
var $name = $(":text[name='name']");
var name = $name.val();
//$.trim(str):可以去除str的前后空格
name = $.trim(name);
$name.val(name);
if(name == ""){
alert("请输入内容");
return false;
}
$("<li>"+name+"</li>").appendTo($("#" + type)).click(function(){
showContent(this);
});
//取消submit按钮的默认行为
return false;
});
})