jquery 选择器、筛选器、事件绑定与事件委派

一、jQuery简介

　　1、可用的jQuery服务器网站：https://www.bootcdn.cn/

 　　jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理
HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　jQuery的引入

    <script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块)
    <script type="text/javascript">

        //写自己的js或者jquery代码
        
    </script>

二、jQuery与dom对象的关系

(1)jQuery是dom对象的集合;
(2)jQuery和dom对象的方法和属性是隔离的,不能瞎用;
(3)$ <==>jQuery;等价的

两者之间的转换关系
$('选择器')[索引]  ---->  dom对象
$('dom对象')      ---->  jquery对象

三、选择器

　　1、基础选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

　　 jquery 选择器、筛选器、事件绑定与事件委派

　　2、层级选择器（>：儿子选择器；+:毗邻选择器；~：弟弟选择器）

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

jquery 选择器、筛选器、事件绑定与事件委派

　　3、基本筛选器（even：偶数；odd:奇数；lg：小于）

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

jquery 选择器、筛选器、事件绑定与事件委派

　　4、属性选择器

基本语法:$("[属性1][属性2]...")

$('[][id]')

jquery 选择器、筛选器、事件绑定与事件委派

　　5、表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  :
$("input:checked")

jquery 选择器、筛选器、事件绑定与事件委派

　　6、表单属性选择器

    :enabled
    :disabled
    :checked
    :selected

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
    <div class="c1" id="i1">DIV</div>

    <div class="c2">
        <p class="c4">111</p>
        <a href="">click</a>
    </div>
    <div class="p1">
         <p class="c3" id="i3">222</p>
         <p class="c3">333</p>
         <p class="c3" id="i2">444</p>
         <div>
             <p>孙子</p>
         </div>
         <p class="c3">555</p>
         <p class="c3 c8">666</p>
         <p class="c3">777</p>
         <p class="c3">888</p>
    </div>

    <div alex="123" peiqi="678">alex和配齐</div>
    <div alex="123">alex</div>
    <div alex="234">egon</div>
    <div peiqi="678">8888</div>
    <div class="c5">
        <input type="checkbox" name='in' value='456'>111
        <input type="checkbox" name='in' checked="checked">222
        <input type="checkbox" name='in'>333
    </div>
    <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
     </select>

    <hr>

    <div class="c6" yuan="123">123</div>
    <div class="c7" yuan="234">234</div>


    <div class="c9">
        <p>111</p>
        <p>222</p>
        <div class="c10">
            <p>333</p>
        </div>
        <a href="">click</a>
    </div>
    



    <script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块)
    <script type="text/javascript">
        //写自己的js或者jquery代码
        // 基本选择器      
        // $('*').css('color','red');//通用选择器,选择所有
        // $('p').css('color','green');//元素选择器
        // $('#i1').css('color','red');//ID选择器
        // $('.c3').css('color','red');//类选择器
        
        //层级选择器
        // $('.p1 p').css('color','red');//子孙选择器
        // $('.p1>p').css('color','red');//儿子选择器
        // $('.c8+p').css('color','red');//毗邻选择器,只选择挨着的第一个指定标签
        // $('.c8~p').css('color','red');//弟弟选择器

        //基本筛选器
        // $('.p1 p:eq(3)').css('color','red');//选择索引为3的那个标签,返回值为dom对象
        // $('.p1 p:first').css('color','red');//第一个
        // $('.p1 p:last').css('color','red');//最后一个
        // $('.p1 p:even').css('color','red'); //偶数
        // $('.p1 p:lt(2)').css('color','red'); //小于
        // $('.p1 p:gt(2)').css('color','red'); //大于

        // 属性选择器
        // $('[alex]').css('color','red'); //属性名查找
        // $('[alex="123"]').css('color','red');//key=value查找
        // $("[alex='123'][peiqi='678']").css('color','red');//注意引号区分,多属性之间用[]区分,属性之间不能用空格


        //表单选择器
        // $(':checkbox');//获取到复选框的输入标签jquery对象
        // $('[type="checkbox"]');

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

选择器演示示例代码