JQuery学习笔记-JQuery的DOM操作

时间：2014-10-17 12:09:55 收藏：0 阅读：269

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对象的各种属性

参考 http://shamrock.blog.51cto.com/2079212/1564560

http://shamrock.blog.51cto.com/2079212/1564688

查找节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//测试JQuery操作文本节点 属性节点
	$(function() {
		//操作文本节点，通过JQuery对象的text()方法
		alert($("#bj").text());
		$("#bj").text("北京天安门");
		
		//操作属性节点 通过JQuery对象的attr()方法
		alert($(":text[name=‘username‘]").attr("value"));
		$(":text[name=‘username‘]").attr("value", "syd");
	});
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="sz2">深圳2</li>
    </ul>
    <p>你喜欢哪本书？</p>
    <ul id="book">
        <li id="xyj" name="xyj">西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>水浒传2</li>
    </ul>
    <br/>
    gender:
    <input type="radio" name="gender" value="male"/>Male
    <input type="radio" name="gender" value="female"/>Female
    <br/>
    <input type="text" name="username" value="umgsai"/>
</body>
</html>

创建节点并且添加到指定的位置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//测试JQuery创建节点并且插入节点到指定位置
	$(function() {
		//创建一个p节点,并添加到city下
		//$("<li id=‘atguigu‘>尚硅谷</li>").appendTo("#city");
		//$("#city").append("<li id=‘atguigu‘>【尚硅谷】</li>");
		//alert($("#atguigu").text());
		
		//接到第一个节点的 前面
		$("<li id=‘atguigu‘>尚硅谷1</li>").prependTo($("#city"));
		//$("#city").prepend("<li id=‘atguigu‘>【尚硅谷】</li>");
		
		//插入到指定位置的后面
		//$("<li id=‘atguigu‘>尚硅谷2</li>").insertAfter($("#bj"));
		$("#bj").after($("<li id=‘atguigu‘>尚硅谷2</li>"));
		
		//插入到指定位置的前面
		//$("<li id=‘atguigu‘>尚硅谷3</li>").insertBefore($("#bj"));
		$("#bj").before($("<li id=‘atguigu‘>尚硅谷4</li>"));
	});
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="sz2">深圳2</li>
    </ul>
    <p>你喜欢哪本书？</p>
    <ul id="book">
        <li id="xyj" name="xyj">西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>水浒传2</li>
    </ul>
    <br/>
    gender:
    <input type="radio" name="gender" value="male"/>Male
    <input type="radio" name="gender" value="female"/>Female
    <br/>
    <input type="text" name="username" value="umgsai"/>
</body>
</html>

本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1565065

原文：http://shamrock.blog.51cto.com/2079212/1565065