小强的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(超文本标记语言) ...

随机推荐

.NET中StringBuilder用法实例分析
string s1 = "33"; string s2 = "44"; string s3 = "55"; //需求是把s1 s2 s3拼接 ...
调色板原理 & 编程
调色板原理 & 编程逻辑调色板结构LOGPALETTE,该结构定义如下: typedef struct tagLOGPALETTE { WORD palVersion; //调色板的板本号, ...
洛谷——P1601 A+B Problem（高精）
https://www.luogu.org/problem/show?pid=1601#sub 题目背景无题目描述高精度加法,x相当于a+b problem,[b][color=red]不用考虑 ...
QQ在线交谈代码
非常多商业站点的右边都会有一个固定或者浮动的层显示QQ在线在线交谈或者咨询的button.当浏览者点击了就会弹出相应的对话框. 这里的QQ交谈有两种: 一种是企业QQ,那要生成以上的功能就非常easy ...
HDOJ 5409 CRB and Graph 无向图缩块
无向图缩块后,以n所在的块为根节点,dp找每块中的最大值. 对于每一个桥的答案为两块中的较小的最大值和较小的最大值加1 CRB and Graph Time Limit: 8000/4000 MS ( ...
cordova android
Image.png Image.png http://www.jscss.cc/2016/10/18/cordova.html 装一个全局的cordova: 官网介绍:http://cordova.a ...
Java基础学习总结(49)——Excel导入导出工具类
在项目的pom文件中引入 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifac ...
Java 学习（19）：Java 多线程编程
Java 多线程编程 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特 ...
zeros() 函数——MATLAB
zeros函数——生成零矩阵 ones函数——生成全1阵 [zeros的使用方法] B=zeros(n):生成n×n全零阵. B=zeros(m,n):生成m×n全零阵. B=zeros([m n]) ...
Java的压缩、解压及压缩加密、解密解压样例
为了节约带宽.加快传送速度,http协议支持gzip的压缩,但假设我们的app与后台不是通过http协议通讯的.那么压缩.解压这个流程须要自己写.以下给出compress和decompress的代码: ...

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

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

随机推荐

热门专题