jQuery中的属性(四)
1. attr(name|properties|key,value|fn), 设置或返回被选元素的属性值
参数说明:
- name:属性名称
- properties:作为属性的“名/值对”对象
- key,value:属性名称,属性值
- key,function(index, attr):
- 属性名称。
- 返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
$("img").attr("src");
$("img").attr({ src: "test.jpg", alt: "Test Image" });
$("img").attr("src","test.jpg");
$("img").attr("title", function() { return this.src });
2. removeAttr(name), 从每一个匹配的元素中删除一个属性
1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。
$("img").removeAttr("src");
3. prop(name|properties|key,value|fn), 获取在匹配的元素集中的第一个元素的属性值
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误。
该属性需要使用1.6以上版本。
参数说明:
- name:属性名称
- properties:作为属性的“名/值对”对象
- key,value:属性名称,属性值
- key,function(index, attr):
- 属性名称。
- 返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
$("input[type='checkbox']").prop("checked"); $("input[type='checkbox']").prop({
disabled: true
}); $("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true); $("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
4. removeProp(name), 用来删除由.prop()方法设置的属性集
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误
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")), ". ");
5. addClass(class|fn), 为每个匹配的元素添加指定的类名
参数说明:
- class:一个或多个要添加到元素中的CSS类名,请用空格分开
- function(index, class):此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
$("p").addClass("selected");
$("p").addClass("selected1 selected2"); $('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
6. removeClass([class|fn]), 从所有匹配的元素中删除全部或者指定的类
参数说明:
- class:一个或多个要删除的CSS类名,请用空格分开
- function(index, class):此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
$("p").removeClass("selected");
//删除匹配元素的所有类
$("p").removeClass(); $('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
7. toggleClass(class|fn[,sw]), 如果存在(不存在)就删除(添加)一个类
参数说明:
- class:CSS类名
- class,switch:
- 要切换的CSS类名
- 用于决定元素是否包含class的布尔值。
- switch:用于决定元素是否包含class的布尔值。
- function(index, class,switch)[, switch]:
- 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
- 一个用来判断样式类添加还是移除的 boolean 值。
$("p").toggleClass("selected"); var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
}); $('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
8. html([val|fn]), 取得第一个匹配元素的html内容
这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
参数说明:
- val:用于设定HTML内容的值
- function(index, html):此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
$('p').html(); $("p").html("Hello <b>world</b>!"); $("p").html(function(n){
return "这个 p 元素的 index 是:" + n;
});
9. text([val|fn]), 取得所有匹配元素的内容
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数说明:
- val:用于设置元素内容的文本
- function(index, text):此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
$('p').text();
$("p").text("Hello world!");
$("p").text(function(n){
return "这个 p 元素的 index 是:" + n;
});
10. val([val|fn|arr]), 获得匹配元素的当前值
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
参数说明:
- val:要设置的值
- function(index, value):此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
- array:数组,用于 check/select 的值。
$("input").val(); $("input").val("hello world!"); $('input:text.items').val(function() {
return this.value + ' ' + this.className;
}); $("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
jQuery中的属性(四)的更多相关文章
- jquery中的属性和css
jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- js进阶 10-6 jquery中的属性选择器有哪些
js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...
- JQuery中根据属性或属性值获得元素
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...
- JQuery中根据属性或属性值获得元素(6种情况获取方法)
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...
- jQuery中的属性选择器
先看代码,后面详细解释: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- jQuery中的属性过滤选择器(四、五):[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等
<!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...
- 浅析jquery中attr属性和prop属性的区别
最近在做项目的时候,发现到了prop这个属性,然后之前一直使用的是attr属性,觉得感觉上都差不多,jQuery也不可能专门做了两个相同的属性撒.所以就结合这两个属性研究了一下,也谈谈我对他们最简单最 ...
- jQUERY中的属性获取
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Se ...
随机推荐
- java 通过Qrcode生成二维码添加图片logo和文字描述
/** * 二维码创建 * @author yhzm * */ public class printServiceImpl extends BaseService { public void barC ...
- alipay sign error
阴影部分地址参数有问题: <PAY_COMPLETE_PAGE_URL><![CDATA[https://baoxian.itaiping.com/ae-console/remote ...
- RabbitMQ默认情况下不保证每次都把消息传递
有意思,RabbitMQ默认情况下是不保证每次都把消息传递的,很多情况下我们都是这样发送数据的, channel.BasicPublish(QUEUE_NAME, String.Empty, n ...
- Luogu P5368 [PKUSC2018]真实排名
老年选手只会做SB题了(还调了好久) 很容易想到分类讨论,按第\(i\)个人有没有翻倍来算 若\(a_i\)未翻倍,显然此时将\([0,\lceil \frac{a_i}{2}\rceil)\)的数和 ...
- Groovy元编程简明教程
同函数式编程类似,元编程,看上去像一门独派武学. 在 <Ruby元编程>一书中,定义:元编程是运行时操作语言构件的编程能力.其中,语言构件指模块.类.方法.变量等.常用的主要是动态创建和访 ...
- 01-String(键命令)
Redis Redis是一个高性能的Key-Value数据库. 学习目标 能够描述出什么是 nosql 能够说出 Redis 的特点 能够根据参考资料修改常用Redis配置 能够写出Redis中str ...
- SqlServer,Oracle,db2,MySql查询表索引
SqlServer1. 查询表索引 SELECT 索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ,c.status FROM sysinde ...
- svn版本管理配置权限
修改svn配置 编辑svnserve.conf文件 第19,20行删掉前面的#--意思就是打开 ancon-access = none 匿名用户不可读 auth-access = write 认证可 ...
- 聊聊 Vue 中 title 的动态修改
由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...
- WPF DataGrid显示MySQL查询信息,且可删除、修改、插入 (原发布 csdn 2018-10-13 20:07:28)
1.入行好几年了,工作中使用数据库几率很小(传统行业).借着十一假期回家机会,学习下数据库. 2.初次了解数据库相关知识,如果本文有误,还望告知. 3.本文主要目的,记录下wpf界面显示数据库信息,且 ...