属性
attr(name)
取得第一个匹配元素的属性值。
返回值Object
示例:
返回文档中第一个图像的src属性值。
代码:
$("img").attr("src");
attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性
返回值为jQuery
示例:
为所有图像设置src和alt属性
HTML代码:
<img/>
代码:
$("img").attr({src:"test.jpg",alt:"Test image"});
结果:
[<img src="http://holyrain1314.blog.163.com/blog/test.jpg" alt="Test image"/>]
attr(key,value)
为所有匹配的元素设置一个属性值
返回值jQuery
示例:
为所有图像设置src属性
HTML代码:
<img/><img/>
代码:
$("img").attr("src","test.jpg");
结果:
[ <img src="http://holyrain1314.blog.163.com/blog/test.jpg" /> , <img src="http://holyrain1314.blog.163.com/blog/test.jpg" /> ]
attr(key,fn)
为所有匹配的元素设置一个计算的属性值
返回值为jQuery
示例:
把src属性的值设置为title属性的值。
HTML代码:<img src="http://holyrain1314.blog.163.com/blog/test.jpg"/>
代码:
$("img").attr("title", function() { return this.src });
结果:
<img src="http://holyrain1314.blog.163.com/blog/test.jpg" title="test.jpg" />
removeAttr(name)
从每一个匹配的元素中删除一个属性
返回值jQuery
示例:
将文档中图像的src属性删除
HTML代码:<img src="http://holyrain1314.blog.163.com/blog/test.jpg"/>
代码:
$("img").removeAttr("src");
结果:
[ <img /> ]
CSS类
addClass(class)
为每个匹配的元素添加指定的类名
返回值jQuery
参数:class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开
示例;
为匹配的元素加上 'selected' 类
HTML 代码:
<p>Hello</p>
代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
为匹配的元素加上 selected highlight 类
HTML 代码:
<p>Hello</p>
代码:
$("p").addClass("selected highlight");
结果:
[ <p class="selected highlight">Hello</p> ]
addClass(function(index, class))
为每个匹配的元素添加指定的类名
参数:
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。
接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
示例:
给li加上不同的class
HTML代码:
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
代码:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass(class)
从所有匹配的元素中删除全部或者指定的类
参数:
class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开
示例:
从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
代码:
$("p").removeClass("selected");
结果:
[ <p>Hello</p> ]
删除匹配元素的所有类
HTML 代码:
<p class="selected first">Hello</p>
代码:
$("p").removeClass();
结果:
[ <p>Hello</p> ]
removeClass(function(index,class))
从所有匹配的元素中删除全部或者指定的类
参数:
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。
接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
示例:
删除最后一个元素上与前面重复的class
代码:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class)
如果存在(不存在)就删除(添加)一个类。
参数:
class (String) :CSS类名
示例:
为匹配的元素切换"selected"类
HTML代码:
<p>Hello</p><p class="selected">Hello Again</p>
代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
toggleClass(class,switch)
如果开关switch参数为true则加上对应的class,否则就删除
参数:
class (String) :CSS类名
switch (Boolean) :用于决定元素是否包含class的布尔值。
示例:
每点击三下加上一次 'selected' 类
HTML代码:
<strong>jQuery 代码:</strong>
代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
toggleClass(function(index,class),[switch])
从所有匹配的元素中删除全部或者指定的类
参数:
function(index, class) (Function) : 返回class名的一个函数,接受两个参数,index为元素在集合中的索引位置,class为原先元素的class值。switch (可选)(Boolean) : 用于决定元素是否包含class的布尔值。
示例:
根据父元素来设置class属性
代码:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
HTML
html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
返回值String
示例:
HTML 代码:
<div><p>Hello</p></div>
代码:
$("div").html();
结果:
Hello
html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
返回值jQuery
参数:
val (String) : 用于设定HTML内容的值
示例:
HTML 代码:
<div></div>
代码:
$("div").html("<p>Hello Again</p>");
结果:
[ <div><p>Hello Again</p></div> ]
html(function(index, html))
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
返回值jQuery
参数:
function(index, html) (Function) : 此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值
文本
text()
取得所有匹配元素的内容。
返回值String
示例
HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
代码:
$("p").text();
结果:
Test Paragraph.Paraparagraph
text(val)
设置所有匹配元素的文本内容
返回值jQuery
参数:
val (String) : 用于设置元素内容的文本
示例:
HTML 代码:
<p>Test Paragraph.</p>
代码:
$("p").text("<b>Some</b> new text.");
结果:
[ <p><b>Some</b> new text.</p> ]
text(function(index,text))
设置所有匹配元素的文本内容
返回值jQuery
参数:
function(index, text) (Function) : 此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值
值
val()
获得第一个匹配元素的当前值
返回值String,Array
示例
获得单个select的值和多选select的值
HTML 代码:
<p></p><br/>
<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>
代码:
$("p").append(
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
结果:
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
获取文本框中的值
HTML 代码:
<input type="text" value="some text"/>
代码:
$("input").val();
结果:
some text
val(val)
设置每一个匹配元素的值
返回值jQuery
参数:
val (String) : 要设置的值。
示例:
设定文本框的值
HTML 代码:
<input type="text"/>
代码:
$("input").val("hello world!");
val(array)
check,select,radio等都能使用为之赋值
返回值jQuery
参数:
array (Array<String>) : 用于 check/select 的值
示例:
设定一个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
代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
val(fn)
设置每一个匹配元素的值
返回值jQuery
参数
fn (Funtion) : 一个函数,返回要设置的值。
示例
设定文本框的值
HTML 代码:
<input type="text" class="items"/>
代码:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
分享到:
相关推荐
NULL 博文链接:https://871421448.iteye.com/blog/1985929
jQuery属性 toggleClass()方法添加和移除 jQuery属性 toggleClass()方法添加和移除
jQuery第3天知识点:jQuery 属性操作、jQuery三组基本动画、自定义动画animate.zip
jQuery第2天知识点:jQuery 样式操作、jQuery 属性操作.zip
jquery属性操作jquery属性操作jquery属性操作
主要介绍了jQuery属性选择器用法,结合实例形式分析了jQuery中针对属性的判断与匹配相关操作技巧,需要的朋友可以参考下
jquery中左侧属性菜单和发光button案例111111111111111111111111111
本文实例讲述了JQuery属性操作与循环用法。分享给大家供大家参考,具体如下: 取出或者设置html内容 var $htm= $("#div").html 取出 $("#div").html("文字</span>") 设置 取出或者设置某个属性的值 var $src=$('#...
本文实例讲述了jQuery属性选择器用法。分享给大家供大家参考,具体如下: 属性选择器 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute) <input id="txtUsername" type="text" value="qiyisoft" ...
一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: 代码如下: <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> [removed][removed] <style type=”...
一个简单的插件,扩展类似于 *Class 函数的 jQuery 属性修改。 由为满足简单的可重用开发流程的需要而。 如何使用 attrExtend 移植了 jQuery 原生 *Class 函数的相同功能。 此扩展的大部分内容都是可链接的。 应用...
Jquery属性遍历、HTML操作。 Jquery拥有可操作HTML元素和属性的强大方法。 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中。 .andSelf() 把堆栈中之前的元素集添加到当前集合...
jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的...
一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解,感兴趣的朋友可以参考下
本文主要介绍 jquery 属性选择器的知识,这里有简单实现代码和实例讲解,有需要的小伙伴可以参考下
jQuery 属性 jQuery 属性 方法 描述 context 在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文 jquery 包含 jQuery 的版本号 jQuery.fx.interval 改变以毫秒计的动画运行速率 jQuery.fx.off 对...
使用jQuery属性过滤选择器 使用jQuery子元素过滤选择器 使用jQuery表单对象属性过滤选择器 使用jQuery表单过滤选择器 第3章 DOM树状文档 获取元素的属性 设置元素的属性 设置元素的属性 获取或设置元素的...
Jquery中dialog属性的小计,详细介绍dialog的使用