jQuery的属性操作（attr,prop,html,text,val,addClass）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

</head>
<body>

<img src="imgs/01.jpg" alt=""/>
<img src="imgs/02.jpg" alt=""/>

<ul>
    <li>Hello111</li>
    <li>Hello222</li>
    <li>Hello333</li>
</ul>
<p>this is p1</p>
<p>this is p2</p>

<select id="single">
    <option>Single111</option>
    <option>Single222</option>
    <option>Single333</option>
    <option>Single444</option>
</select>
<p>this is p3</p>
<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple111</option>
    <option>Multiple222</option>
    <option selected="selected">Multiple333</option>
</select>
<p>this is p4</p>
<input type="checkbox" value="check1" checked/> check111
<input type="checkbox" value="check2"/> check222
<br/>
<input type="radio" value="radio1"/> radio111
<input type="radio" value="radio2"/> radio222
<br>
<input type="text" value="this is text1" class="items">
<input type="text" value="this is text2" class="items">
<input type="text" value="this is text3">

</body>

</html>

<script>
    $(function () {
        /**
         * 获取img标签的个数
         * /
         // var  size = $("img").size();
         // alert(size);
         // var len = $("img").length;
         // alert(len);


         /**
         * 将jquery对象通过get函数转化为DOM
         * /
         // var s1 = $("img").get(1).src;
         // alert(s1);

         /**
         * 为所有图像设置src属性
         */
        //$("img").attr("src", "imgs/01.jpg");

        /**
         * 返回文档中所有图像的src属性值。
         */
        // alert($("img").attr("src"));

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

        //$("img").attr({ src: "imgs/01.jpg", alt: "Test Image" });
        /**
         *把src属性的值设置为title属性的值。
         */
        //$("img").attr("title", function() { return this.src });

        /**
         * 将文档中图像的src属性删除
         */
        // $("img").removeAttr("src");

        /**
         * 为匹配的元素加上 'selected' 类
         */
        // $("p").addClass("selected1 selected2");

        /**
         * 给li加上不同的class
         */
        // $('ul li').addClass(function() {
        //     return 'item-' + $(this).index();
        // });

        /**
         * 从匹配的元素中删除 'selected1' 类
         */
        // $("p").removeClass("selected1");

        /**
         *删除匹配元素的所有类
         */
        // $("p").removeClass();

        //alert($('p').html());

        /**
         * 设置所有 p 元素的内容
         */
        // $("p").html("Hello <b>world</b>!");

        /**
         * 使用函数来设置所有匹配元素的内容。
         */
        // $("p").html(function(n){
        //     return "这个 p 元素的 index 是：" + n;
        // });

        /**
         * 返回p元素的文本内容。
         */
        //alert($('p:first').text());

        /**
         * 设置所有 p 元素的文本内容
         */
        //$("p").text("Hello world!Hello world!Hello world!");
        /**
         * 使用函数来设置所有匹配元素的文本内容。
         */

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

        /**
         * 获取文本框中的值
         */
        //alert($("input:last").val());

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

        /**
         * 回调函数设定文本框的值
         */

        // $('input:text.items').val(function() {
        //     alert(this.value+","+this.className);
        //     return this.value + ',' + this.className;
        // });

        /**
         * 设置初始值
         */
        //$("#single").val("Single333");
        //$("input").val(["check2", "radio1"]);

        /**
         * 返回属性的值
         */
       // var val = $("input[type='checkbox']").prop("checked");
        //alert(val)
        /**
         * 设置属性的值
         */
        //$("input[type='checkbox']").prop("checked", true);

        /**
         * 使用函数设置属性和值：
         */
        // $("input[type='checkbox']").prop("checked", function( i, val ) {
        //     alert(i+","+val);
        //     return !val;
        // });
    })

</script>
jQuery的属性操作（attr,prop,html,text,val,addClass）

猜你喜欢
