小强的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移动开发之路（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(超文本标记语言) ...
随机推荐
- HTTP请求报文、响应报文
HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...
- spring扫描自定义注解并进行操作
转载:http://blog.csdn.net/cuixuefeng1112/article/details/45331233 /** * 扫描注解添加服务到缓存以供判断时候为对外开放service ...
- 将一个类写成WebService服务的形式
WebService是一种跨编程语言和跨操作系统平台的远程调用技术,主要解决不同语言写的应用程序之间.不同平台(linux/windows/andrid)之间的通信,即异构系统之间的通信. 常用的天气 ...
- 如何使用 PyCharm 将代码上传到GitHub上（详细图解）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶说明 测试条件:需要有GitHub账号以及在本地安装了Git工具,无论是Linux环境还是Windows都是一样的 如果还没有 ...
- GO语言学习（一）Windows 平台下 Go 语言的安装和环境变量设置
1. Go 语言 SDK 安装包下载和安装 GO语言安装包下载地址:https://www.golangtc.com/download 下载 go1.9.2.windows-amd64 2. Go 语 ...
- Android 调用系统邮件,发送邮件到指定邮箱
在项目中,最后有一个联络我们,要求是点击号码还有邮箱地址能够发送邮件,这时候解决的方案其实有两种,一种是调用系统发邮件的软件,可以添加邮箱账号就可以发送邮件:第二种是使用javamail来发送邮件.在 ...
- 使用ClassyShark压缩你的项目
原文链接 : Shrinking Your Build With No Rules and do it with Class(yShark) 原文作者 : Roberto Orgiu 译文出自 : 开 ...
- 公钥，私钥和数字签名这样最好理解 分类： B3_LINUX 2015-05-06 16:25 59人阅读 评论(0) 收藏
一.公钥加密 假设一下,我找了两个数字,一个是1,一个是2.我喜欢2这个数字,就保留起来,不告诉你们(私钥),然后我告诉大家,1是我的公钥. 我有一个文件,不能让别人看,我就用1加密了.别人找到了这个 ...
- Spring配置文件头及xsd文件版本
最初Spring配置文件的头部声明如下: Xml代码 <?xml version="1.0" encoding="UTF-8"?> <!D ...
- IL命令初学者要知道的事
在一个中间语言程序中,如果某一行以“.”开始,代表这是一个传输给汇编工具的指令:而不是以“.”开始的行是中间语言的代码.上图中.method是方法定义指令,定义了Main方法,参数在“()”中,IL代 ...