jQuery的属性
The Write Less , Do More !
jQuery的属性
1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值
①获取属性
<img src="" alt="jQuery" />
<script type="text/javascript">
$(function(){
console.log($("img").attr("alt"));
});
</script>
结果:
②设置单个属性
<img src="" alt="Demo" />
<img src="" alt="jQuery" />
<script type="text/javascript">
$(function(){
$("img").attr("alt","jQueryDemo");
});
</script>
结果:
③设置多个属性
<img src="" alt="Demo" />
<img src="" alt="jQuery" />
<script type="text/javascript">
$(function(){
$("img").attr({alt:"jQueryDemo",title:"强大的jQuery"});
});
</script>
结果:
④利用回调函数,设置多个对象的属性
注意:index的索引从0开始,所以我例子+1了
<ul>
<li><img src="" alt="jQuery" /></li>
<li><img src="" alt="jQuery" /></li>
<li><img src="" alt="jQuery" /></li>
</ul>
<script type="text/javascript">
$(function(){
$("img").attr("src",function(index){
this.src="img"+(index+1)+".png"; //写法一
//return "img"+(index+1)+".png"; //写法二
});
});
</script>
结果:
2. removeAttr(name) : 从每一个匹配的元素中删除一个属性
<img src="img1.png" alt="Demo" />
<img src="img2.png" alt="jQuery" />
<script type="text/javascript">
$(function(){
$("img").removeAttr("alt");
});
</script>
结果:
3. prop(name|properties|key,value|fn) : 获取在匹配的元素集中的第一个元素的属性值
<!--禁用和选中所有页面上的复选框-->
<input type="checkbox" name="jq"/>basketball
<input type="checkbox" name="jq"/>football
<script type="text/javascript">
$(function(){
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
});
</script>
结果:
basketball football
4. removeProp(name) : 用来删除由.prop()方法设置的属性集
注意: 不要使用此方法来删除原生的属性,比如checked,disabled,或者selected。这将完全移除该属性,一旦移除,不能再次被添加到元素上。使用.prop()
来设置这些属性设置为false
代替。
对于这个知识点,我还没弄明白,先暂时用着网上的一个例子
<p> </p>
<script type="text/javascript">
$(function(){
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
});
</script>
结果:
The secret luggage code is: 1234. Now the secret luggage code is: undefined.
5. addClass(class|fn) : 为匹配到的元素添加指定的类名
注意:若果要添加一个或多个类名,请用空格分开
①添加一个或多个类名
<p id="p1"></p>
<p id="p2"></p>
<script type="text/javascript">
$(function(){
$("#p1").addClass("demo");
$("#p2").addClass("demo1 demo2");
});
</script>
结果:
②利用回调函数,添加类名
注意:index的索引从0开始,所以我例子+1了
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
$(function(){
$("li").addClass(function(index){
return "list"+(index+1);
});
});
</script>
结果:
6. removeClass([class|fn]) : 从匹配到的元素中删除全部或者指定的类
注意:若果要删除一个或多个类名,请用空格分开
①删除匹配元素的指定的一个类
<p class="demo1 demo2 demo3"></p>
<script type="text/javascript">
$(function(){
$("p").removeClass("demo1");
});
</script>
结果:
②删除匹配元素的所有类
<p class="demo1 demo2 demo3"></p>
<script type="text/javascript">
$(function(){
$("p").removeClass();
});
</script>
结果:
③用回调函数删除类
<p class="demo1"></p>
<script type="text/javascript">
$(function(){
$("p").removeClass(function(){
return $(this).attr("class");
});
});
</script>
结果:
7. toggleClass(class|fn[,sw]) : 如果存在就删除一个类,如果不存在就添加一个类
<p class="demo1">这里原本没有.demo2</p>
<p class="demo1 demo2">这里原本就有.demo2</p>
<script type="text/javascript">
$(function(){
$("p").toggleClass("demo2");
});
</script>
结果:
8. html([val|fn]) : 取得匹配元素的html内容
①获取元素的内容
<p>Hello world!</p>
<script type="text/javascript">
$(function(){
console.log($("p").html());
});
</script>
结果:
②设置元素的内容
<p></p>
<p></p>
<script type="text/javascript">
$(function(){
$("p").html("Hello world!");
});
</script>
结果:
③利用回调函数设置元素内容
<p></p>
<p></p>
<p></p>
<script type="text/javascript">
$(function(){
$("p").html(function(index){
return "这是第"+(index+1)+"个p标签";
});
});
</script>
结果:
9. text([val|fn]) : 取得所有匹配元素的内容
text()与html()的用法类似
10. val([val|fn|arr]) : 获得匹配元素的当前值
①获取元素的值
<input type="text" value="write less,do more!"/>
<script type="text/javascript">
$(function(){
console.log($("input").val());
});
</script>
结果:
②设置元素的值
<input type="text"/>
<script type="text/javascript">
$(function(){
$("input").val("write less,do more!");
});
</script>
结果:
③利用回调函数设置元素值
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<script type="text/javascript">
$(function(){
$("input").val(function(index){
return "radio"+(index+1);
});
});
</script>
结果:
在jQuery属性这部分的知识点中,我遇到了不少的困惑,百试不厌,却百试不灵,比如说removeProp()的用法、html()和text()的区别,如果还看到有其他错误的,欢迎各位大神留言指点。
最后,全世界晚安!
jQuery的属性的更多相关文章
- 深入浏览器兼容 细数jQuery Hooks 属性篇
关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...
- jquery html属性和text属性的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 操作属性
jQuery 操作属性 我们来看看jQuery 操作属性都有哪些???? 属性 css代码!! html代码!! jQuery代码!! 下面做一个小例子 小例子html的代码 小例子jQuery的代码 ...
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- jQuery.support属性
jQuery.support 属性包含表示不同浏览器特性或漏洞的属性集. 此属性主要用于 jQuery 的内部使用 jQuery.support主要包括以下测试: boxModel: 如果这个页面和浏 ...
- 前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
- jQuery 查找属性
jQuery 查找属性 示例: <div xsk='123' > <div xsk='456' > // 具有xsk属性的所有标签 $('[xsk]') // xsk属性等于1 ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
随机推荐
- accept_mutex与性能的关系 (nginx)
注:运行环境CentOS 6+ 背景 在对启动了20个worker的nginx进行压力测试的时候发现:如果把配置文件中event配置块中的accept_mutex开关打开(1.11.3版 ...
- Java数据库连接技术——JDBC
大家好,今天我们学习了Java如何连接数据库.之前学过.net语言的数据库操作,感觉就是一通百通,大同小异. JDBC是Java数据库连接技术的简称,提供连接各种常用数据库的能力. JDBC API ...
- 利用SQLServer数据库发送邮件
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 这个应用案例很多,一般都是预警,比如异常连接的时候,或者数据库报错的时候.等等,,, 先 ...
- 解决cookie跨域访问
一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...
- 算法与数据结构(八) AOV网的关键路径
上篇博客我们介绍了AOV网的拓扑序列,请参考<数据结构(七) AOV网的拓扑排序(Swift面向对象版)>.拓扑序列中包括项目的每个结点,沿着拓扑序列将项目进行下去是肯定可以将项目完成的, ...
- C#创建dll类库
类库让我们的代码可复用,我们只需要在类库中声明变量一次,就能在接下来的过程中无数次地使用,而无需在每次使用前都要声明它.这样一来,就节省了我们的内存空间.而想要在类库添加什么类,还需取决于类库要实现哪 ...
- SDWebImage源码解读 之 SDWebImageCompat
第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的 ...
- [C#] C# 知识回顾 - 序列化
C# 知识回顾 - 序列化 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902005.html 目录 序列化的含义 通过序列化保存对象数据 众 ...
- RSA算法
RSA.h #ifndef _RSA_H #define _RSA_H #include<stdio.h> #include<iostream> #include<mat ...
- Java 程序优化 (读书笔记)
--From : JAVA程序性能优化 (葛一鸣,清华大学出版社,2012/10第一版) 1. java性能调优概述 1.1 性能概述 程序性能: 执行速度,内存分配,启动时间, 负载承受能力. 性能 ...