前端JQuery-属性学习（二）

一：设置或返回被选元素的属性值：attr(name|properties|key,value|fn)

返回文档中所有图像的src属性值：
$("img").attr("src");

为所有图像设置src和alt属性：
$("img").attr({ src: "test.jpg", alt: "Test Image" });

二：从每一个匹配的元素中删除一个属性：removeAttr(name)

将文档中图像的src属性删除：
$("img").removeAttr("src");

三：获取在匹配的元素集中的第一个元素的属性值：prop(name|properties|key,value|fn)

选中复选框为true，没选中为false：
$("input[type='checkbox']").prop("checked");

四：用来删除由.prop()方法设置的属性集：removeProp(name)

删除一个p标签
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")), ". ");

上述参数详知：
1.[name]:属性名称;
2.properties:作为属性的“名/值对”对象;
3.key,value:属性名称，属性值;
4.key,function(index, attr);
key:属性名称。
function():返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

五：为每个匹配的元素添加指定的类名:addClass(class|fn)

为p标签添加 'selected' 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

六：从所有匹配的元素中删除全部或者指定的类：removeClass([class|fn])

从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");

删除匹配元素的所有类
$("p").removeClass();

删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

上述参数详知：

class：一个或多个要删除的CSS类名，请用空格分开
function(index,class)：此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

七：如果存在（不存在）就删除（添加）一个类：toggleClass(class|fn[,sw])

为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");

每点击三下加上一次 'highlight' 类
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

根据父元素来设置class属性
$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

参数详知：

class:一个或多个要添加到元素中的CSS类名，请用空格分开
switch:用于决定元素是否包含class的布尔值。
function(index, class,switch)[,switch]:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

八：取得第一个匹配元素的html内容:html([val|fn])

返回p元素的内容。
$('p').html();

设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");

使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

参数详知：

val：用于设定HTML内容的值
function(index, html)：此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

九：取得所有匹配元素的内容：text([val|fn])

返回p元素的文本内容。
$('p').text()：

设置所有 p 元素的文本内容
$("p").text("Hello world!")：

使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

参数详知：

val：用于设定元素内容的值
function(index, text)：此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

十：获得匹配元素的当前值：val([val|fn|arr])

获取文本框中的值
$("input").val();

设定文本框的值
$("input").val("hello world!");

参数详知：

val：要设置的值。
function(index, value)：此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
array：用于 check/select 的值

前端JQuery-属性学习（二）

猜你喜欢