前两篇博客讲到了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 中非常重要的部分,就是操作 ...

随机推荐

C++中回调函数(CallBack)的使用
如果试图直接使用C++的成员函数作为回调函数将发生错误,甚至编译就不能通过. 其错误是普通的C++成员函数都隐含了一个传递函数作为参数,亦即“this”指针,C++通过传递this指针给其成员函数从而 ...
使用servlet实现文件上传
package com.zhanghaobo.fileupload; import java.io.File; import java.io.IOException; import java.util ...
mysql index的长度限制
在InnoDB Storage Engine中单独一个列的最大的索引长度为767bytes,utf8字符集中,一个字符占3个字节,所以如果列的类型为char,那么要想在此列上建立索引,此列最多只能有2 ...
Js 基本数据类型、引用数据类型
数据类型 1. ECMAScript变量包含两种不同类型的值:基本类型值.引用类型值: 2. 基本类型值:指的是保存在栈内存中的简单数据段: 3. 引用类型值:指的是那些保存在堆内存中的对 ...
sql 将一个表中的数据插入到另一个表中
列名不一定要相同,只要你在HH中列出要插入列的列表跟select from mm表中的选择的列的列表一一对应就可以了,当然两边的数据类型应该是兼容的. 比如:insert into h ...
C语言综述
1.预处理指令:在变异之前执行的指令. 系统自带的文件用<>,自己写的文件用""; .h成为头文件,用来声明一些常用的函数,假如想使用这些函数,就必须包含这个头文件(注 ...
VK Cup 2012 Qualification Round 2 C. String Manipulation 1.0 字符串模拟
C. String Manipulation 1.0 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/pr ...
Codeforces Round #225 (Div. 1) C. Propagating tree dfs序+树状数组
C. Propagating tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/383/p ...
uoj #118. 【UR #8】赴京赶考水题
#118. [UR #8]赴京赶考 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/118 Description ...
linux C 快速排序法
#include <stdio.h> // 数组长度 #define LENGTH(array) ( (sizeof(array)) / (sizeof(array[0])) ) /* * ...

强大的JQuery（三）--操作html与遍历