一、选择器（selector）

可以通过选择器获得某个或某些元素对象。通过jQuery函数结合选择器获得某个或某些元素对象的jquery对象。

1. 基本选择器

id选择器

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert($("#text1").val());
        });
    </script>
</head>
<body>
    <input type="text" id="text1" value="111">
    <input type="text" value="222">
    <input type="text" value="333">
</body>
</html>

类选择器

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert("ok");
            $(".text1").val("000");
        });
    </script>
</head>
<body>
    <input type="text" id="text1" value="111">
    <input type="text" class="text1" value="222">
    <input type="text" class="text1" value="333">
</body>
</html>

html元素选择器

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert("ok");
            $("input").val("000");
        });
    </script>
</head>
<body>
    <input type="text" id="text1" value="111">
    <input type="text" class="text1" value="222">
    <input type="text" class="text1" value="333">
</body>
</html>

选择器合并

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert("ok");
            $("#text1,.text1").val("000");
        });
    </script>
</head>
<body>
    <input type="text" id="text1" value="111">
    <input type="text" class="text1" value="222">
    <input type="text" value="333">
</body>
</html>

2. 层级选择器

有层级关系时，例如子元素、后代元素、兄弟元素的选择时。

查找后代元素

ancestor descendant

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert("ok");
            $("form input").val("000");
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="text1" value="111">
        <div>
            <input type="text" class="text1" value="222">
        </div>
    </form>
    <input type="text" value="333">
</body>
</html>

获得子元素的选择器

parent > child

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert("ok");
            $("form>input").val("000");
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="text1" value="111">
        <div>
            <input type="text" class="text1" value="222">
        </div>
    </form>
    <input type="text" value="333">
</body>
</html>

获得下一个兄弟元素

prev + next

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
    $(function(){
        alert("ok");
        $("label+input").val("000");
    });
    </script>
</head>
<body>
    <form>
        <label>姓名：</label>
        <input type="text" id="text1" value="111">
        <div>
            <label>年龄：</label>
            <input type="text" class="text1" value="222">
            <input type="text" value="333">
        </div>
    </form>
</body>
</html>

获得后面的所有兄弟元素

prev ~ siblings

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
    $(function(){
        alert("ok");
        $("label~input").val("000");
    });
    </script>
</head>
<body>
    <form>
        <label>姓名：</label>
        <input type="text" id="text1" value="111">
        <div>
            <input type="text" value="444">
            <label>年龄：</label>
            <input type="text" class="text1" value="222">
            <input type="text" value="333">
        </div>
    </form>
</body>
</html>

3. 基本过滤选择器

通过数量过滤出选择的元素，包括:first 、:last 、:eq(index) 、:gt(index)、:lt(index) 、:even 、:odd

4. 属性过滤选择器

通过元素的属性进行过滤 [属性] 或 [属性=‘值’] 或 [属性!='值']

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            alert("ok");
            //输入框的值设置为000
            //$("label~input[type='text']").val("000");
            //输入框内容为空的 设置为000
            //$("input[value='']").val("000");
        });
    </script>
</head>
<body>
    <form>
        <label>姓名：</label>
        <input type="text" id="text1" value="111">
        <div>
            <label>年龄：</label>
            <input type="text" class="text1" value="222">
            <input type="text" value=''>
            <input type="button" value="确定">
        </div>
    </form>
</body>
</html>

5. 内容过滤选择器

过滤元素开始标记和结束标记之间的文本内容的

: contains

:empty

:has

:parent

6. 表单选择器

:text

:checkbox

:radio 等

二、事件处理

jquery对象提供了一些绑定事件的函数

<script>
    $(function(){
        $("#p").change(function(){
        });
        $("#p").click(function(){
        });
    });
</script>

jquery提供了一个bind函数，能同时绑定多个事件

<script>
    $(function(){
        $("#p").bind({
            change:function(){
            },
            click:function(){
            }
        });
    });
</script>

合成事件：事件的切换

1. hover：鼠标悬停和鼠标移开的合成事件

2. toggle：click的合成事件，切换toggle中的函数