强大的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强大而简单,需要我们在以后的工作学习中反复的运用才能去真正掌握。
转载于:https://www.cnblogs.com/jinfulin/p/4007303.html
强大的JQuery(三)--操作html与遍历相关推荐
- jQuery 元素操作——遍历元素
jQuery 元素操作 主要是遍历.创建.添加.删除元素操作 <!DOCTYPE html> <html lang="en"><head>< ...
- jQuery—常用API(jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作)
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- jQuery——入门(三)JQuery DOM操作(核心处理和文档处理)
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- jQuery元素操作-遍历元素
1.jQuery元素操作 1.1.遍历元素-语法1 主要遍历dom对象 <!DOCTYPE html> <html lang="en"> <head& ...
- 【08】jQuery:01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
- JQuery 函数 操作
.jQuery主函数 jQuery主函数的参数 参数 说明 $(function) 指定DOM就绪后才执行的函数 $(selector) $(selector,context) 从页面中选择元素 $( ...
- jQuery(一)—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
- Jquery(四)对象遍历及特效
Jquery(四)对象遍历及特效 一.jQuery 对象遍历 1.children('selector') 2.find('selector') 3.next() 4.nextAll() 5.pare ...
最新文章
- 一种使用GDI+对图片尺寸和质量的压缩方法
- Gym - 101480K_K - Kernel Knights (DFS)
- Robotium调用getActivity()导致程序挂起的方法
- linux shell 加、减、乘、除
- 信息学复赛用linux,NOIP/CSPJ 复赛中noilinux里的atbiter测评机的使用(附数据)
- android+动画队列,Android属性动画详解
- matlab与树莓派通信
- word把选择答案弄到题目里_老师们看过来,如何快速整理试题答案
- console的一些方法
- DataSet之间的赋值
- 关系型数据库的ACID特性
- 同款视频一键制作生成微信小程序源码下载恶搞视频,特效视频,唯美视频等等
- 【中级】2017项目集成管理工程师备考第五章-立项管理(上)
- edge浏览器设置启动时默认打开新标签页
- 记录一个非常实用的gif制作工具licecap
- windows8.1 下搭建配置apache+php+mysql
- 公司接了一个电商项目要在1个月内写10w行代码,该怎么搞定?
- 来!带你认识几种最流行的Python编辑器/IDEs
- Opencv中BGR、YUV、YUV_I420\NV12分析
- 强化学习(一)-->隐马尔科夫模型HMM-->HMM模型基础
热门文章
- 网站推广下吉利关联公司公开“车辆故障预测方法”将在事故发生前预警
- 网络推广中常见的网站建设细节中有哪些重点值得网络推广专员重视?
- 浅析如何才能提高网站的信息交互能力?
- php周计划表_PHP学习计划书
- Linux下给arm的引脚电平,ARM-Linux GPIO操作事宜
- c语言小学生算法,急求:C语言小学生算法练习软件实现的任务:面向小学生,随机选择两个整数进行加、减、乘、除,要求学生解答。设计内容:1、电...
- linux密码修改时间,linux 查看、修改用户及密码过期时间(示例代码)
- go语言学习(1)map常规使用
- mysql 读写分离中间层
- 从pfx里面 解析出公私钥