jQuery之属性

Posted 2021-04-08 小伍前端

紧接着上一篇<<jQuery之核心函数>>，继续回顾jquery API文档。下面直接切正题：

一、属性

1、attr(name|pro|key,val|fn)

      获取匹配元素的属性的值 或 设置匹配元素的属性

name: 属性名称

例：$("img").attr("src");

properties:属性的“名/值对”对象

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

key,val:属性名称，属性值

例：$("img").attr("src","test.jpg");

key,function(key,attr):

1、属性名称

2、返回属性值得函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值

例: $("img").attr("title",function(){
        return this.src
    });

2、removeAttr(name)

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

例：
  html: <img src="test.jpg">
  js: $("img").removeAttr("src");
  结果：[<img/>]

3、prop(n|p|k,v|fn)

     同attr;

     prop和attr区别:

            A：对于HTML元素本身就带有的固有属性，在处理时使用prop方法；如：checked,selected或disabled

    B：对于HTML元素我们自己自定义的DOM属性，在处理时使用attr方法

4、removeProp(name)

      删除由.prop()方法设置的属性集

二、CSS类

1、addClass(class|fn)

     为匹配的元素添加指定的类名

     class:一个或多个css类名，多个用空格分开

例:
   $("p").addClass("selected");

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

     function(index,class):必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

例：
  html:
     <ul>
        <li>Hello</li>
        <li>Hello</li>
        <li>Hello</li>
     </ul>
  js:
     $("ul li:last").addClass(function(){
         return 'item-' + $(this).index();
     });

2、removeClass([class|fn])

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

     class:一个或多个要删除的CSS类名，用空格隔开

例：
  $("p").removeClass("selected");
  $("p").removeClass(); //删除匹配元素所有类

      function(index,class):必须返回一个或空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

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

3、toggleClass(class|fn[,sw])

      如果存在（不存在）就删除（添加）一个类

三、HTML代码/文本/值

1、html([val|fn])

      获取 或 设置匹配元素的内容;不能用于XML文档，可用于XHTML文档

      获取：$("p").html()

      设置：$("p").html("hello <b>world</b>!");

      使用函数：

$("p").html(function(n){
   return "这个 p 元素的index是："+ n;
})；

2、text([val|fn])

     获取 或设置 匹配元素的纯文本内容;XML和HTML文档都有效

     获取：$("p").text()

     设置：$("p").text("hello <b>world</b>!");

     使用函数：

$("p").text(function(n){
   return "这个 p 元素的index是："+ n;
})

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

      获取匹配元素的当前值

注意：
    html():方法内部使用DOM的innerHTML属性进行处理，所以该操作不仅仅是文本内容，元素标签也包含。
    text():结果返回一个字符串，包含所有匹配元素的合并文本
    val():
        1、处理select元素，没有被选中则返回null
        2、多用来设置表单字段的值
        3、如果select元素有multiple属性，并且至少一个选项被选中，val()方法返回一个数组