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"]);

原文地址:https://www.cnblogs.com/myitnews/p/11780947.html

时间: 2024-08-11 22:09:23

jQuery中的属性(四)的相关文章

jquery中的属性和样式设置

添加属性 $target.attr({"title":"one piece","name":"solgan"}); 为目标元素添加title和name属性 添加之前: <div class="second"> <p>我是路飞,要成为海贼王的男人.</p> </div> 添加之后: <div class="second"> <

jquery中的属性

jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html <img src="1.jpg" /> //jquery $("img").attr("src")//"1.jpg"获取img的src属性值 $("img")attr({src:"2.jp

JQuery中根据属性或属性值获得元素(6种情况获取方法)

根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元素 1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.

Jquery中dialog属性小记

代码如下: $('#dialogDiv').dialog( { hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错. autoOpen:false, height:380, width:800, modal:true, //蒙层(弹出会影响页面大小) title:'开标人', overlay: {opacity: 0.5, background: "black" ,overflow:'auto'}, buttons:{ '确定':function(){ //

JQuery中attr属性和jQuery.data()学习笔记

用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

转载 JQuery中attr属性和JQuery.data()学习

转载原地址: http://www.cnblogs.com/yeminglong/p/5405745.html 用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-f

jQuery和javascript中event属性

javascript中event属性说明 1.altKey 描述: 检查alt键的状态. 语法: event.altKey 可能的值: 当alt键按下时,值为 TRUE ,否则为 FALSE .只读. 2.button 描述: 检查按下的鼠标键. 语法: event.button 可能的值: 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键 这个属性仅用于onmousedown, onmouseup, 和 onmousemov

深入理解ajax系列第九篇——jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj

深入理解jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj