第九节属性选择器、表单选择器

作者: 最美下雨天 | 来源:发表于2018-06-13 14:42 被阅读15次

1、属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
       <p class="pclass"></p>
        <input type="text" name="username" id="username" value="zhangsan" />
        <input type="button" name="username" id="username" value="zhangsan" />
        
        
        <script type="text/javascript">
            //获取包含type属性的input标签
            var arr=$("input[type]");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
            
            console.log("--------分割线----------");
            //获取type属性值为button的input标签
           var arr=$("input[type='button']");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        
            
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

2、表单选择器

image.png
表单选择器有很多，具体可以参考文档：https://www.jquery123.com/category/selectors/form-selectors/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    
      <form>

            <input type="password" />
            <input type="" />
            <input type="radio" />
            <input type="checkbox" />

            <select name="city">
                <option value="">beijing</option>
            </select>

            <textarea name="" rows="" cols=""></textarea>

            <input type="submit" value="注册" />
        </form>
        
        <script type="text/javascript">
            //:input 选择所有 input, textarea, select 和 button 元素
            var arr=$(":input");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
            
            console.log("-------分割线-------");
            
            
            //注意区别下面的标签选择器
            var arr=$("input");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        
            
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

3、操作css属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
            #div1 {
                border: solid red 1px;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    
     <div id="div1">
            111111111
        </div>

        <div id="div2">
            222222222
        </div>
        
        
        <script type="text/javascript">
            //只设置一个css属性值
            $("#div1").css("color","red");
            
            
            
            //设置多个css属性值
            $("#div2").css({
                "border": "solid red 1px",
                "width": "100px",
                "height": "100px"
            })
            
            //获取css属性值
            console.log($("#div2").css("width"));
            //像width这种比较常见的属性，一般都有提供简便方法
            console.log($("#div2").width());
    
            
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

4、操作属性 attr、removeAttr、prop

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
        <input type="button" id="btn" value="注册" />
        <input id="rd" type="radio" value="male" name="gender" />男
        <input type="radio" value="female" name="gender" />女
        
        
        <script type="text/javascript">
            //获取button的type属性的值
            console.log($("#btn").attr("type"));
            console.log("-------分割线-------");
            //添加一个属性
            $("#btn").attr("city","beijing");
            //添加多个属性
            $("#btn").attr({
                "city":"上海",
                "gender":"male"
            });
            //prop也是设置属性的，但是在设置属性时首先考虑使用attr，如果attr不生效，再使用prop
            $("#rd").attr("checked","checked");
            console.log($("#rd").attr("checked"));
            console.log($("#rd").prop("checked"));
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

5、jQurey对象的遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
       <ul>
            <li>beijing</li>
            <li>shanghai</li>
            <li>shenzhen</li>
        </ul>
        
        
        <script type="text/javascript">
            //jQuery对象的遍历
            $("li").each(function(){
                // this: 代表当前遍历到的对象
                console.log(this);
            })
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

还有一种遍历方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
       <ul>
            <li>beijing</li>
            <li>shanghai</li>
            <li>shenzhen</li>
        </ul>
        
        
        <script type="text/javascript">
            //jQuery对象的遍历
            $("li").each(function(){
                // this: 代表当前遍历到的对象
                console.log(this);
            });
            
            //还有一种遍历方法
            $("li").each(function(index,obj){
                console.log("index:"+index+"----obj:"+obj);
                
            });
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

6、数组的遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
       <ul>
            <li>beijing</li>
            <li>shanghai</li>
            <li>shenzhen</li>
        </ul>
        
        
        <script type="text/javascript">
            
            //定义一个数组，默认添加了3个元素
            var arr=new Array(1,2,"3");
            $.each(arr, function() {
                console.log(this);
            });
            
            $.each(arr, function(index,obj) {
                console.log(index+"-------"+obj);
            });
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

7、操作元素中的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
       <input type="text" id="username" value="zhangsan" />

        <p id="pid">this is a p
            <a href="#">aaaaa</a>
        </p>

        <p id="pid2"></p>
        
        
        <script type="text/javascript">
            
            //获取value属性的值
            console.log($("#username").val());
            
            //设置value属性的值
            $("#username").val("lisi");
            
            //类似于DOM操作中的innerHtml属性
            console.log($("#pid").html());
            //累世与DOM操作中的innerText属性
            console.log($("#pid").text());
            
            //添加内容，如果内容包含标签，会解析标签
            $("#pid2").html('<a href="#">aaaaa</a>');
            //添加内容，如果内容包含标签，只做普通文本解析
            $("#pid2").text('<a href="#">aaaaa</a>');
            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

8、处理文档

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
       <ul id="uid">
            <li>beijing</li>
            <li>shanghai</li>
            <li>shenzhen</li>
        </ul>
        
        
        <script type="text/javascript">
            
            //创建一个元素
            var gz=$("<li>").html("guangzhou");
            //将这个节点添加到ul下面
            $("#uid").append(gz);
            //将这个节点添加到ul下面
//          gz.appendTo($("#uid"));
            
            var tj=$("<li>").html("tianjin");
            $("#uid").prepend(tj);
//          tj.appendTo($("#uid"));


            var mg=$("<li>").html("meiguo");
            //ul的兄弟节点
            $("#uid").after(mg);
//          mg.insertAfter($("#uid"));

            var mg=$("<li>").html("哈哈哈哈");
            $("#uid").before(mg);

            
        </script>
        
    
    </body>
</html>

网页显示：

image.png

9、根据enabled、disabled、checked过滤

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">

        </style>
    </head>

    <body>

        <form>

            <input type="text" disabled="disabled" />
            <input type="button" value="主页" />

            <input type="submit" value="注册" />

            <input type="radio" checked="checked" name="gender" id="gender" value="male" />男
            <input type="radio" name="gender" id="gender" value="female" />女

            <select name="">
                <option value="1">北京</option>
                <option selected="selected" value="2">上海</option>
                <option value="3">深圳</option>
            </select>
        </form>

        <script type="text/javascript">
            // 过滤表单元素可用的    
            $("input:enabled").each(function() {
                console.log(this)

            })
            // 过滤表单元素不可用的
            $("input:disabled").each(function() {
                console.log(this)

            })
            //           过滤单选按钮
            $("input:checked").each(function() {
                console.log(this)

            })
            //           过滤选中的下拉框
            $("option:selected").each(function() {
                console.log(this)
            })
        </script>

    </body>

</html>

10、hover

同时监听鼠标进去和出来事件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                border: red solid 1px;
            }
        </style>
    </head>

    <body>

        <div id="div1">

        </div>

        <script type="text/javascript">
            $("#div1").hover(function() {
                console.log("over")
            }, function() {
                console.log("out")
            })
        </script>

    </body>

</html>

网页显示：

image.png

第九节属性选择器、表单选择器

1、属性选择器

2、表单选择器

3、操作css属性

4、操作属性 attr、removeAttr、prop

5、jQurey对象的遍历

6、数组的遍历

7、操作元素中的内容

8、处理文档

9、根据enabled、disabled、checked过滤

10、hover

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第九节 属性选择器、表单选择器

1、属性选择器

2、表单选择器

3、操作css属性

4、操作属性 attr、removeAttr、prop

5、jQurey对象的遍历

6、数组的遍历

7、操作元素中的内容

8、处理文档

9、根据enabled、disabled、checked过滤

10、hover

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第九节属性选择器、表单选择器