jQuery学习第二天

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>")或$("

")
创建文本节点就是在创建元素节点时直接把文本内容写出来；创建属性节点也是在创建元素节点时一起创建。

插入节点

动态创建的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；
	});
})