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>

      实现的效果如下图所示：

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ogAvy3u0-1594798609271)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200715145538635.png)]

    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");
posted @ 2020-07-15 15:38  Cupid05  阅读(23)  评论(0)  编辑  收藏  举报