首页 > 资讯 > JavaScript > 正文

jQuery_属性操作

17-01-09 来源：[db:作者]

收藏我要投稿

•attr(): 获取属性和设置属性

–当为该方法传递一个参数时, 即为某元素的获取指定属性

–当为该方法传递两个参数时, 即为某元素设置指定属性的值

•jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等.

•removeAttr(): 删除指定元素的指定属性

设置和获取HTML,文本和值

•读取和设置某个元素中的 HTML 内容:html() . 该方法可以用于 XHTML,但不能用于 XML文档

•读取和设置某个元素中的文本内容:text(). 该方法既可以用于 XHTML也可以用于 XML文档.

•读取和设置某个元素中的值: val() --- 该方法类似JavaScript 中的value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Untitled Document</title>  
          
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
              
            //测试使用 html() 方法.   
            $(function(){  
                alert($("#city").html());  
                $("#city").html("<li id='hz'>杭州</li>");  
            })  
              
        </script>  
          
    </head>  
    <body>  
        <p>你喜欢哪个城市?</p>  
        <ul id="city">  
            <li id="bj" name="BeiJing">北京</li>  
            <li>上海</li>  
            <li id="dj">东京</li>  
            <li id="se">首尔</li>  
        </ul>  
          
        <br><br>  
        <p>你喜欢哪款单机游戏?</p>  
        <ul id="game">  
            <li id="rl">红警</li>  
            <li>实况</li>  
            <li>极品飞车</li>  
            <li>魔兽</li>  
        </ul>  
          
        <br><br>  
        <p>你喜欢哪种开发语言?</p>  
        <ul id="language">  
            <li>C</li>  
            <li>Java</li>  
            <li>.NET</li>  
            <li>PHP</li>  
        </ul>  
          
        <br><br>  
        gender:   
            <input type="radio" name="gender" value="male"/>Male  
            <input type="radio" name="gender" value="female"/>Female  
      
        <br><br>  
        name: <input type="text" name="username" value="hello"/>  
          
    </body>  
</html>

<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Untitled Document</title>  
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
          
            $(function(){  
                //1. 为 [#address] 添加 focus(获取焦点), blur(失去焦点) 响应函数  
                $(":text").focus(function(){  
                    //2. 当获取焦点时, 若 #address 中是默认值  
                    //(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""  
                    var val = $(this).val();  
                      
                    if(val == this.defaultValue){  
                        $(this).val("");  
                    }  
                }).blur(function(){  
                    //3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""  
                    //则为其恢复默认值.   
                    var val = this.value;     
                    if($.trim(val) == ""){  
                        this.value = this.defaultValue;  
                    }  
                });  
                  
                //2.   
                $(":button:eq(1)").click(function(){  
                    $("#single").val("选择3号");  
                });  
                  
                $(":button:eq(2)").click(function(){  
                    $("#multiple").val(["选择2号", "选择4号"]);                 
                });  
                                  
                $(":button:eq(3)").click(function(){  
                    $(":checkbox[name='c']").val(["check2", "check4"]);  
                });  
                  
                $(":button:eq(4)").click(function(){  
                    //即便是为一组 radio 赋值, val 参数中也应该使用数组.   
                    //使用一个值不起作用。   
                    $(":radio[name='r']").val(["radio2"]);  
                });  
                  
                $(":button:eq(5)").click(function(){  
                    //val() 可以直接获取 select 的被选择的值.   
                    alert($("#single").val());  
                    alert($("#multiple").val());  
                      
                    //val 不能直接获取 checkbox 被选择的值  
                    //若直接获取, 只能得到第一个被选择的值.   
                    //因为 $(":checkbox[name='c']:checked") 得到的是一个  
                    //数组. 而使用 val() 方法只能获取数组元素的第一个值  
                    //若希望打印被选择的所有制, 需要使用 each 遍历.   
                    //alert($(":checkbox[name='c']:checked").val());  
                    $(":checkbox[name='c']:checked").each(function(){  
                        alert(this.value);  
                    });  
                      
                    //而 raido 被选择的只有一个, 所以可以直接使用 val() 方法.   
                    alert($(":radio[name='r']:checked").val());  
                });  
                  
            })  
          
        </script>  
    </head>  
    <body>  
        <input type="text" id="address" value="请输入邮箱地址"><br>  
        <input type="text" id="password" value="请输入邮箱密码"><br>  
        <input type="button" value="登录">  
          
        <br><br><br>  
          
        <input type="button" value="使单选下拉框的'选择3号'被选中"/>  
        <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>  
        <input type="button" value="使多选框的'多选2'和'多选4'被选中"/>  
        <input type="button" value="使单选框的'单选2'被选中"/><br>  
        <input type="button" value="打印已经被选中的值"><br>  
   
        <br/>  
          
        <select id="single">  
          <option>选择1号</option>  
          <option>选择2号</option>  
          <option>选择3号</option>  
        </select>  
          
        <select id="multiple" multiple="multiple" style="height:120px;">  
          <option selected="selected">选择1号</option>  
          <option>选择2号</option>  
          <option>选择3号</option>  
          <option>选择4号</option>  
          <option selected="selected">选择5号</option>  
        </select>  
          
        <br/><br/>  
  
        <input type="checkbox" name="c" value="check1"/> 多选1  
        <input type="checkbox" name="c" value="check2"/> 多选2  
        <input type="checkbox" name="c" value="check3"/> 多选3  
        <input type="checkbox" name="c" value="check4"/> 多选4  
          
        <br/>  
          
        <input type="radio" name="r" value="radio1"/> 单选1  
        <input type="radio" name="r"  value="radio2"/> 单选2  
        <input type="radio" name="r"  value="radio3"/> 单选3  
  
    </body>  
</html>

点击复制链接与好友分享!回本站首页