jQuery属性

方法 描述
addClass() 向被选元素添加一个或多个类名
after() 在被选元素后插入内容
append() 在被选元素的结尾插入内容
appendTo() 在被选元素的结尾插入 HTML 元素
attr() 设置或返回被选元素的属性/值
before() 在被选元素前插入内容
clone() 生成被选元素的副本
css() 为被选元素设置或返回一个或多个样式属性
detach() 移除被选元素(保留数据和事件)
empty() 从被选元素移除所有子节点和内容
hasClass() 检查被选元素是否包含指定的 class 名称
height() 设置或返回被选元素的高度
html() 设置或返回被选元素的内容
innerHeight() 返回元素的高度(包含 padding,不包含 border)
innerWidth() 返回元素的宽度(包含 padding,不包含 border)
insertAfter() 在被选元素后插入 HTML 元素
insertBefore() 在被选元素前插入 HTML 元素
offset() 设置或返回被选元素的偏移坐标(相对于文档)
offsetParent() 返回第一个定位的祖先元素
outerHeight() 返回元素的高度(包含 padding 和 border)
outerWidth() 返回元素的宽度(包含 padding 和 border)
position() 返回元素的位置(相对于父元素)
prepend() 在被选元素的开头插入内容
prependTo()) 在被选元素的开头插入 HTML 元素
prop() 设置或返回被选元素的属性/值
remove() 移除被选元素(包含数据和事件)
removeAttr()l) 从被选元素移除一个或多个属性
removeClass() 从被选元素移除一个或多个类
removeProp()l) 移除通过 prop() 方法设置的属性
replaceAll()l) 把被选元素替换为新的 HTML 元素
replaceWith() 把被选元素替换为新的内容
scrollLeft()) 设置或返回被选元素的水平滚动条位置
scrollTop() 设置或返回被选元素的垂直滚动条位置
text() 设置或返回被选元素的文本内容
toggleClass() 在被选元素中添加/移除一个或多个类之间切换
unwrap() 移除被选元素的父元素
val() 设置或返回被选元素的属性值(针对表单元素)
width() 设置或返回被选元素的宽度
wrap() 在每个被选元素的周围用 HTML 元素包裹起来
wrapAll() 在所有被选元素的周围用 HTML 元素包裹起来
wrapInner() 在每个被选元素的内容周围用 HTML 元素包裹起来
$.escapeSelector() 转义CSS选择器中有特殊意义的字符或字符串
$.cssHooks] 提供了一种方法通过定义函数来获取和设置特定的CSS值

(一)属性

html()
  • 无参数时:返回p元素的内容,假如有多个p标签的话,只返回第一个

    $('p').html();
    
  • 有参数时:设置页面上所有的p元素的内容,会解析括号中的标签

    $("p").html("Hello <b>world</b>!")
    
  • 使用函数来设置所有匹配元素的内容 。假如我页面上有两个p元素的话,输出内容为

    这个 p 元素的 index 是:0
    这个 p 元素的 index 是:1
    
    $("p").html(function(n){
     return "这个 p 元素的 index 是:" + n;
      });  //这个 p 元素的 index 是:0
                        // 这个 p 元素的 index 是:1
    
    text()
    • 无参数时:返回p元素的内容,假如有多个p标签的话,只返回第一个

      $('p').text();
      
    • 有参数时:设置页面上所有的p元素的内容,不会解析,直接返回

      $("p").text("Hello <b>world</b>!")
      
    • 使用函数来设置所有匹配元素的内容 。假如我页面上有两个p元素的话,输出内容为

      这个 p 元素的 index 是:0
      这个 p 元素的 index 是:1
      
      $("p").text(function(n){
       return "这个 p 元素的 index 是:" + n;
        });  //这个 p 元素的 index 是:0
                          // 这个 p 元素的 index 是:1
      
val()
  • 无参数时:获取文本框中的值,只返回第一个

    $("input").val();
    
  • 有参数时:设定文本框的值

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

    $('input:text.items').val(function() {
      return this.value + ' ' + this.className;
    });
    
    • 设定一个select和一个多选的select的值

       <script>
      $(function(){
      $("#single").val("Single2");
                      $("#multiple").val(["Multiple2", "Multiple3"]);
                      $("input").val(["check2", "radio1"]);
      
                  })
              </script>
          </head>
          <body>
              <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
          </body>
      

      实现的效果如下图所示:

      image-20200715145538635

    removeClass()

    1,从匹配的元素中删除 'blue' 类

    <h1 class="blue">标题 1</h1> 
    $("h1").removeClass("blue"); //从h1中删除 'blue' 类
    

    2,删除匹配元素的所有类

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

    1,为匹配的元素加上class名

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

    2,给li加上不同的class

    $('ul li:last').addClass(function() {
      return 'item-' + $(this).index();
    });
    
    
    attr()

    返回文档中所有图像的src属性值。

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

    为所有图像设置src和alt属性。

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

    把src属性的值设置为title属性的值。

    $("img").attr("title", function() { return this.src });
    
removeAttr()删除属性名
$("img").removeAttr("src");
请用今天的努力,让明天没有遗憾。
原文地址:https://www.cnblogs.com/cupid10/p/13305835.html