属性和样式
attr：设置或返回被选元素的属性值
 attr(属性名) 获取属性值：
            console.log($("span").attr("id"))
            console.log($("span").attr("data-id"))
            attr(属性名，属性值) 设置属性
            console.log($("span").attr("data-id","1002"))
 
prop：获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，
浏览器可能会产生错误。jQuery第一次分配undefined值的属性，
而忽略了浏览器生成的任何错误
实例：
 var chk=$("#sex").prop("checked") // true false
            console.log(chk)

            var chk2=$("#sex").attr("checked") // checked
            console.log(chk2)

            $(":checkbox").attr("checked",true)
            $(":checkbox").prop("checked",true)
 
没有参数时获取，带参数时设置
            html 获取的是包含HTML标签的代码  div<span>span</span>
            text 获取的是纯文本 divspan
            val 获取的是空 获取的是交互控件(表单控件)的值
            在设置时，HTML会解析其中的标签，text不会解析，只是原样输出
            例如：
            var html = $("div").html();
            var text = $("div").text();
            var val = $("div").val();
            console.log(html,text,val)
            $("div").text("<h1>h1标签</h1>")
           
            函数设置样式
            $("div").css("color","red")
            对div设置宽度
            $("div").css("width")
            可简写为
            $("div").width()
 
 
 
checkbox的全选与反选实例：
 $("#sex").change(function(){
            $("#checkbox").prop("checked".false)
            var chk1=$(this).prop("checked")
            $(":checkbox").prop("checked",chk1)
              console.log(chk1)
            })
            $("#sex2").change(function(){
                $(":checkbox:not([id])").each(function(index,item){
                     
                    var ck = $(item).prop("checked")
                    $(item).prop("checked",!ck)
                })
            })
 
html内容：
<body>

    <div class="a" style="">div<span>span</span></div>
    <form action="#">
        <span id="name1" data-id="1000">姓名：</span>
        <input type="text" name="name">
        <input type="checkbox" name="sex" id="sex">
        <br>
        <label for="sex">全选/全不选</label>
        <input type="checkbox" name="sex" id="sex2">
        <label for="sex">反选</label>
    </form>
    <input type="checkbox" name="">
    <input type="checkbox" name="">
    <input type="checkbox" name="">
</body>

参数name 描述:

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

jQuery 代码:
$("img").attr("src");

参数properties 描述:

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

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

参数key,value 描述:

为所有图像设置src属性。

jQuery 代码:
$("img").attr("src","test.jpg");

参数key,回调函数 描述:

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

jQuery 代码:
$("img").attr("title", function() { return this.src });
posted on 2021-11-09 19:33  于凡芮  阅读(38)  评论(0)    收藏  举报