jQuery 属性和样式

jing--jing

attr(name|properties|key,value|fn)：设置或返回被选元素的属性值。

1:属性名称。

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

removeAttr(name)：从每一个匹配的元素中删除一个属性  要删除的属性名

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

 例子：

HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:[ <img /> ]

 

prop(name|properties|key,value|fn)：获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

 

1:属性名称。

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

 例子:

 

 

参数name 描述:

 

选中复选框为true，没选中为false

 

jQuery 代码:

 

$("input[type=\'checkbox\']").prop("checked");

 

参数properties 描述:

 

禁用页面上的所有复选框。

 

jQuery 代码:

 

$("input[type=\'checkbox\']").prop({
  disabled: true
});

 

参数key,value 描述:

 

禁用和选中所有页面上的复选框。

 

jQuery 代码:

 

$("input[type=\'checkbox\']").prop("disabled", false);
$("input[type=\'checkbox\']").prop("checked", true);

 

参数key,回调函数 描述:

 

通过函数来设置所有页面上的复选框被选中。

 

jQuery 代码:

 

$("input[type=\'checkbox\']").prop("checked", function( i, val ) {
  return !val;
});

removeProp(name):用来删除由.prop()方法设置的属性集

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

 

例子：

HTML 代码:
<p> </p>
jQuery 代码:
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")), ". ");
结果:The secret luggage code is: 1234. Now the secret luggage code is: undefined. 

 

addClass(class|fn)：为每个匹配的元素添加指定的类名。

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

例子：

jQuery 代码:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

HTML 代码:
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
jQuery 代码:
$(\'ul li:last\').addClass(function() {
  return \'item-\' + $(this).index();
});
 

 

removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类。

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

从匹配的元素中删除 \'selected\' 类

jQuery 代码:
$("p").removeClass("selected");

删除匹配元素的所有类

jQuery 代码:
$("p").removeClass();

删除最后一个元素上与前面重复的class

jQuery 代码:
$(\'li:last\').removeClass(function() {
    return $(this).prev().attr(\'class\');
});

toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类。



 


参数class 描述:


为匹配的元素切换 \'selected\' 类


jQuery 代码:


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


参数class,switch 描述:


每点击三下加上一次 \'highlight\' 类


HTML 代码:


<strong>jQuery 代码:</strong>


jQuery 代码:


  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });


回调函数 描述:


根据父元素来设置class属性


jQuery 代码:


$(\'div.foo\').toggleClass(function() {
  if ($(this).parent().is(\'.bar\') {
    return \'happy\';
  } else {
    return \'sad\';
  }
});


 




jQuery - 设置内容和属性



设置内容 - text()、html() 以及 val()


我们将使用前一章中的三个相同的方法来设置内容：


    

  • text() - 设置或返回所选元素的文本内容
    • 

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
    • 

  • val() - 设置或返回表单字段的值
    • 



html([val|fn])：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。






在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。


function(index, html)FunctionV1.4


此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。


无参数 描述:


返回p元素的内容。


jQuery 代码:


$(\'p\').html();


参数val 描述:


设置所有 p 元素的内容


jQuery 代码:


$("p").html("Hello <b>world</b>!");


回调函数描述:


使用函数来设置所有匹配元素的内容。


jQuery 代码:


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






 text([val|fn])：取得所有匹配元素的内容。






结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。


function(index, text)FunctionV1.4


此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。


无参数 描述:


返回p元素的文本内容。


jQuery 代码:


$(\'p\').text();


参数val 描述:


设置所有 p 元素的文本内容


jQuery 代码:


$("p").text("Hello world!");


回调函数 描述:


使用函数来设置所有匹配元素的文本内容。


jQuery 代码:


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



val([val|fn|arr])：获得匹配元素的当前值。






在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。








function(index, value)FunctionV1.4


此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。




无参数 描述:




获取文本框中的值




jQuery 代码:




$("input").val();




参数val 描述:




设定文本框的值




jQuery 代码:




$("input").val("hello world!");




回调函数 描述:




设定文本框的值




jQuery 代码:




$(\'input:text.items\').val(function() {
  return this.value + \' \' + this.className;
});




参数array 描述:




设定一个select和一个多选的select的值




HTML 代码:




<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




jQuery 代码:




$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);



 




 


 


 






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
         //attr (属性名) 获取属性值
         //attr (属性名，属性值) 设置属性
        //  $("span").attr("data-id","1002");
        //  console.log($("span").attr("id"));
        //  console.log($("span").attr("data-id"));
         
        //  var chk=$("sex").prop("checked"); // 获取返回成布尔值 可以设置全选和反选  返回：true false
        //  console.log(chk);

        //  var chk2=$("sex").attr("checked");    //  返回：checked underfined
        //  console.log(chk2);

        //  var chk2=$("sex").attr("checked",true); 
        //  var chk2=$("sex").prop("checked",true); 
         
        $("#sex").change(function(){
            // $(":checkbox").prop("checked",false); 
            var chk1= $(this).prop("checked");
            $(":checkbox:not([id])").prop("checked",chk1); 
            // console.log(chk1);
        })

        $("#sex2").change(function(){ 
            // $(":checkbox").each(function(index,item){
            //   var ck=$(item).prop("checked");
            //     console.log(ck);
            // }); 

            $(":checkbox:not([id])").each(function(index,item){
              var ck=$(item).prop("checked"); 
              $(item).prop("checked",!ck);
                console.log(ck);
            }); 
            
        })
        // 没有参数值时获取 含有参数之时设置
        // 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);
        //css修改行内样式
        $("div").css("color","red");
        //方法
        $("div").css("width");//方法一
        $("div").width(); // 方法二 不传参数获取 传参数时设置


        })
    </script>
</head>
<body>
    <div class="a" style="">div<span>span</span></div>
    <form action="#">
        <span id="name">姓名：</span>
        <input type="text" name="name" >
        <br>
        <!-- <span id="name">姓别：</span> -->
        <input type="checkbox" name="sex" id="sex" >
        <label for="sex">全选/全不选</label>

        <input type="checkbox" name="sex2" id="sex2" >
        <label for="sex">反选</label>

        <input type="checkbox" name=""   >
        <input type="checkbox" name=""   >
        <input type="checkbox" name=""   >
    </form>
</body>
</html>






 


 


 








 


 


text()、html() 以及 val() 的回调函数


上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。


下面的例子演示带有回调函数的 text() 和 html()：




 


 


设置属性 - attr()


jQuery attr() 方法也用于设置/改变属性值。


下面的例子演示如何改变（设置）链接中 href 属性的值：


 




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>




attr() 方法也允许您同时设置多个属性。


下面的例子演示如何同时设置 href 和 title 属性：




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
    // 通过修改的 title 值来修改链接名称
    title =  $("#runoob").attr(\'title\');
    $("#runoob").html(title);
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>




attr() 的回调函数


jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。


下面的例子演示带有回调函数的 attr() 方法：




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#runoob").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>
<body>

<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>

<button>修改 href 值</button>

<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>

</body>
</html>




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





            

            
        

	    
	    
    


 
                    
            
                

                  
 
        

	 
        

            

                                
分类：
 
                                                                
技术点：

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode