小强的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(超文本标记语言) ...
随机推荐
- ubuntu-工作环境配置（van）
我们平时用到的工具主要vim,retag_app,提交代码,以及一些常用命令,他们主要对应一下几个文件 1.vim ->.vimrc 2.代码提交->gitconfig 3.常用命令-&g ...
- js面向对象1----了解构造函数
一.构造函数与实例的区别 1 构造函数 构造函数主要是一种用于生成对象的饼干模具,这些对象具有默认属性和属性方法,它可以创建多个共享特定特性和行为的对象. 构造函数只是一个函数,但当函数遇到了ne ...
- vue 星星评分组件
显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...
- Android实践之ScrollView中滑动冲突处理
转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/52130923 1. 前言 在Android开发中,假设是一些简单的布局.都非常easy ...
- [转]C#连接操作mysql实例
本文转自:http://hi.baidu.com/zhqngweng/item/c4d2520cb7216877bfe97edf 第三方组件:Mysql.Data.dll说明:去官方网站下载Mysql ...
- 软件——机器学习与Python，输入输出的用法
转自:http://www.cnblogs.com/graceting/p/3875438.html 输入很简单 x = input("Please input x:") Plea ...
- Day1：用户交互与格式化输出
一.用户交互 1.input()方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan username = inpu ...
- amazeui页面分析3
amazeui页面分析3 一.总结 1. 本质是list列表,是ul套li的形式,只不过li里面是图片 <li class="am-g am-list-item-desced am-l ...
- Machine-learning of Andrew Ng
Machine-learning of Andrew Ng 1.基础概念 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科.最近二十年,机器学习为我们带来了自动驾驶汽车.实用的语音识别.高效 ...
- UVA 11388 - GCD LCM 水~
看题传送门 题目大意: 输入两个数G,L找出两个正整数a 和b,使得二者的最大公约数为G,最小公倍数为L,如果有多解,输出a<=b且a最小的解,无解则输出-1 思路: 方法一: 显然有G< ...