jQuery基本过滤器（三）

1.基本过滤器
1.jQuery对象中存储的dom对象与页面标签声明关系
<div>1</div>
<div>2</div>
<div>3</div>
$("div") == [dom1,dom2,dom3]
2.过滤器就是过滤条件，对已经定位到数组中的DOM对象进行过滤筛选。
3.过滤条件不能独立出现在jQuery函数中，使用的话只能出现在选择器后方。

选择dom对象 语法
选择第一个dom对象 $("选择器:first")
选择最后一个dom对象 $("选择器:last")
选择数组中指定对象 $("选择器:eq(数组索引)")
选择小于指定索引的所有对象 $("选择器:lt(数组索引)")
选择大于指定索引的所有对象 $("选择器:gt(数组索引)")


   
  
   
  
   
  

 

 

4.jQuery中给dom对象绑定事件
1.语法：$(选择器).事件名称(事件的处理函数)
2.示例

$("#btn").click(function(){
     alert("btn按钮单击了")
})

2.表单对象属性过滤器

选择可用的文本框 $(":text:enabled")
选择不可用的文本框 $(":text:disabled")
复选框中选中的元素 $(":checkbox:checked")
选择指定下拉列表中选中的元素 $("选择器>option:selected")


   
   
   
   


2.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // 当页面dom对象加载后，给对象绑定事件
            $("#btn1").click(function(){
                // 获取所有可以使用的text
                var obj = $(":text:enabled");
                // 设置jQuery数组中所有dom对象的value值
                obj.val("hello")
            })

            $("#btn2").click(function(){
                // 获取被选中的复选框
                var obj = $(":checkbox:checked");
                for(var i =0;i < obj.length;i++){
                    alert($(obj[i]).val())
                }
            })

             $("#btn3").click(function(){
                // 获取下拉列表，标签选择器不需要加【:】
                var obj = $("select>option:selected");
                alert($(obj).val())
            })
        })
    </script>
</head>
<body>
    <input id="text1" value="text1"><br/>
    <input id="text2" value="text2" disabled><br/>
    <input id="text3" value="text3"><br/>
    <input id="text4" value="text4" disabled><br/><br/>

    <input type="checkbox" value="游泳">游泳<br/>
    <input type="checkbox" value="骑行" checked>骑行<br/>
    <input type="checkbox" value="画画" checked>画画<br/><br/>

    <p>下拉框</p>
    <select id="lang">
        <option value="java">java语言</option>
        <option value="python" selected>Python语言</option>
        <option value="C">C语言</option>
    </select>

    <p>功能按钮</p>
    <button id="btn1">把所有可用的text设值为hello</button><br/>
    <button id="btn2">显示被选中的复选框的值</button><br/>
    <button id="btn3">显示下拉列表中被选中的值</button><br/>
</body>
</html>
posted @ 2021-03-01 16:26  兵长砍猴  阅读(124)  评论(0)    收藏  举报