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

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

jQuery入门（2）
jQuery中的选择器
2020-04-07jQuery
第九节属性选择器、表单选择器
jQuery篇之获取jQuery对象
08-过滤选择器-子元素过滤&表单过滤
html5选择器
00.CSS基础知识回顾
选择器
HTML5-Day3

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

jQuery入门（2）
jQuery选择器属性筛选选择器子元素筛选选择器表单元素选择器表单对象属性筛选选择器特殊选择器this ...
jQuery中的选择器
css选择器层级选择器表单选择器基本过滤器内容过滤器属性过滤器子元素过滤器可见性过滤选择器表单属性...
2020-04-07jQuery
基本选择器层叠选择器属性选择器位置选择器表单选择器操作操作元素的CSS样式设置元素内容 jQuery...
第九节属性选择器、表单选择器
1、属性选择器网页显示： 2、表单选择器网页显示： 3、操作css属性网页显示： 4、操作属性 attr、r...
jQuery篇之获取jQuery对象
获取筛选器基本筛选器内容筛选器可见性筛选选择器属性筛选器子元素筛选器表单元素筛选器表单对象属性筛选选择器
08-过滤选择器-子元素过滤&表单过滤
过滤选择器-子元素过滤&表单过滤作者：曾庆林 :nth-child()选择器详细功能描述: 表单对象属性过滤选择...
html5选择器
html5选择器属性选择器层级选择器伪选择器属性选择器属性选择器和标签选择器、id选择器、类选择器一样，...
00.CSS基础知识回顾
1.选择器元素选择器 id选择器类选择器属性选择器[属性名]选取含有指定属性的元素[属性名="属性值"]选取...
选择器
标签选择器 class 属性选择器 id 属性选择器
HTML5-Day3
选择器：属性选择器、伪类选择器、伪元素选择器属性选择器：属性是相对于标签而言，所谓属性选择器就是根据指定名称的属...

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

1、属性选择器

2、表单选择器

3、操作css属性

4、操作属性 attr、removeAttr、prop

5、jQurey对象的遍历

6、数组的遍历

7、操作元素中的内容

8、处理文档

9、根据enabled、disabled、checked过滤

10、hover

相关文章

jQuery入门（2）

jQuery中的选择器

2020-04-07jQuery

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

jQuery篇之获取jQuery对象

08-过滤选择器-子元素过滤&表单过滤

html5选择器

00.CSS基础知识回顾

选择器

HTML5-Day3

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

1、属性选择器

2、表单选择器

3、操作css属性

4、操作属性 attr、removeAttr、prop

5、jQurey对象的遍历

6、数组的遍历

7、操作元素中的内容

8、处理文档

9、根据enabled、disabled、checked过滤

10、hover

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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