小强的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(超文本标记语言) ...
随机推荐
- viewPager-基本实现示例
直接看代码 package com.example.myviewpager; import android.app.Activity; import android.os.Bundle; import ...
- 深入并发AQS二
AQS须要解决下面几个问题: 1.锁状态,怎样保证并发情况下可以安全的更新? 2.当前线程不能获取锁时,放在哪里? AQS是放在一个队列其中 3.怎样提高效率? AQS的主要职责是当获取不到锁时.将线 ...
- 怎么做好看的html5游戏界面
怎么做好看的html5游戏界面 一.总结 一句话总结:html5应该是完全可以做特别好看的游戏界面的.最下面那个背景图完全是一张图片动的雪和小动物可以是gif,或者是canvas,右边的那各个选择框就 ...
- php字符串函数分类总结
php字符串函数分类总结 一.总结 explode str_split str_word_count strtolower 二.php字符串函数分类总结 php内置了98个字符串函数(除了基于正 ...
- Rick's RoTs -- Rules of Thumb for MySQL--转载
原文地址:http://mysql.rjweb.org/doc.php/ricksrots Brought to you by Rick James Here are 160+ tips, trick ...
- 右键菜单添加带图标的Notepad++
给Notepad++ 加带图标右键菜单 方式一: 拷贝以下代码建立一个reg文件,替换相关路径,保存,双击运行加入注册表 Windows Registry Editor Version 5.00 [H ...
- PythonOOP面向对象编程2
编程语言的特征: 继承 封装 多态 如:C++ / Java / Python / Swift / C# inheritance 继承 drived 派生 概念: 继承是指从已有的类中衍生出新类,新类 ...
- warning: expression result unuesd 可能原因是函数忘了加括号,
- Xvisor ARM32 启动分析
Linux内核历史悠久,特性丰富,但是代码量庞大,各个子系统交叉繁琐.对于想要将操作系统内核各个特性研究一遍的人,有时候也只好"望Linux兴叹".Xvisor是一个较新的Type ...
- [array] leetCode-16. 3Sum Closest -Medium
16. 3Sum Closest -Medium descrition Given an array S of n integers, find three integers in S such th ...