jquery笔记

选取子元素后代元素的时候，需要加一个空格

//选取class为one的div元素下的第2个子元素
$("div.one :nth-child(2)")

//选取class为one的div父元素下的第一个子元素
$(".one :first-child")

//下拉框被选择，如果不加空格，获取不到，选择的是select下面的option，是子元素
$("select selected")
$("#btn5").click(function(){
//实际被选择的不是 select, 而是 select 的 option 子节点
//所以要加一个 空格. 
//var len = $("select :selected").length
//alert(len);

//因为 $("select :selected") 选择的是一个数组
//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. 
//alert($("select :selected").val());

//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
//得到的 DOM 对象, 而不是一个 jQuery 对象
$("select :selected").each(function(){
    alert(this.value);
});
});

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="scripts/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>
View Code

 

posted @ 2017-02-03 22:28  Orc_Warrior  阅读(142)  评论(0)  编辑  收藏  举报