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

时间:2022-06-12 07:23:18

第十七章     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对象)
    
    
    一、查找元素
        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)