• 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)


  • 相关阅读:
    优雅得使用composer来安装各种PHP小工具
    Docker学习总结之Docker与Vagrant之间的特点比较
    深入理解php 匿名函数和 Closure
    laravel 拾遗 中间件
    centos 手动编译 fcitx 各种问题大全
    Install haroopad on centos7
    centos7 編譯 chmsee
    centos 7 禁用笔记本触摸板设置
    理解 Linux 配置文件
    输入法环境变量XMODIFIERS/GTK_IM_MODULE
  • 原文地址:https://www.cnblogs.com/leiwenbin627/p/10924127.html
Copyright © 2020-2023  润新知