小强的HTML5移动开发之路（36）——jQuery中的DOM操作_H5之家

1、查询

利用选择器查找节点

使用 html() / text() / attr() 输出节点文本和属性值。

注意：下拉列表使用 val()

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script>
			$(function(){
				$('#b1').click(function(){
					//$('#d1').html('java');
					//将节点的属性读出来
					//$('#d1').attr('style');
					//$('#d1').attr('style','font-size:30pt');
					$('#d1').attr('class','s1');
				});
			});
		</script>
		<style>
			.s1{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="d1">hello</div>
		<ul>
			<li>item1</li>
			<li id="i1">item2</li>
			<li>item3</li>
		</ul>
		<input type="button" id="b1" value="点我"/>
	</body>
</html>

2、创建

$(html)

3、插入节点

append();

prepend();

after();

before();

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script>
			$(function(){
				$('#b1').click(function(){
					var $node = $('<li>item4</li>');
					$('ul').append($node);
					//$('ul').append('<li>item4</li>'); 和上面是等价的
				});
			});
		</script>
		<style>
			.s1{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="d1">hello</div>
		<ul>
			<li>item1</li>
			<li id="i1">item2</li>
			<li>item3</li>
		</ul>
		<input type="button" id="b1" value="点我"/>
	</body>
</html>

4、删除节点

remove();

remove(selector);

empty();清空内容

		$('#b1').click(function(){
			//$('ul li:eq(1)').remove();
			$('ul li').remove('li[id=i1]');
     			$('ul li:eq(1)').empty();
		});

5、复制节点

clone();

clone(true); 使复制的节点也具有行为

6、属性操作

读取：attr(' ');

设置：attr(' ', ' ');

或者一次设置多个属性attr({" ", " "});

删除：removeAttr(' ');
		$('#b1').click(function(){
			$('#d1').attr({"class":"s1","style":"font-size:40pt"});
		});

7、样式操作

获取和设置：attr("class", " ");

追加：addClass(' ', ' ');

切换样式：toggleClass(' ', ' ');

是否有某个样式hasClass(' ');

css(' ', ' ');

css({ ' ': ' ', ' ': ' '});
		$('#b1').click(function(){
			$('div:first').addClass('s1 s2');
			$('div:first').removeClass('s2');
			$('div:first').toggleClass('s1');
		});

8、设置和获取html,文本和值

html() / html(' ')

text() / text(' ')

val() ; 设置和读取元素的值

9、遍历

children()

next();

prive();

siblings():所有兄弟

10、综合实例

	<script>
	$(function(){

		$('#b1').click(function(){
			//$('#d1').html('java');
			//将节点的属性读出来
			$('#d1').attr('style');
			$('#d1').attr('style','font-size:30pt');
			$('#d1').attr('class','s1');
		});

		$('#b1').click(function(){
			var $node = $('<li>item4</li>');
			$('ul').append($node);
			//$('ul').append('<li>item4</li>'); 和上面是等价的
		});

		$('#b1').click(function(){
			//$('ul li:eq(1)').remove();
			$('ul li').remove('li[id=i1]');
     			$('ul li:eq(1)').empty();
		});

		$('#b1').click(function(){
			var $node = $('ul li:eq(2)').clone();
			$('ul').append($node);
			
			var $node = $('ul li:eq(2)').clone(true);
			$('ul').append($node);
		});

		$('ul li:eq(2)').click(function(){
			//可以使用this来访问符合$('selecotr')查询条件的节点
				//alert(this.innerHTML);
				alert($(this).html());
		});

		$('#b1').click(function(){
			$('#d1').attr({"class":"s1","style":"font-size:40pt"});
		});

		$('#b1').click(function(){
			$('div:first').addClass('s1 s2');
			$('div:first').removeClass('s2');
			$('div:first').toggleClass('s1');
		});
		$('#b1').click(function(){
			alert($('input[type=text]').val();
			alert($('select').val());
			//单选和多选框不能这样写
			alert($(':radio').val());
			alert($(':checkbox').val());
			//要这样去写
			var $node = $(':radio');
			$node.each(function(){
				//if($(this).attr('checked')){
				//	alert($(this).val());
				/