jQuery笔记

http://jquery.cuishifeng.cn/

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

    JQuery版本:
    1.x  1.12系列兼容性最好
    2.x
    3.x  版本最新

    转换:
        jQuery对象[0] ==> Dom对象
        Dom对象  ==> $(Dom对象)

一,查找元素

 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') 所有的a标签找到
    4.组合
        $('a, .c2,#i10') 所有的a标签 所有的class=c2的 都找到

    5.层级
        $('#i10 a') 所有的class=i10下的a标签 包括孙标签下的a标签都找到
        $('#i10>a') 只找子标签下的a标签

    6.基本筛选器
        $('#i10>a:first') 找第一个标签
        $('#i10>a:last') 找最后一个标签
        $('#i10 a:eq(0)') 索引第0个标签
    7.属性选择器
        $('[ale]')  具有ale属性的标签
        $('[ale="123"]') ale属性等于123的标签

    <input type='text'/>
    <input type='file'/>
    <input type='password'/>
        $("input [type='text']")  找到input type=text的标签
        表单选择器 $(":text") $(':disabled')

    实例:
       多选，反选，全选
        - 选择器
         $('#tb:checkbox').prop('checked');  获取值
         $('#tb:checkbox').prop('checked',false); 设置值
        - jQuery方法内置循环:$('#tb:checkbox').xxx
        -$('#tb:checkbox').each(function(k){
            //k 当前索引
           //this ,Dom,当前循环的元素   $(this)变成jQuery对象
           })
        - 三元运算 var v=条件? 真值:假值



筛选
$('li:eq(1)')
$('li').eq(1)

$('#li').next()  找出id=i1标签的下一个标签
$('#li').nextAll() 找出id=i1标签下面所有的
$('#li').nextUntil('#i11') 直到找到哪 直到找到id=i11标签为止
<div>
    <a id='i01'>asdfgrf</a>
    <a>asdfgrf</a>
    <a id='i1'>asdfgrf</a>
    <a>asdfgrf</a>
    <a id='i11'>asdfgrf</a>
    <a>asdfgrf</a>
</div>
$('#i1').prev()  找出id=i1同一级上一个标签
$('#i1').prevAll() 找出id=i1同一级以上面所有的标签
$('#i1').prevUntil('#i01') 找出id=i1上面的标签直到id=i01标签为止
$('#i1').parent() 找出id=i1标签的上一级标签
$('#i1').parents() 找出id=i1标签的上一级的所有标签
$('#i1').children() 找出id=i1所有子标签
$('#i1').siblings() 找出id=i1所有兄弟标签
$('#i1').find()  在id=i1找出匹配的

find()
last()
hasClass(class)

文本操作:
 $(..).text()  #获取文本内容
 $(..).text("aacd") #设置文本内容
 $(..).html()       #获取标签文本
 $(..).html('<a>1</a>') #设置标签文本
 $(..).val()   #获取包括标签的值
 $(..).val('.....')  #设置包括标签的值

样式操作:
addClass
removeClass
toggleClass

属性操作:
#专门用于做自定义属性
$(..).attr('n') 获取属性
$(..).attr('n','v') 添加属性
$(..).removeAttr('n') 删除属性

#prop专门用于checkbox,radio做操作
<input type='checkbox' id='i1' checked='checked'/>
$(..).prop('checked')  #获取checked值
$(..).prop('checked',true)  #选中
$(..).prop('checked',false)  #取消
s(..).index  获取索引位置

文档处理:
    append
    prepend
    after
    before

    remove
    empty
    clone


css处理
$('t1').css('样式名称','样式值')
点赞:
    $('t1').append()
    $('t1').remove()
    setInterval
    clearInterval
    透明度 1--》0
    position
    字体大小，位置

位置:
    $(window).scrollTop() 获取滚轮位置
    $(windos).scrollTop(100)  设置滚轮位置
    scrollLeft([val])

    offset()   获取指定标签在html中的坐标
    offset().left  到左边坐标大小
    offset().top   到顶部坐标大小

    position()  通过offset获取指定标签相对父标签(relative)标签的坐标
    <div style="position: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').bind('click',function(){
        })
        $('.c1').unbind('click',function(){
        })   去掉事件

        $('.c1').delegate('a','click',function(){
        })  class="c1"标签下的所有a标签 绑定事件
        $('.c1').undelegate('a','click',function(){
        })   解绑事件

        $('.c1').on('click',function(){
        })
        $('.c1').off('click',function(){
        })

        delegate 委托 点的时候绑定上 而不是先绑定 用于新增加的标签具有原先已经存在标签的功能

    阻止事件发生
        return false

    当页面自动加载完成之后，自动执行
    $(function(){
        $(...)
    })

    jQuery扩展
        $.extend      $.方法
        $.fn.extend    $(..).方法

         自己写扩展的时候 写一个自执行函数 避免全局变量冲突
        (function(){
            var status=1;
            //封装全局变量
            $.extend({})
            $.fn.extend({})
        })(jQuery)