冰冻三尺非一日之寒--jQuery

 第十七章     jQuery 
    
    http://jquery.cuishifeng.cn/

一.过滤选择器：

目的：处理更复杂的选择，是jQuery自定义的，不是CSS3中的选择器。

语法：jQuery的过滤选择器借鉴了css中伪类的语法，即选择器以冒号（：）开始。

　　　　jQuery经常使用的过滤选择器

　　

选择器	说明
:animated	全部处于动画中的元素
:button	全部按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>标记
:checkbox	全部复选框，等同于input[type=checkbox]
:checked	选择被选中的复选框或单选框
:contains(characters)	选择全部包含了文本"characters"的元素
:disabled	页面中被禁用了的元素
:enabled	页面中没有被禁用的元素
:file	表单中的文件上传元素，等同于input[type=file]
:header	选中全部标题元素，例如<h1>~<h6>
:hidden	匹配全部的不可见元素，例如设置为display:none的元素或input元素的type属性为“hidden”的元素
:image	表单中的图片按钮，等同于input[type=image]
:input	表单输入元素，包括<input>、<select>、<textarea>、<button>
:not(filter)	反向选择
:parent	选择全部拥有子元素(包括文本)的元素，即除空元素外的全部元素
:password	表单中的密码域，等同于input[type=password]
:radio	表单中的单选按钮，等同于input[type=radio]
:reset	表单中的重置按钮，等同于input[type=radio]和button[type=reset]
:selected	下拉菜单中的被选中项
:submit	表单中的提交按钮，包括input[type=submit]和button[type=submit]
:text	表单中的文本域，等同于input[type=text]
:visible	页面中的全部可见元素

二.css位置选择器

目的：基于元素的位置选择元素，又不局限于此。

语法：jQuery的位置选择器借鉴了css中伪类的语法，即选择器以冒号（：）开始，能够看作是CSS为类的一种扩展

选择器	说明
:first	第一个元素，例如div p:first选中页面中全部p元素的第一个，且该p元素是div的子元素
:last	最后一个元素，例如div p:last选中页面中全部p元素的最后一个，且该p元素是div的子元素
:first-child	第一个子元素，例如ul:first-child选中全部的ul元素，且该ul元素是其父元素的第一个子元素
:last-child	最后一个子元素，例如ul:last-child选中全部的ul元素，且该ul元素是其父元素的最后一个子元素
:only-child	全部没有兄弟的子元素，例如p:only-child选中全部的p元素，若是该p元素是其父元素的惟一子元素
:nth-child(n)	第n个子元素，例如li:nth-child(3)选中全部li元素，且该li元素是其父元素的第3个子元素（从1开始计数）
:nth-child(odd|even)	全部的奇数号或偶数号的子元素
:nth-child(nX+Y)	利用公式来计算子元素的位置，例如:nth-child(5n+1)选中第5n+1个子元素（n从0开始计数，即1,6,11,...）
:odd或:even	对于整个页面而言，选中奇数或偶数号元素，例如p:even为页面中全部排在偶数位的p元素（从0开始计算）
:eq(n)	页面中第n个元素，例如p:eq(4)为页面中第5个p元素
:gt(n)	页面中第n个元素以后的全部元素（不包括第n个元素）
:lt(n)	页面中第n个元素以前的全部元素（不包括第n个元素）

    
    模块 《=》类库
    DOM/BOM/JavaScript的类库
    

$("ancestor descendant")：选取ancestor元素里的全部descendant元素。

例:$("div span")选取<div>里的全部的<span>元素。

$("parent>child")选取parent元素下的child元素，与$("ancestor descendant")的区别是$("ancestor descendant")选取的是后代元素。

例:$("div >span")选取<div>下元素名是<span>的子元素。

$("prev+next")选取紧接在prev元素后面的next元素。

例：$(".one+div")选取class为one的下一个<div>同辈元素。

$("prev~siblings")选取prev元素以后的全部siblings元素。

例：$("#two~div")选取id为two的元素后面全部<div>同辈元素。

注意：

jquery中next()来代替$("prev+next")选择器。

jquery中nextAll()来代替$("prev~siblings")选择器。

$("prev~siblings")和jquery中siblings()的区别：

$("prev~siblings")只能选中"prev"后面的同辈<div>元素。

siblings()与先后位置无关，只有是同辈节点就都能匹配。

    版本：        1.x  1.12        2.x        3.x        转换：        jquery对象[0]   => Dom对象        Dom对象         => $(Dom对象)            1、查找元素        DOM            10左右        jQuery：            选择器，直接找到某个或者某类标签            1. id                $('#id')            2. class                <div class='c1'></div>                $(".c1")            3. 标签                <div id='i10' class='c1'>                    <a>f</a>                    <a>f</a>                </div>                <div class='c1'>                    <a>f</a>                </div>                <div class='c1'>                    <div class='c2'> </div>                </div>                                $('a')                            4. 组合a                <div id='i10' class='c1'>                    <a>f</a>                    <a>f</a>                </div>                <div class='c1'>                    <a>f</a>                </div>                <div class='c1'>                    <div class='c2'> </div>                </div>                                $('a')                $('.c2')                                $('a,.c2,#i10')                            5. 层级                $('#i10 a') 子子孙孙                $('#i10>a') 儿子                            6. 基本                :first                :last                :eq()            7. 属性                $('[alex]')       具备alex属性的全部标签                $('[alex="123"]') alex属性等于123的标签                                            <input type='text'/>                <input type='text'/>                <input type='file'/>                <input type='password'/>                                $("input[type='text']")                $(':text')                        实例：                    多选，反选，全选                - 选择权                -                     $('#tb:checkbox').prop('checked');        获取值                    $('#tb:checkbox').prop('checked', true);  设置值                -                     jQuery方法内置循环： $('#tb:checkbox').xxxx                                    - $('#tb:checkbox').each(function(k){                        // k当前索引                        // this，DOM，当前循环的元素 $(this)                                            })                - var v = 条件 ? 真值 : 假值                                            筛选                                                $('#i1').next()                $('#i1').nextAll()                $('#i1').nextUntil('#ii1')                                <div>                    <a>asdf</a>                    <a>asdf</a>                    <a id='i1'>asdf</a>                    <a>asdf</a>                    <a id='ii1'>asdf</a>                    <a>asdf</a>                </div>                                $('#i1').prev()                $('#i1').prevAll()                $('#i1').prevUntil('#ii1')                                                $('#i1').parent()                $('#i1').parents()                $('#i1').parentsUntil()                                $('#i1').children()                $('#i1').siblings()                $('#i1').find()                $('li:eq(1)')                $('li').eq(1)                first()                last()                hasClass(class)        文本操做：                $(..).text()           # 获取文本内容                $(..).text(“<a>1</a>”) # 设置文本内容                                $(..).html()                $(..).html("<a>1</a>")                                $(..).val()                $(..).val(..)        样式操做：                addClass                removeClass                toggleClass                        属性操做：                # 专门用于作自定义属性                $(..).attr('n')                $(..).attr('n','v')                $(..).removeAttr('n')                                <input type='checkbox' id='i1'  />                                                # 专门用于chekbox,radio                $(..).prop('checked')                $(..).prop('checked', true)                                PS:                     index 获取索引位置                            文档处理：                append                prepend                after                before                                remove                empty                                clone        css处理                        $('t1').css('样式名称', '样式值')            点赞：                 - $('t1').append()                 - $('t1').remove()                 - setInterval                 - 透明度 1 》 0                 - position                 - 字体大小，位置        位置：            $(window).scrollTop()  获取            $(window).scrollTop(0) 设置            scrollLeft([val])                        offset().left                 指定标签在html中的坐标            offset().top                  指定标签在html中的坐标                        position()                       指定标签相对父标签(relative)标签的坐标            <div style='relative'>                <div>                    <div id='i1' style='position:absolute;height:80px;border:1px'></div>                </div>            </div>                                    $('i1').height()           # 获取标签的高度 纯高度            $('i1').innerHeight()      # 获取边框 + 纯高度 + ？            $('i1').outerHeight()      # 获取边框 + 纯高度 + ？            $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？                        # 纯高度，边框，外边距，内边距                    事件            DOM： 三种绑定方式                jQuery：                    $('.c1').click()                    $('.c1').....                                        $('.c1').bind('click',function(){                                            })                                        $('.c1').unbind('click',function(){                                            })                                        *******************                    $('.c').delegate('a', 'click', function(){                                        })                    $('.c').undelegate('a', 'click', function(){                                        })                                        $('.c1').on('click', function(){                                        })                    $('.c1').off('click', function(){                                        })                                    阻止事件发生                    return false                                    # 当页面框架加载完成以后，自动执行                $(function(){                                        $(...)                                    })                        jQuery扩展：            - $.extend        $.方法            - $.fn.extend     $(..).方法                        (function(){                var status = 1;                // 封装变量            })(jQuery)