jQuery学习之属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery学习之属性相关的知识,希望对你有一定的参考价值。

学习jQuery之处,我们首先要掌握的知识点就是jQuery属性的使用方法,本文整理了一些jQuery常用的属性及其相关使用,一起来看看吧。

 

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

获取属性

<img src="" alt="jQuery" /><script type="text/javascript">

    $(function(){

        console.log($("img").attr("alt"));

    });</script>

结果:

设置单个属性

<img src="" alt="Demo" /><img src="" alt="jQuery" /><script type="text/javascript">

    $(function(){

        $("img").attr("alt","jQueryDemo");

    });</script>

结果:

设置多个属性

<img src="" alt="Demo" /><img src="" alt="jQuery" /><script type="text/javascript">

    $(function(){

        $("img").attr({alt:"jQueryDemo",title:"强大的jQuery"});

    });</script>

结果:

利用回调函数,设置多个对象的属性

注意:index的索引从0开始,所以我例子+1

<ul>

    <li><img src="" alt="jQuery" /></li>

    <li><img src="" alt="jQuery" /></li>

    <li><img src="" alt="jQuery" /></li></ul><script type="text/javascript">

    $(function(){

        $("img").attr("src",function(index){

            this.src="img"+(index+1)+".png";   //写法一

            //return "img"+(index+1)+".png";   //写法二

        });

    });</script>

结果:

2. removeAttr(name) : 从每一个匹配的元素中删除一个属性

<img src="img1.png" alt="Demo" /><img src="img2.png" alt="jQuery" /><script type="text/javascript">

    $(function(){

        $("img").removeAttr("alt");

    });</script>

结果 

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

<!--禁用和选中所有页面上的复选框--><input type="checkbox" name="jq"/>basketball<input type="checkbox" name="jq"/>football<script type="text/javascript">

    $(function(){

        $("input[type=’checkbox’]").prop("disabled", true);

        $("input[type=’checkbox’]").prop("checked", true);

    });</script>

结果:

 basketball  football

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

注意:不要使用此方法来删除原生的属性,比如checked,disabled,或者selected。这将完全移除该属性,一旦移除,不能再次被添加到元素上。使用 .prop() 来设置这些属性设置为 false 代替。

对于这个知识点,我还没弄明白,先暂时用着网上的一个例子

<p> </p><script type="text/javascript">

    $(function(){

        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")), ". ");

    });</script>

结果:

The secret luggage code is: 1234.  Now the secret luggage code is:  undefined.

5. addClass(class|fn) : 为匹配到的元素添加指定的类名

注意:若果要添加一个或多个类名,请用空格分开

添加一个或多个类名

<p id="p1"></p><p id="p2"></p><script type="text/javascript">

    $(function(){

        $("#p1").addClass("demo");

        $("#p2").addClass("demo1 demo2");

    });</script>

结果:

利用回调函数,添加类名

注意:index的索引从0开始,所以我例子+1

<ul>

    <li></li>

    <li></li>

    <li></li></ul><script type="text/javascript">

    $(function(){

        $("li").addClass(function(index){

            return "list"+(index+1);

        });

    });</script>

结果:

6. removeClass([class|fn]) : 从匹配到的元素中删除全部或者指定的类

注意:若果要删除一个或多个类名,请用空格分开

删除匹配元素的指定的一个类

<p class="demo1 demo2 demo3"></p><script type="text/javascript">

    $(function(){

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

    });</script>

结果:

删除匹配元素的所有类

<p class="demo1 demo2 demo3"></p><script type="text/javascript">

    $(function(){

        $("p").removeClass();

    });</script>

结果:

用回调函数删除类

<p></p><script type="text/javascript">

    $(function(){

        $("p").removeClass(function(){

            return $(this).attr("class");

        });

    });</script>

结果:

7. toggleClass(class|fn[,sw]) : 如果存在就删除一个类,如果不存在就添加一个类

<p>这里原本没有.demo2</p><p class="demo1 demo2">这里原本就有.demo2</p><script type="text/javascript">

    $(function(){

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

    });</script>

结果:

8. html([val|fn]) : 取得匹配元素的html内容

获取元素的内容

<p>Hello world!</p><script type="text/javascript">

    $(function(){

        console.log($("p").html());

    });</script>

结果:

设置元素的内容

<p></p><p></p><script type="text/javascript">

    $(function(){

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

    });</script>

结果:

利用回调函数设置元素内容

<p></p><p></p><p></p><script type="text/javascript">

    $(function(){

        $("p").html(function(index){

            return "这是第"+(index+1)+"p标签";

        });

    });</script>

结果:

9. text([val|fn]) : 取得所有匹配元素的内容

text()html()的用法类似

10. val([val|fn|arr]) : 获得匹配元素的当前值

获取元素的值

<input type="text" value="write less,do more!"/><script type="text/javascript">

    $(function(){

        console.log($("input").val());

    });</script>

结果:

设置元素的值

<input type="text"/><script type="text/javascript">

    $(function(){

        $("input").val("write less,do more!");

    });</script>

结果:

利用回调函数设置元素值

<input type="radio"/><input type="radio"/><input type="radio"/><script type="text/javascript">

    $(function(){

        $("input").val(function(index){

            return "radio"+(index+1);

        });

    });</script>

结果:

jQuery属性这部分的知识点中,我遇到了不少的困惑,百试不厌,却百试不灵,比如说removeProp()的用法、html()text()的区别,如果还看到有其他错误的,欢迎各位大神留言指点。

 

 

文章来源:博客园

以上是关于jQuery学习之属性的主要内容,如果未能解决你的问题,请参考以下文章

jQuery_DOM学习之------创建节点及节点属性

(高级篇)jQuery学习之jQuery Ajax用法详解

jQuery学习之jQuery Ajax用法详解

jQuery学习之prop和attr的区别

jQuery学习之prop和attr的区别

python 学习之javascipts中的jQuery