jQuery学习总结02-属性

Posted 2020-12-03 it-q

1、attr(name|properties|key,value|fn)

说明：设置和返回被选元素的属性值

示例：

参数：

name(属性名称)	string
properties(作为属性的‘名/值对‘对象)	map
key,value(属性名，属性值)	string,object
key，function(index,attr) 1.属性名称 2.返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。	string,function

 

描述：参数name,返回文档中所有图像img的src属性值

jQuery代码

$(‘img‘).attr(‘src‘)

描述：参数property,为所有图像img元素设置alt和src属性

jQuery代码：

$(‘img‘).attr({src:‘test.jpg‘,alt:‘Test Image‘});

描述：参数key,value,为所有图像img元素设置src属性

jQuery代码：

$(‘img‘).attr(‘src‘,‘test.jpg‘);

描述：参数key,回调函数，把src属性的值设置为title属性的值

jQuery代码：

$(‘img‘).attr(‘title‘,function(){
    return this.src;
});

2、removeAttr(name)

说明：从每一个匹配的元素中删除一个属性

　　　1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
　　　1.7版本在IE6下已支持删除disabled。

示例：

描述：将文档中图像的src属性删除

html代码：

<img src=‘test.jpg‘ />

jQuery代码：

$(‘img‘).removeAttr(‘src‘);

结果：

[ <img /> ]

3、prop(name|properties|key,value|fn)

说明：获取在匹配元素集合中的第一个元素的属性值

　　　随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

示例：

参数：

name(属性名称)	string
properties(作为属性的‘名/值对‘对象)	map
key,value(属性名，属性值)	string,object
key，function(index,attr) 1.属性名称 2.返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。	string,function

描述：参数name，选中复选框为true,没选中为false

HTML代码：

<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="text" />
<input type="button" value="提交" />

jQuery代码：

$(‘input[type="checkbox"]‘).prop(‘checked‘);

描述：参数properties，禁止和选中页面所有的复选框

jQuery代码：

$(‘input[type="checkbox"]‘).prop({disabled:true});

描述：参数key,value，禁止和选中页面上所有的复选框

jQuery代码：

$(‘input[type="checkbox"]‘).prop({checked:true});
$(‘input[type="checkbox"]‘).prop({disabled:true});

描述：参数key,回调函数，通过函数来设置页面上所有的复选框被选中

jQuery代码：

$(‘input[type="checkbox"]‘).prop(‘checked‘,function(index,val){
        return true;
});

4、removeProp(name)

说明：用来删除由.prop()方法设置的属性集

　　　随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

示例：

描述：设置一个段落数字属性，然后将其删除。

jQuery代码：

$(‘p‘).prop(‘luggageCode‘,1234);
$(‘p‘).prop(‘luggageCode‘);
$(‘p‘).removeProp(‘luggageCode‘);
$(‘p‘).prop(‘luggageCode‘);

5、addClass(class|fn)

说明：为每个匹配的元素添加指定的类名。

示例：

参数：

class(一个或多个要添加到元素中的CSS类名，请用空格分开)	string
function(index,class) 此函数必须返回一个或多个空格分隔的class名 1.index参数为对象在这个集合中的索引值 2.class参数为这个对象原先的class属性值	function

描述：参数class，为匹配的元素添加‘selected’类

jQuery代码：

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

描述：参数function,给li添加不同的class

jQuery代码：

$(‘ul li‘).addClass(function(index,cls){
     return ‘item-‘+ index;
})

6、removeClass([class|fn])

说明：从所有匹配的元素中删除全部或者指定的类

示例：

参数：

class(一个或多个要添加到元素中的CSS类名，请用空格分开)	string
function(index,class) 此函数必须返回一个或多个空格分隔的class名 1.index参数为对象在这个集合中的索引值 2.class参数为这个对象原先的class属性值	function

描述：参数class,从匹配的元素中删除 ‘selected‘ 类

jQuery代码：

$("p").removeClass("selected");

描述：参数function,删除最后一个元素上与前面重复的class

jQuery代码：

$(‘li:last‘).removeClass(function() {
    return $(this).prev().attr(‘class‘);
});

 7、toggleClass(class|fn[,sw])     注意：如果标签已经包含class了，则会删除class类名，否则新增

说明：如果存在（不存在）就删除（添加）一个类。

示例：

参数：

class(类名)	string
class,switch 1:要切换的CSS类名 2.用于决定元素是否包含class的布尔值。	string,Boolean
switch(用于决定元素是否包含class的布尔值。)	Boolean
function(index, class,switch)[, switch] 1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。 2: 一个用来判断样式类添加还是移除的 boolean 值。	function,boolean

描述：参数class，为匹配的元素切换 ‘selected‘ 类

jQuery代码：

$("p").toggleClass("selected");

描述：参数class,switch，每点击三下加上一次 ‘highlight‘ 类

jQuery代码：

var count = 0;
$(‘p‘).click(function () {
      $(this).toggleClass(‘highlight‘,count++ % 3 == 0)
});

描述：参数function,根据父元素来设置class属性

jQuery代码：

$(‘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内容的值)	string
function(index,html) 此函数返回一个HTML字符串 1.index为元素在集合中的索引位置 2.html为原先的HTML值	function

 

描述：无参数，返回p元素的内容。

HTML代码：

 <p><span>jQuery</span></p>

jQuery代码：

$(‘p‘).html();

结果：

"<span>jQuery</span>"

描述：参数val，设置所有 p 元素的内容

HTML代码：

<p></p>

jQuery代码：

$(‘p‘).html(‘<span>Hello,World</span>‘)

描述：参数function,使用函数来设置所有匹配元素的内容。

HTML代码：

<p></p>
<p></p>
<p></p>

jQuery代码：

$(‘p‘).html(function(index){
    return ‘<span>Hello,item ‘ +index +‘</span>‘;
});

9、text([val|fn])

说明：取得所有匹配元素的内容。

　　　结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

示例：

参数：

val(用于设定元素内容的文本)	string
function(index,text) 此函数返回一个字符串 1.index为元素在集合中的索引位置 2.text为原先的text值	function

不再详细赘述

10、val([val|fn|arr])

说明：获得匹配元素集合中第一元素的当前值。

　　　在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

示例：

参数：

val(要设置的值)	string
function(index,value) 此函数返回一个要设置的值 1.index为元素在集合中的索引位置 2.value为原先的value值	function
array(用于check/select的值)	array(string)

描述：无参数，获取文本框中的值

HTML代码：

<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="text" />
<input type="button" value="提交" />

jQuery代码：

$(‘input[type=text]‘).val()

描述：参数val,设定文本框的值

jQuery代码：

$(‘input[type=text]‘).val(‘hello world‘)

描述：参数array, 设定一个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"]);