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的属性的更多相关文章

  1. 深入浏览器兼容 细数jQuery Hooks 属性篇

    关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...

  2. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery 操作属性

    jQuery 操作属性 我们来看看jQuery 操作属性都有哪些???? 属性 css代码!! html代码!! jQuery代码!! 下面做一个小例子 小例子html的代码 小例子jQuery的代码 ...

  4. jquery之属性操作

    jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...

  5. jQuery.support属性

    jQuery.support 属性包含表示不同浏览器特性或漏洞的属性集. 此属性主要用于 jQuery 的内部使用 jQuery.support主要包括以下测试: boxModel: 如果这个页面和浏 ...

  6. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  7. jQuery 查找属性

    jQuery 查找属性 示例: <div xsk='123' > <div xsk='456' > // 具有xsk属性的所有标签 $('[xsk]') // xsk属性等于1 ...

  8. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  9. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

随机推荐

  1. accept_mutex与性能的关系 (nginx)

    注:运行环境CentOS 6+   背景      在对启动了20个worker的nginx进行压力测试的时候发现:如果把配置文件中event配置块中的accept_mutex开关打开(1.11.3版 ...

  2. Java数据库连接技术——JDBC

    大家好,今天我们学习了Java如何连接数据库.之前学过.net语言的数据库操作,感觉就是一通百通,大同小异. JDBC是Java数据库连接技术的简称,提供连接各种常用数据库的能力. JDBC API ...

  3. 利用SQLServer数据库发送邮件

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 这个应用案例很多,一般都是预警,比如异常连接的时候,或者数据库报错的时候.等等,,, 先 ...

  4. 解决cookie跨域访问

    一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...

  5. 算法与数据结构(八) AOV网的关键路径

    上篇博客我们介绍了AOV网的拓扑序列,请参考<数据结构(七) AOV网的拓扑排序(Swift面向对象版)>.拓扑序列中包括项目的每个结点,沿着拓扑序列将项目进行下去是肯定可以将项目完成的, ...

  6. C#创建dll类库

    类库让我们的代码可复用,我们只需要在类库中声明变量一次,就能在接下来的过程中无数次地使用,而无需在每次使用前都要声明它.这样一来,就节省了我们的内存空间.而想要在类库添加什么类,还需取决于类库要实现哪 ...

  7. SDWebImage源码解读 之 SDWebImageCompat

    第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的 ...

  8. [C#] C# 知识回顾 - 序列化

    C# 知识回顾 -  序列化 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902005.html 目录 序列化的含义 通过序列化保存对象数据 众 ...

  9. RSA算法

    RSA.h #ifndef _RSA_H #define _RSA_H #include<stdio.h> #include<iostream> #include<mat ...

  10. Java 程序优化 (读书笔记)

    --From : JAVA程序性能优化 (葛一鸣,清华大学出版社,2012/10第一版) 1. java性能调优概述 1.1 性能概述 程序性能: 执行速度,内存分配,启动时间, 负载承受能力. 性能 ...