小强的HTML5移动开发之路（36）—

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移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

solr索引创建流程
solr索引创建流程: 分词组件Tokenizer 分词组件(Tokenizer)会做以下几件事情(这个过程称为:Tokenize),处理得到的结果是词汇单元(Token). 1.将文档分成一个一个单 ...
TreeView 的简单实用
TreeView组件是由多个类来定义的,TreeView组件是由命名空间"System.Windows.Forms"中的"TreeView"类来定义的,而其中的 ...
用Promise对象封装JQuery的AJAX过程
let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...
Python编写Appium测试用例(1)
有段时间没有使用python编写测试用例了,很长时间以来,感觉appium这个测试工具确实不错,今天又重新拿起来,分享一下自己学习的一些用例,欢迎大家一起交流.学习! 1.登录客户端 #coding= ...
Monkey (压力测试)-移动端手机压力测试工具 monkey以及monkeyrunner
4. Monkey (压力测试) 这个是Android提供的系统工具.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行压力测试.Monkey测试是一种 ...
opencv cvPreCornerDetect
关于OpenCv中cvPreCornerDetect 运行出错解决方法 http://m.blog.csdn.net/blog/wode0239 由于书本上示例的不全,相信大家在做的时候,肯定是无从下 ...
很吊炸天的Xcode插件，你想要的这都有
整理自BigPolarBear的博客 .杂技杂记以及CC此前整理. 古人云"工欲善其事必先利其器",打造一个强大的开发环境.是马上提升自身战斗力的绝佳途径!下面是搜集的一些有力 ...
洛谷——P3128 [USACO15DEC]最大流Max Flow
https://www.luogu.org/problem/show?pid=3128 题目描述 Farmer John has installed a new system of pipes to ...
使用MongoDb连接数据库服务器
链接MongoDb数据库服务器的字符串格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN] ...
Java与模式：装饰(Decorator)模式
装饰模式使用被装饰类的一个子类的实例.把client的调用委派到被装饰类,装饰模式的关键在于这样的扩展是全然透明的. 装饰模式在Java种使用也非常广泛,比方我们在又一次定义button.对话框等 ...

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

小强的HTML5移动开发之路（36）——jQuery中的DOM操作的更多相关文章

随机推荐

热门专题