小强的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(超文本标记语言) ...
随机推荐
- 14.ZooKeeper Java API 使用样例
转自:http://www.aboutyun.com/thread-7332-1-1.html package com.taobao.taokeeper.research.sample; import ...
- Mycat 读写分离+分库分表
上次进过GTID复制的学习记录,已经搭建好了主从复制的服务器,现在利用现有的主从复制环境,加上正在研究的Mycat,实现了主流分布式数据库的测试 Mycat就不用多介绍了,可以实现很多分布式数据库的功 ...
- android问题及其解决-优化listView卡顿和怎样禁用ListView的fling
问题解决-优化listView卡顿和怎样禁用ListView的fling 前戏非常长,转载请保留出处:http://blog.csdn.net/u012123160/article/details/4 ...
- 【原创】基于pyautogui进行自动化测试
前期准备: python3.6 pyautogui pywinauto 以下代码实现内容: 1.打开记事本 2.记事本中输入This is a test 3.保存内容 4.退出进程 import py ...
- Day1：If else流程判断
一.if...else语句 if 条件成立: 执行条件成立后的代码 else: 执行条件不成立的代码 注:注意有冒号,python会强制缩进!一般语句都必须顶格写,缩进是缩进一个tab键,等于4个空格 ...
- SQL Server 中计算农历
1.建一表,放初始化资料 因为农历的日期,是由天文学家推算出来的,到现在只有到2049年的,以后的有了还可以加入! CREATE TABLE SolarData ( yearId int no ...
- 对生产者和消费者问题的另一个解决办法是使用QWaitCondition（封装好了wakeOne，wakeAll，而且与QReadWriteLock对接，几乎是万能的办法）
对生产者和消费者问题的另一个解决办法是使用QWaitCondition,它允许线程在一定条件下唤醒其他线程.其中wakeOne()函数在条件满足时随机唤醒一个等待线程,而wakeAll()函数则在条件 ...
- 手把手教你----MyEclipse中 配置 Tomcat
电脑上配置Tomcatserver 安装Tomcat并配置环境变量 測试是否配置成功 MyEclipse中配置Tomcat 想要开发Java Web的程序.首先在MyEclipse中必须配置Tomca ...
- 在scala中调用java代码
详细代码请见https://github.com/lujinhong/scalademo 在scala中调用java代替非常非常简单,直接调用即可 (一)一个简单示例 1.创建一个java类 pa ...
- JAVA 日志库3
Commons Logging和SLF4J都是基于相同的设计,即从一个LogFactory中取得一个命名的Log(Logger)实例,然后使用这个Log(Logger)实例打印debug.in ...