zoukankan      html  css  js  c++  java
  • jQuery学习笔记

    jQuery
        
        http://jquery.cuishifeng.cn/
        
        模块 《=》类库
        DOM/BOM/JavaScript的类库
        
        版本:
            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(){
                        
                        $(...).XXX事件
                        
                    })
                    
            jQuery扩展:
                - $.extend        $.方法
                - $.fn.extend     $(..).方法
                例子一:
                $.extend({'wang': function () {
                    return 'sb';
                }});
                //调用方法$.wang()
                例子二:
                $.fn.extend({'wangzan': function () {
                    return 'sb';
                }})
                //调用方法$('xx').wangzan()
                注意:自己写jQuery扩展的时候,一定要用自执行函数(function(){})()包围一下.
                    将jQuery自己作为自执行函数的的参数传进去
                (function(arg){
                    var status = 1;
                    arg.extend(XXXXX)
                    
                    // 封装变量
                })(jQuery)
                
                    
        二、操作元素
        
    ===》实例:
    
    作业:
        一:
                $('i1').height()           # 获取标签的高度 纯高度
                $('i1').innerHeight()      # 获取边框 + 纯高度 + ?
                $('i1').outerHeight()      # 获取边框 + 纯高度 + ?
                $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ?
                
                # 纯高度,边框,外边距,内边距
                
        二、所有实例敲一遍
        
        三、编辑框
        
        
        
        
        
                
  • 相关阅读:
    cython教程
    CMake 教程
    Python的MySQLdb模块安装,连接,操作,增删改
    python异常处理try,except,else,finally,raise
    python中xrange和range的异同
    AttributeError: 'module' object has no attribute 'Thread'
    Java 中队列的使用
    INFORMIX 时间函数大全
    JMS的样例
    ACdream 1135(MST-最小生成树边上2个值,维护第一个最小的前提下让还有一个最小)
  • 原文地址:https://www.cnblogs.com/zhangmingda/p/13044791.html
Copyright © 2011-2022 走看看