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() - ...
随机推荐
- mysql中int、bigint、smallint、tinyint 长度
mysql中int.bigint.smallint.tinyint 长度 bigint -2^63 (-9223372036854775808) 到 2^63-1 (92233720368547758 ...
- 简单地迁移你的android jni代码逻辑到iOS - 编写iOS下jni.h的替代 - ocni.h
1. jni的代码逻辑中与上层平台语言交互了. 2. 使用非Xcode的ide开发工具,希望使用纯净的c/c++代码,不掺杂其它平台相关的语言语法. 3. 只想简单地替换jni代码对上层平台语言的功能 ...
- Linux下的磁盘分区,和创建文件系统(理论及实战)
首先我们先了解一下磁盘的原理 磁盘的数据结构有: 扇区:盘片被分为多个扇形区域,每一个扇区存放512个字节的数据 磁道:同一个盘片不同半径的同心圆 柱面:不同盘片相同半径构成的圆柱面 公式: 磁盘存储 ...
- Mac安装和卸载Mysql
目录 一.安装 二.环境变量 2.1 MySQL服务的启停和状态的查看 三.启动 四.初始化设置 4.1 退出sql界面 五.配置 5.1 检测修改结果 一.安装 第一步:打开网址,https://w ...
- 新闻网页通用抽取器GNEv0.04版更新,支持提取正文图片与源代码
GeneralNewsExtractor以下简称GNE是一个新闻网页通用抽取器,能够在不指定任何抽取规则的情况下,把新闻网站的正文提取出来. 我们来看一下它的基本使用方法. 安装 GNE 使用 pip ...
- 《Git的常用操作》
Git的常用操作: git checkout -b 本地分支 #创建本地的分支—本地分支,并切换到该分支下. git branch --set-upstream-to=origin/远程分支 本地分支 ...
- 部署k8s集群监控Heapster
git clone https://github.com/kubernetes/heapster.gitkubectl apply -f heapster/deploy/kube-config/inf ...
- Fragment的生命周期(与Activity的对比)
Fragment必须是依存与Activity而存在的,因此Activity的生命周期会直接影响到Fragment的生命周期.官网这张图很好的说明了两者生命周期的关系: 可以看到Fragment比Act ...
- python接口自动化测试——简单的文件上传代码实现,人人网登陆后上传图片举例
import requests '''人人网登陆,图片上传 '''def loginData(): '''登录请求参数''' data = { 'email': '13484545195', 'ico ...
- sql server建库建表(数据库和数据表的常用操作)
数据库和数据表 (开发常用 操作) 一,数据库的创建 一个SQLServer 是由两个文件组成的:数据文件(mdf) 和日志文件(ldf),所以我们创建数据库就是要为其指定数据库名.数据文件和日志文件 ...