day77-jQuery-选择器和筛选器

1. jQuery介绍
    1.1 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
    1.2 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
        它的宗旨就是：“Write less, do more.“
    1.3 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
    1.4 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
    1.5 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
    1.6 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
    1.7 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
    1.8 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
    1.9 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

2. jQuery内容：
    2.1 选择器
    2.2 筛选器
    2.3 样式操作
    2.4 文本操作
    2.5 属性操作
    2.6 文档处理
    2.7 事件
    2.8 动画效果
    2.9 插件
    3.0 each、data、Ajax

3. DOM对象和jQuery对象转换：
    3.1 DOM对象和jQuery对象他们都有各自的方法，他们的方法不能互用，所以需要转换。
    3.2 注意声明jQuery对象时，前面要加$。
    3.3 DOM对象转换成jQuery对象:    $(DOM对象)，这是一个Object对象
    3.4 jQuery对象转换成DOM对象:    jQuery对象[0]，这个一个具体的标签
    3.5下面测试可以发现：
            $(DOM对象)    这个DOM对象指的是通过ById、ByClassName、ByTagName找到的DOM对象。
                        简单理解就是DOM对象套一个$就可以转换为jQuery对象。
            jQuery对象[0]    可获取一个具体的标签，它可以是含有id、class的标签。
                        简单理解就是jQuery对象加一个[0]就可以转换为DOM对象。

    <div id="d1">d1d1</div>
        <div id="d2">d2d2</div>
        <div class="c1">c1c1</div>
        <div class="c2">c2c2</div>

    ById:    var d1Ele = document.getElementById('d1');    //DOM对象:d1Ele
        d1Ele;                    //<div id="d1">  这个一个具体的标签
        $(d1Ele);                    //Object [ div#d1 ]  DOM对象转换成jQuery对象

                var $d2Ele = $('#d2');        //jQuery对象：$d2Ele
        $d2Ele；                //Object [ div#d2 ]
                $d2Ele[0];                //<div id="d2">  jQuery对象转换成DOM对象,这个一个具体的标签

    ByClassName:    var c1Ele = document.getElementsByClassName('c1');    //DOM对象:d1Ele
    或ByTagName:    c1Ele;            //HTMLCollection [ div.c1 ] 
            c1Ele[0];            //<div class="c1">  这个一个具体的标签
            $(c1Ele);            //Object [ div.c1 ]
            $(c1Ele[0]);        //Object [ div.c1 ]
            注意：$(c1Ele)和$(c1Ele[0])结果都一样，都是jQuery对象。
                
            var $c2Ele = $('.c2');
                    $c2Ele;        //Object { 0: div.c2, length: 1, prevObject: Object(1) }
                   $c2Ele[0];        //<div class="c2"> jQuery对象转换成DOM对象,这个一个具体的标签

4. 选择器: 查找标签
    4.1 基本选择器
        id选择器：    $('#id')        例：$('#d1')
        class选择器：    $('.className')    例：$('.c1')
        标签选择器：    $('tagName')    例：$('div')
        配合使用：    $('div.c1')    找到类名是c1的div标签
        所有元素选择器：    $("*")
        组合选择器：    $('#id,.className,tagName')    例：$('#id,.c1,div') 注意逗号分隔

    4.2 层级选择器
        $("x y");// x的所有后代y（子子孙孙）
        $("x > y");// x的所有儿子y（儿子） 例如：$('#d1>a');
        $("x + y")// 找到所有紧挨在x后面的y
        $("x ~ y")// x之后所有的兄弟y

    4.3 属性选择器
        <input type="text" name="用户名">
        <input type="password">
        <input type="checkbox">

        $("input[type='checkbox']");    // 找到checkbox类型的input标签，注意外层是双引号，内层是单引号
        $("input[type!='text']");    // 找到类型不是text的input标签
        $("input[name='用户名']");

5. 筛选器：索引都是从0开始
    5.1 基本筛选器：
    :first // 第一个
    :last // 最后一个
    :eq(index)// 索引等于index的那个元素
    :even // 匹配所有索引值为偶数的元素
    :odd // 匹配所有索引值为奇数的元素
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素，注意这个l是L的小写
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

    示例：
        <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
            </ul>

    $('ul li:first');    //Object { 0: li, length: 1, prevObject: Object(1) }
    $('ul li:eq(2)');
    $('ul li:gt(2)');    //也就是找到索引为3和4的标签
    $('ul li:not(.c1)');    //找到后代中所有不包含c1类的li标签
    $('ul li:not(:has(a))')    //找到后代中所有不包含a标签的li标签
    $("div:has(h1)")    //找到后代中有h1标签的div标签
    $("div:has(.c1)")    //找到后代中有c1样式类的div标签

    5.2 表单筛选器：
    :text
    :password
    :file
    :radio
    :checkbox
    :submit
    :reset
    :button

    :enabled    //可用的
    :disabled    //不可用
    :checked
    :selected

    $(":checkbox")          // 找到所有包含checkbox的标签
    $("input:checkbox")      // 找到所有包含checkbox的标签,这两种写法是同一个意思。

    示例1：找到可用的input标签：
        <form>
              <input name="email" disabled="disabled" />
              <input name="id" />
        </form>

        $("input:enabled")      // 找到可用的input标签

    示例2：找到默认的(被选中的)option：
        <select id="s1">
              <option value="beijing">北京市</option>
              <option value="shanghai">上海市</option>
              <option selected value="guangzhou">广州市</option>
              <option value="shenzhen">深圳市</option>
        </select>

        $(":selected")  // 找到所有默认的option

    5.3 筛选器方法:    使用 对象.方法() 找到的元素也是一个对象，是对象就可以使用jQuery的方法，例如$('#id').next().siblings('.c1');
            注意：如果()可填写，那么它可填写的是id、class、tagname、其他表达式。
        下一个元素：
            $("#id").next()
            $("#id").nextAll()
            $("#id").nextUntil("#i2")
        上一个元素：
            $("#id").prev()
            $("#id").prevAll()
            $("#id").prevUntil("#i2")
        父亲元素：
            $("#id").parent()
            $("#id").parents()  // 查找当前元素的所有的父辈元素
            $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
        儿子和兄弟元素：
            $("#id").children();// 儿子们，跟$('#d1>*');效果一样。具体某个儿子：$("#id").children('#d1')或$("#id").children('.c1');
            $("#id").siblings();// 兄弟们。具体某个兄弟：$("#id").siblings('#d1')或$("#id").siblings('.c1');

        查找
            搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
            $("div").find("p")    等价于$("div p")

        筛选：用逗号分隔多个表达式。
            $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的，等价于 $("div.c1")

        补充：跟上面的基本筛选器的效果一样
            .first() // 获取匹配的第一个元素
            .last() // 获取匹配的最后一个元素
            .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
            .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
            .eq() // 索引值等于指定值的元素