小强的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(超文本标记语言) ...
随机推荐
- C Tricks（十八）—— 整数绝对值的实现
为正还是为负:(对 int 类型而言,第一位为符号位,其余为数值,则右移 31 位,再与 1 求与) 如果为正 ⇒ 返回原值 如果为负 ⇒ 对其二进制形式各位取反 + 1 int abs(int x) ...
- ORACLE11g R2【单实例 FS→单实例FS】
ORACLE11g R2[单实例 FS→单实例FS] 本演示案例所用环境: primary standby OS Hostname pry std OS Version RHEL6.5 RHEL6 ...
- Cocos2d 游戏状态机
加cocos2d 是标题党. 事实上跟cocos2d无关. 1.游戏背景介绍 比方有这么一个"记忆"类的比赛游戏.你和电脑对战.轮到谁的回合,谁翻两张牌.假设两张牌一样,就消掉这两 ...
- Android 一个异步SocketHelper
发送流程:首先定义一个缓冲池,发送数据时仅仅是将待发送的数据加入到缓冲池中,再由后台的工作线程从缓冲池中取得待发送数据进行发送.可能某些情况下在数据发送完成时需要做一些处理(比如写日志),便定义了一个 ...
- oracle主机名修改
转自:http://www.cnblogs.com/tippoint/archive/2013/04/07/3003810.html 有的情况下,我们需要修改已经安装oracle数据库的主机名.以下是 ...
- StackExchange.Redis 官方文档(六) PipelinesMultiplexers
原文:StackExchange.Redis 官方文档(六) PipelinesMultiplexers 流水线和复用 糟糕的时间浪费.现代的计算机以惊人的速度产生大量的数据,而且高速网络通道(通常在 ...
- Node.js自学笔记之回调函数
写在前面:如果你是一个前端程序员,你不懂得像PHP.Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择.这段时间对node.js进行了简单的学习,在这里 ...
- [Angular] Intercept HTTP requests in Angular
Being able to intercept HTTP requests is crucial in a real world application. Whether it is for erro ...
- OC的DES加密，使与java的Cipher类用DES/CBC/PKCS5Padding方式的加密结果同样
问题说明: 近期用到DES加密,而且要与java的Cipher类加密的结果保持一致.没研究过java的Cliper,但工作中Cipher依据DES/CBC/PKCS5Padding加密方式生成了一个字 ...
- 2、HZK和FreeType的使用
HZK16汉字库的使用 定义如下: unsigned char str[]="我" 在运行时str被初始化为2个字节长度,内容为“我”的GBK码,为:0xCE(区码),0xD2(位 ...