小强的HTML5移动开发之路(36)——jQuery中的DOM操作

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());
				//}
				if(this.checked){
					alert(this.value);
				}
			});
		});
		$(‘#b1‘).click(function(){
			var $items = $(‘ul‘).children();
			//如果查询返回的是多个节点,可以使用length属性返回节点的个数
			alert($items.length);
			//如何遍历
			$items.each(function(i){
				//$(this)html();
				alert(this.innerHTML);
			});
		});
	});
	</script>
		
	<style>
		.s1{
			color:yellow;
		}
		.s2{
			border:1px solid black;
		}
	</style>
	
	<body>
		<div>hello</div>
		<ul>
			<li>item1</li>
			<li id="i1">item2</li>
			<li>item3</li>
		</ul>
		<div id="d1" style="background-color:red;">hello</div>
		<input type="button" value="clickMe" id="b1"/>
		<input type="text" name="name"/><br/>
		male:<input type="radio" name="sex" value="m"/>
		female:<input type="radio" name="sex" value="f"/>
		fishing:<input type="checkbox" name="intrest" value="fishing"/>
		cookinng:<input type="checkbox" name="intrest" value="cooking"/>
		sleeping:<input type="checkbox" name="intrest" value="sleeping"/>
		<select>
			<option value="bj">beijing</option>
			<option value="sh">shanghai</option>
			<option value="tj">tianjing</option>
		</select>
	</body>


小强的HTML5移动开发之路(36)——jQuery中的DOM操作

上一篇:小强的HTML5移动开发之路(35)——jQuery中的过滤器详解


下一篇:电源管理之android系统suspend to disk的实现(二)