JQuery常用属性整理
JQuery常用属性整理
方法目录：
|------------- attr(name|properties|key,value|fn)
|------------- removeAttr(name)
|------------- prop(name|properties|key,value|fn)
|------------- removeProp(name)
|------------- addClass(class|fn)
|------------- removeClass([class|fn])
|------------- toggleClass(class|fn[,sw])
|------------- html([val|fn])
|------------- text([val|fn])
|------------- val([val|fn|arr])
1、attr(name|properties|key,value|fn)
1)、说明
设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对
2)、语法
(1)、返回属性的值：
$(selector).attr(attribute)
(2)、设置属性和值：
$(selector).attr(attribute,value)
(3)、使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))
(4)、设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
3)、参数
attribute 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定要返回属性值到集合的函数
index - 接受集合中元素的 index 位置。
currentvalue - 接受被选元素的当前属性值
4)、示例：
(1)、$("img").attr("src");
(2)、$("img").attr("src","test.jpg");
(3)、$("img").attr("width",function(n,v){return v-50;}); //每次执行，图片宽度减少50个像素
(4)、$("img").attr({ src: "test.jpg", alt: "Test Image" });
2、removeAttr(name)
1)、说明
从被选元素移除一个或多个属性。
2)、语法
$(selector).removeAttr(attribute)
3)、参数
attribute 必需。规定要移除的一个或多个属性。如需移除若干个属性，请使用空格分隔属性名称。
4)、示例
$("p").removeAttr("id class"); //移除所有P元素的id和类属性
3、prop(name|properties|key,value|fn)
1)、说明
设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
2)、语法
(1)、返回属性的值：
$(selector).prop(property)
(2)、设置属性和值：
$(selector).prop(property,value)
(3)、使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))
(4)、设置多个属性和值：
$(selector).prop({property:value, property:value,...})
3)、参数
property 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定返回要设置的属性值的函数。
index - 检索集合中元素的 index 位置。
currentvalue - 检索被选元素的当前属性值。
4)、示例
(1)、$("input[type='checkbox']").prop("checked");
(2)、$("input[type='checkbox']").prop({disabled: true});
(3)、$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
(4)、$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
4、removeProp(name)
1)、说明
移除由 prop() 方法设置的属性。
2)、语法
$(selector).removeProp(property)
3)、参数
property 规定要移除的属性的名称。
4)、示例
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")), ". ");
结果
The secret luggage code is: 1234. Now the secret luggage code is: undefined.
5、addClass(class|fn)
1)、说明
向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
2)、语法
$(selector).addClass(classname,function(index,oldclass))
3)、参数
classname 必需。规定一个或多个要添加的类名称。
function(index,currentclass) 可选。规定返回一个或多个待添加类名的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
4)、示例
(1)、向元素添加2个类(样式)
$("p:first").addClass("intro note");
(2)、用函数添加类
$("button").click(function(){
$("p").addClass(function(n){
return "par_" + n;
});
});
6、removeClass([class|fn])
1)、说明
从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
2)、语法
$(selector).removeClass(classname,function(index,currentclass))
3)、参数
classname 可选。规定要移除的一个或多个类名称。如需移除若干个类，请使用空格分隔类名称。
注意： 如果该参数为空，则将移除所有类名称。
function(index,currentclass) 可选。返回要移除的一个或多个类名称的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
4)、示例
(1)、$("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类
(2)、$("p").removeClass(); //删除匹配元素的所有类
(3)、$('li:last').removeClass(function() { //删除最后一个元素上与前面重复的class
return $(this).prev().attr('class');
});
7、toggleClass(class|fn[,sw])
1)、说明
对添加和移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
然而，通过使用 "switch" 参数，您能够规定只删除或只添加类。
2)、语法
$(selector).toggleClass(classname,function(index,currentclass),switch)
3)、参数
classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
switch 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。
4)、示例
(1)、$("p").toggleClass("selected"); //为匹配的元素切换 'selected' 类
(2)、每点击三下加上一次 'highlight' 类
HTML:
<strong>jQuery 代码:</strong>
JQuery:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
(3)、根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
8、html([val|fn])
1)、说明
设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
2)、语法
(1)、返回内容：
$(selector).html()
(2)、设置内容：
$(selector).html(content)
(3)、使用函数设置内容：
$(selector).html(function(index,currentcontent))
3)、参数
content 必需。规定被选元素的新内容（可包含 HTML 标签）。
function(index,currentcontent) 可选。规定返回被选元素的新内容的函数。
index - 返回集合中元素的 index 位置。
currentcontent - 返回被选元素的当前 HTML 内容。
4)、示例
(1)、$('p').html(); //返回p元素的内容。
(2)、$("p").html("Hello <b>world</b>!"); //设置所有 p 元素的内容
(3)、使用函数来设置所有匹配元素的内容
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
9、text([val|fn])
语法与第八点雷同
10、val([val|fn|arr])
1)、说明
返回或设置被选元素的 value 属性。
当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。
注意：val() 方法通常与 HTML 表单元素一起使用。
2)、语法
(1)、返回 value 属性：
$(selector).val()
(2)、设置 value 属性：
$(selector).val(value)
(3)、通过函数设置 value 属性：
$(selector).val(function(index,currentvalue))
3)、参数
value 必需。规定 value 属性的值。
function(index,currentvalue) 可选。规定返回要设置的值的函数。
index - 返回集合中元素的 index 位置。
currentvalue - 返回被选元素的当前 value。
4)、示例
(1)、$("input").val(); //获取文本框中的值
(2)、$("input").val("hello world!"); //设定文本框的值
(3)、设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
(4)、设定一个select和一个多选的select的值
HTML:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
JQuery:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
引用地址
JQuery常用属性整理相关推荐
- C#控件及常用属性整理
C#控件一览表 前所未有的震撼(太详细了) 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来 ...
- jquery 常用属性和函数（part I）
Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...
- C# 控件开发中常用属性整理
Browsable 适用于属性和事件,指定属性或事件是否应该显示在属性浏览器中. Category 适用于属性和事件,指定类别的名称,在该类别中将对属性或事件进行分组.当使用了类别时,组件属性和事件可 ...
- jQuery的AJAX常用属性及解释
jQuery的AJAX常用属性及解释 $.ajax({ url: 请求路径, type: 请求方式默认为get, dataType:期望的返回值类型,常用的有text.json.html, data: ...
- 蚂蚁金服 Ant-design 常用组件和属性整理
蚂蚁金服 Ant-design 常用组件和属性整理 本文摘录自:AntDesign官网 1. 通用组件 1.1 Buttondisabled - booleanghost - booleanhref ...
- DIV常用属性大全自己整理
一.属性列表 代码如下:color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...
- jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- jQuery插件之【jqGrid】常用语法整理-【更新】
jqGrid常用语法整理,包含数据获取.常用函数.触发事件等 jqGrid表格数据获取相关语法 获取表格所有数据 $("#grid").jqGrid("getRowDa ...
- jquery常用功能
http://www.phpweblog.net/jig68/archive/2010/06/22/7274.html Jquery功能函数整理 分享 如果你正在学习jQuery,也许这些资料对你会有 ...
- jQuery基础知识整理
jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
最新文章
- php yof框架特点_腾讯正式开源高性能超轻量级 PHP 框架 Biny
- qq邮箱格式的Java代码_Java实现QQ邮件发送
- 小米6指主板图示_小米MIX2手机不开机，修过没修好，通病问题教你一坨锡就能搞定...
- uml 时序图_UML各种图总结:
- C＋＋面试题目（五）
- 解决： This application has no explicit mapping for /error, so you are seeing this as a fallback.
- SpringBoot2 整合 XFIRE 服务端和客户端
- python和按键精灵哪个稳定_按键精灵教程，学了这个你也能做出稳定的脚本
- Vivado使用记录（二）下载与固化
- PMP考试重点总结四——规划过程组（2）
- 30+英文电子书免费下载网站,跟喜欢看英文电子书的朋友分享
- 怎么把PWM信号转为模拟量
- Android 9.0以上HTTP网络请求被限制解决方案
- 游戏公司如何应对游戏黑产 ？
- 腾讯云服务器计费模式包年包月/按量计费/竞价实例选择困难户
- [py练习] 返回朋友名字的list
- javaweb——＞个人博客项目
- CAPS发布了完全支持OpenACC的编译器了！
- DophinScheduler server部分 核心代码详细解析——掌控任务和进程的呼吸与脉搏：log、monitor与registry
- 辕剑之汉之云插曲计算机谱子,轩辕剑之汉之云主题曲_插曲_片尾曲_背景音乐所有歌曲歌词MV...
热门文章
- 云南省人口密度格网数据
- 【论文翻译】Image Super-Resolution Using Deep Convolutional Networks
- 基姆拉尔森计算公式---计算星期几
- 构造体中变量后面的冒号_类型在变量前面还是后面，终于有答案了
- 高校计算机教研室工作计划,2017高校教研室工作计划
- nginx nodejs环境配置_nginx的脚本特性-nginScript笔记
- realtek audio console无法连接rpc服务_笔记本网络连接图标不见了怎么办？
- python指纹识别_指纹识别是目前最成熟的识别技术！Python能分分钟做出一个来！...
- php cookie与session
- 记录一次elastic-job分片查询及基础概念理解