强大的JQuery(三)--操作html与遍历

前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历。

一、jquery操作html

1.获取内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值

attr()- 方法用于获取属性值。

实例:

$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });

$("button").click(function(){ alert($("#w3s").attr("href")); });

2、设置内容 - text()、html() 以及 val()

实例:

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });

$("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); });

3、添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

实例:

function appendText() { var txt1="
Text."; // 以 HTML 创建新元素 var txt2=$("
").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }

function afterText() { var txt1="I "; // 以 HTML 创建新元素 var txt2=$("").text("love "); // 通过 jQuery 创建新元素 var txt3=document.createElement("big"); // 通过 DOM 创建新元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 }

4、删除元素

remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素

5、操作css
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
举例:

$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });

二、JQuery遍历
1、什么是遍历?
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
强大的JQuery(三)--操作html与遍历

解释:

元素是

的父元素,同时是其中所有内容的祖先。

  • 元素是
  • 元素的父元素,同时是

    的子元素

    左边的

    • 元素是 的父元素,

      的子元素,同时是

      的后代。

      元素是

      • 的子元素,同时是

        的后代。 vcD4KPHA+wb249iA8bGk+INSqy9jKx82ssPujqNO109DP4M2stcS4uNSqy9ijqaGjIDwvcD4KPHA+09Kx37XEIDxsaT4g1KrL2MrHIDxiPiC1xLi41KrL2KOsPHVsPiC1xNfT1KrL2KOszazKscrHIDxkaXY+ILXEuvO0+qGjIDwvcD4KPHA+PGI+INSqy9jKx9PSsd+1xCA8bGk+ILXE19PUqsvYo6zNrMqxyscgPHVsPiC6zSA8ZGl2PiC1xLrztPqhoyA8L3A+CjxoMj4yoaLP8snPsenA+jwvaDI+CjxwPnBhcmVudHMoKSC3vbeot7W72LG70aHUqsvYtcTL+dPQ1+bPyNSqy9ijrMv80rvCt8/yyc/WsbW9zsS1tbXEuPnUqsvYICg8aHRtbD4poaM8L3A+CjxwPjwvcD4KPHA+cGFyZW50KCkgt723qLe1u9ixu9Gh1KrL2LXE1rG907i41KrL2KGjPC9wPgo8cD5wYXJlbnRzVW50aWwoKSC3vbeot7W72L3p09rBvbj2uPi2qNSqy9jWrrzktcTL+dPQ1+bPyNSqy9ihozwvcD4KvtnA/Qo8cD48cHJlIGNsYXNzPQ=="brush:java;">$(document).ready(function(){ $("span").parentsUntil("div"); });

        3、向下遍历

        children() 方法返回被选元素的所有直接子元素。

        find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

        4、同辈遍历

        next() 方法返回被选元素的下一个同胞元素。

        nextAll() 方法返回被选元素的所有跟随的同胞元素。

        nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

        5、过滤

        first() 方法返回被选元素的首个元素。

        last() 方法返回被选元素的最后一个元素。

        eq() 方法返回被选元素中带有指定索引号的元素。

        filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

        not() 方法返回不匹配标准的所有元素。

        例如

        $(document).ready(function(){ $("p").not(".intro"); });

        $(document).ready(function(){ $("div p").last(); });

        $(document).ready(function(){ $("div p").last(); });

        关于jquery遍历的函数还有很多,我就不一一列举了,有兴趣的朋友请自行查看Query帮助文档。

        要想掌握好一门语言,即使是一门非常简单的语言,实践和思考都是必不可少的,JQuery强大而简单,需要我们在以后的工作学习中反复的运用才能去真正掌握。

分类:默认分类 时间:2012-01-05 人气:7
本文关键词:
分享到:

相关文章

  • JavaScript/jQuery.HTML.CSS 构建 Web IM 远程及时聊天通信程序 2012-11-11

    这篇文章主要介绍用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript(jsjac)框架构建一个BS Web的聊天应用程序。此程序可以和所有连接到Openfire服务器的应用进行通信、发送消息。如果要运行本程序还需要一个聊天服务器Openfire, 以及需要用到Http方式和Openfire通信的第三方库(JabberHTTPBind)。 JabberHTTPBind是jabber提供的XMPP协议通信的Http bind发送的形式,它可以完成WebBrows

  • JavaScript(20)jQuery HTML 添加和删除元素 2013-12-09

    jQuery - 添加元素 通过 jQuery,可以很容易地添加新元素/内容。 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法在被选元素的结尾插入内容。 $("p").append("Some appended text."); jQuery prepend() 方法

  • 解析Jquery中如何把一段html代码动态写入到DIV中(实例说明) 2014-03-18

    本篇文章是对在Jquery中把一段html代码动态写入到DIV中的实现方法进行了详细的分析介绍,需要的朋友可以参考下 复制代码 代码如下: nav1 = "<div style='width:145px;height:62px;float:left;background:url(login_image/index/on_1.jpg);font-size:18px;color:white;line-height:65px;' id='left_tab" + "</div>" 复制

  • 12个jQuery在HTML应用技巧 2014-12-22

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.ge

  • JQuery判断HTML元素是否存在的办法 2015-03-11

    本篇文章主要是对JQuery判断HTML元素是否存在的两种解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在工作中遇到这么一种情况,页面部分HTML元素是通过服务端语言根据不同情况控制显示不同内容的,然而在同一个页面某些情况在DOM准备好后需要用到Ajax跟服务端通讯,而有些情况不需要,那么我只想在页面存在我指定的HTML标记的时候我才触发Ajax部分,毕竟这样可以减轻服务器的负担,废话一大堆,转入正题: 其实解决JQuery判断元素是否存在的问题,方法很简单: if($("#

  • jQuery在html有效在jsp无效的原因及解决方法 2014-11-26

    最近用jQuery来写下拉框的选项值的左右移动,放到jsp里面就不能用了,经过测试终于找到了解决方法在此与大家分享下 最近用jQuery来写下拉框的选项值的左右移动,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

  • jQuery 入门教程(18): 操作HTML元素的大小 2012-11-12

    jQuery 提供下面方法来控制HTML元素的大小: width() height() innerWidth() innerHeight() outerWidth() outerHeight() 一般影响HTML元素 大小各部分的示意图如下所示: jQuery width()和height()方法 width()用来设置或取得元素的宽度,height()设置和取得元素的高度。 下面代码取得<div>元素的高度和宽度。 [javascript] $("button").click(fu

  • jQuery 入门教程(15): 删除HTML元素 2013-06-20

    jQuery使用下面两个方法来删除或是清空某个HTML元素。 remove() – 删除指定的元素(包括其子元素) empty() – 清空指定元素的子元素 例如: [html] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js">

  • jQuery 入门教程(12): HTML Get 2015-01-09

    jQuery库包含了很多用来改变和操作HTML元素及其属性的方法。 其中一个非常重要的部分就是jQuery可以用来操作DOM。 本篇介绍使用jQuery来取得DOM节点元素的值或属性。 其中三个简单而有用的方法如下: text() – 设置或取得指定元素的文本内容。 html() – 设置或取得指定元素的内容(包括HTML标记) val() – 设置或取得表单某个输入域的值。 例如,下面代码使用html()和text()方法取得HTML元素的内容: [javascript] $("#btn1")

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.073 (s). 10 q(s)