jquery (对内容,元素,属性,class的操作)
对内容的操作:
捕获:获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值。
设置:设置内容
添加新内容:
text("新内容") - 设置所选元素的文本内容
html("新内容") - 设置所选元素的内容(包括 HTML 标记)
val("新内容") - 设置表单字段的值
添加新内容的同时,通过回调函数,拿到旧的内容和当前元素的下标:
<body>
<p>baidu.com.cn</p>
<p>baidu.com.cn</p>
<p>baidu.com.cn</p>
<button>添加新内容</button>
</body>
</html>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html(function(i,origValue){
//回调函数中i是当前被选元素的下标,origValue是原来的文本
return i+","+origValue + "/news";
});
});
});
</script>
对元素的操作:
添加元素:添加新的 HTML 内容
1.append() - 在被选元素的内部结尾插入内容
2.prepend() - 在被选元素的内部开头插入内容
3.after() - 在被选元素外部之后插入内容
4.before() - 在被选元素外部之前插入内容
删除元素:
1.remove() - 删除被选元素(及其子元素)
2.empty() - 从被选元素中删除其子元素
属性操作:
获取属性:attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href"));
});
设置属性:
attr("属性名","属性值") 方法也用于设置属性值。
多个属性:
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.baidu.com",
"title" : "百度"
});
});
添加新属性的同时,通过回调函数,拿到旧的属性和当前元素的下边:
<body>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值。</p>
</body>
</html>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".baidu").html(function(i,origValue){
//回调函数中i是当前被选元素的下标,origValue是原来的文本
return i+","+origValue + "/images";
});
});
});
</script>
删除属性:removeAttr() 从所有匹配的元素中移除指定的属性。
class类的操作:
addClass() 向匹配的元素添加指定的类名。
hasClass() 检查匹配的元素是否拥有指定的类。 removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
jquery (对内容,元素,属性,class的操作)的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()
jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...
- jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- jquery获取内容和属性的方法
通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...
- jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- <七> jQuery 设置内容和属性
设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 设置属性 jQuery attr( ...
- jQuery设置内容和属性方
何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...
- jquery选择伪元素属性的方法
CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...
- <六> jQuery 获得内容和属性
获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - ...
随机推荐
- 【前端知识体系-CSS相关】CSS预处理器
1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...
- Java,你告诉我 fail-fast 是什么鬼?
本篇我们来聊聊 Java 的 fail-fast 机制,文字一如既往的有趣哦. 01.前言 说起来真特么惭愧:十年 IT 老兵,Java 菜鸟一枚.今天我才了解到 Java 还有 fail-fast ...
- 看源码学编程系列之kafka(一)
kafka 由于它自身的高性能发送与消费能力,而受到广大企业的喜欢,所以我们就先看看kafka 一些源码实现如下: public void run() { int messageNo = 1; whi ...
- python:模块0
一.模块是更高级的封装: 容器:数据的封装 函数:语句的封装 类 :方法和属性的封装 模块:模块就是程序,即每个.py文件 二.引入 import 模块名 from 模块名 import xx(函 ...
- 0MQ 事件驱动 以及 poller
底层IO事件,以及借用socket poller的上层0MQ socket事件. 先来看用于底层和上层的两种poller. 这是用于底层io事件的poller_t,每个socket_base_t都关联 ...
- 结合源码,重温 Android View 的事件处理知多少 ?
前言 Android View 的 事件处理在我们的编程中,可谓是无处不在了.但对于大多数人而言,一直都是简单的使用,对其原理缺乏深入地认识. 学 Android 有一段时间了,最近发现,很多基础知识 ...
- 2019-10-24:伪静态,VULHUB搭建靶场,宽字节sql注入,笔记
伪静态1,需要开启站点的重写机制,需要修改配httpd配置文件,将LoadModule rewrite_module modules/mod_rewrite.so注释取消,需要apache支持解析.h ...
- ReactRouter中HashRouter和BrowserRouter的区别
仅个人理解,如有不当请指正 一.从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位.(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserR ...
- 探究 C# 中的 char 、 string(一)
目录 探究 C# 中的 char . string(一) 1. System.Char 字符 2. 字符处理 3. 全球化 4. System.String 字符串 4.1 字符串搜索 4.2 字符串 ...
- jquery对类的操作,添加,删除,点击添加,再点击删除
jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)