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

随机推荐

bootstrap课程11 模态框如何使用
bootstrap课程11 模态框如何使用一.总结一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...
Android Studio运行报错，Cannot find System Java Compiler. Ensure that you have installed a JDK......
详细报错信息如下 Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Cannot find System J ...
在linux环境下增加别名
编辑.cshrc文件:gvim ~/.cshrc 增加要添加的别名,例如:alias la 'ls -a' qw保存退出 source ~/.cshrc即可生效
Sql Server 2014完全卸载
经历过好多次Sql server的安装与卸载,有时发现自己卸载的费时费力,单纯地卸载个软件就要吐血了,那么现在我觉得是时候整理一下了. 1.在运行中输入services.msc,然后找到所有跟Sql ...
使用Tomcat发布war包
第一步:下载tomacat 1.下载地址:http://tomcat.apache.org 2.解压后目录如下 3.双击bin文件夹下startup.bat 即可启动tomcat, 计算机会弹出控制台 ...
RMAN-03002、RMAN-06059
使用RMAN备份的时候无法正常备份,抛出以下错误: RMAN-03002: failure of backup command at 04/20/2015 18:55:45 RMAN-06059: e ...
Spring Boot Shiro 权限管理
Spring Boot Shiro 权限管理标签: springshiro 2016-01-14 23:44 94587人阅读评论(60) 收藏举报 .embody{ padding:10px ...
Android新控件RecyclerView剖析
传智·没羽箭(传智播客北京校区Java学院高级讲师) 个人简单介绍:APKBUS专家之中的一个,黑马技术沙龙会长,在移动领域有多年的实际开发和研究经验.精通HTML5.Oracle.J2EE .Jav ...
Android 最火的高速开发框架AndroidAnnotations使用具体解释
Android 最火的高速开发框架androidannotations配置具体解释文章中有eclipse配置步骤.Android 最火高速开发框架AndroidAnnotations简介文章中的简介. ...
使用MongoDb连接数据库服务器
链接MongoDb数据库服务器的字符串格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN] ...

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

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

随机推荐

热门专题