强大的JQuery（三）--操作html与遍历
前两篇博客讲到了JQuery的基础知识以及其动画效果，本篇将为大家介绍jquery操纵html以及jquery的遍历。
一、jquery操作html
1.获取内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr()- 方法用于获取属性值。
实例：
<span style="font-size:18px;">$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
</span>
<pre><span style="font-size:18px;">$("button").click(function(){
alert($("#w3s").attr("href"));
});
</span>
2、设置内容 - text()、html() 以及 val()
实例：
<span style="font-size:18px;">$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
</span>
<pre><span style="font-size:18px;">$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
</span>
3、添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例：
<span style="font-size:18px;">function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
</span>
<pre><span style="font-size:18px;">function afterText()
{
var txt1="<b>I </b>"; <span class="code_comment">// 以 HTML 创建新元素</span>
var txt2=$("<i></i>").text("love "); <span class="code_comment">// 通过 jQuery 创建新元素</span>
var txt3=document.createElement("big"); <span class="code_comment">// 通过 DOM 创建新元素</span>
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); <span class="code_comment">// 在 img 之后插入新元素</span>
}
</span>
4、删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
5、操作css
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
举例：
<span style="font-size:18px;">$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
</span>
二、JQuery遍历
1、什么是遍历？
jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
解释：
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
2、向上遍历
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parent() 方法返回被选元素的直接父元素。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
举例
<span style="font-size:18px;">$(document).ready(function(){
$("span").parentsUntil("div");
});
</span>
3、向下遍历
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
4、同辈遍历
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
5、过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
例如
<span style="font-size:18px;">$(document).ready(function(){
$("p").not(".intro");
});
</span>
<pre><span style="font-size:18px;">$(document).ready(function(){
$("div p").last();
});
</span>
$(document).ready(function(){
$("div p").last();
});
关于jquery遍历的函数还有很多，我就不一一列举了，有兴趣的朋友请自行查看Query帮助文档。
要想掌握好一门语言，即使是一门非常简单的语言，实践和思考都是必不可少的，JQuery强大而简单，需要我们在以后的工作学习中反复的运用才能去真正掌握。
强大的JQuery（三）--操作html与遍历的更多相关文章
- JQuery(三)——操作HTML和CSS内容
前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM ),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
- 转：jQuery 常见操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery Ajax 操作函数及deferred对象
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...
- jQuery 常见操作实现方式
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...
- 强大的JQuery（二）--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- JQuery常用操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery html操作
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 DOM = Document Object Model(文档对象模型) jQuery 中非常重要的部分,就是操作 ...
随机推荐
- CCF 201312-4 有趣的数 (数位DP, 状压DP, 组合数学+暴力枚举, 推公式, 矩阵快速幂)
问题描述 我们把一个数称为有趣的,当且仅当: 1. 它的数字只包含0, 1, 2, 3,且这四个数字都出现过至少一次. 2. 所有的0都出现在所有的1之前,而所有的2都出现在所有的3之前. 3. 最高 ...
- openNebula Image上传
Rack:ruby webserver框架 https://rack.github.io/ 文件上传使用基于tempfile 库 文件上传要经历两个过程: 1.上传文件传到opennebule sun ...
- 从UnitedStack OS 1.0 Preview试用申请问卷调查学习OpenStack
http://www.diaochapai.com/survey/ 您的角色最可能是? * (必填, 多选) OpenStack私有云用户,希望能将OpenStack/UOS用于公司内部私有云 云计算 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- RFIDler - An open source Software Defined RFID Reader/Writer/Emulator
https://www.kickstarter.com/projects/1708444109/rfidler-a-software-defined-rfid-reader-writer-emul h ...
- POJ 3006 Dirichlet's Theorem on Arithmetic Progressions 快筛质数
题目大意:给出一个等差数列,问这个等差数列的第n个素数是什么. 思路:这题主要考怎样筛素数,线性筛.详见代码. CODE: #include <cstdio> #include <c ...
- php计算脚本执行时间
利用PHP的microtime实现 function getCurrentTime () { list ($msec, $sec) = explode(" ", microtime ...
- Codeforces Beta Round #29 (Div. 2, Codeforces format) C. Mail Stamps 离散化拓扑排序
C. Mail Stamps Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/problem ...
- Java学习笔记（4）——JavaSE
一.HashMap HashMap以键值对的形式存储对象,关键字Key是唯一的,不重复的 1,key可以是任何对象,Value可以任何对象 2,重复的key算一个,重复添加是替换操作(会覆盖原来的元素 ...
- accept函数
accept()函数 系统调用 accept() 会有点古怪的地方的! 你能够想象发生 这种事情:有人从非常远的地方通过一个你在侦听 (listen()) 的port连接 (connect()) 到你 ...