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(){
                    
                    $(...)
                    
                })
                
        jQuery扩展:
            - $.extend        $.方法
            - $.fn.extend     $(..).方法
            
            (function(){
                var status = 1;
                // 封装变量
            })(jQuery)
            
                
    二、操作元素

python之路十七的更多相关文章

  1. python之路(十七)-javascript

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...

  2. Python之路【第十七篇】:Django【进阶篇 】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  3. Python之路【第十七篇】:Django之【进阶篇】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  4. Python之路【第十七篇】:Django【进阶篇】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  5. 孤荷凌寒自学python第七十七天开始写Python的第一个爬虫7

    孤荷凌寒自学python第七十七天开始写Python的第一个爬虫7 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 今天的学习仍然是在纯粹对docx模 ...

  6. 孤荷凌寒自学python第六十七天初步了解Python爬虫初识requests模块

    孤荷凌寒自学python第六十七天初步了解Python爬虫初识requests模块 (完整学习过程屏幕记录视频地址在文末) 从今天起开始正式学习Python的爬虫. 今天已经初步了解了两个主要的模块: ...

  7. 孤荷凌寒自学python第五十七天初次尝试使用python来连接远端MongoDb数据库

    孤荷凌寒自学python第五十七天初次尝试使用python来连接远端MongoDb数据库 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第三天.感觉这个东西学习起来还是那么困 ...

  8. 孤荷凌寒自学python第四十七天通用跨数据库同一数据库中复制数据表函数

    孤荷凌寒自学python第四十七天通用跨数据库同一数据库中复制数据表函数 (完整学习过程屏幕记录视频地址在文末) 今天继续建构自感觉用起来顺手些的自定义模块和类的代码. 今天打算完成的是通用的(至少目 ...

  9. 孤荷凌寒自学python第三十七天python的文件与内存变量之间的序列化与反序列化

    孤荷凌寒自学python第三十七天python的文件与内存变量之间的序列化与反序列化 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 一.什么是序列化与反序列化 序列化是指将内存中的数据进行指 ...

随机推荐

  1. Spring和Mybatis整合,配置文件

    整合时除了未整合前spring.mybatis的必须包外还需要加入两个包 spring-jdbc-4.2.5.RELEASE.jar mybatis-spring-1.2.5.jar spring-j ...

  2. visual studio 2013 使用域名调试本地项目

    一.在localhost添加需要指定的域名,如:test.domain.com 二.以管理员身份启动VS,并打开项目 三.修改IIS Express的配置文件(一般位于:C:\Users\当前用户\D ...

  3. day8-------socket网络编程

    简单的socket  一个server同时只能处理一个链接   代码如下: server端代码 #author = ruixin li import socket server = socket.so ...

  4. vs中使用beyondcompare比较

    开启 Visual Studio  的 [工具] /[选项] / [源代码管理] /[Visual Studio Team Foundation],并开启「配置用户工具」 如下图单击「添加」按钮 接着 ...

  5. Robot Framework 安装步骤

    1. 安装python 2.7.11, 并添加环境变量到PATH.在cmd验证python是否安装成功.   2. 解压pip-8.1.1.tar.gz,执行python setup.py insta ...

  6. DOM编程的性能问题

    用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立 ...

  7. unsilder中的jq深入学习

    //trigger $('#foo').on('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); ...

  8. js function集合

    /*跳转并是刷新界面*/ function page_back(){ history.go(-); location.reload(); } function show_div(obj){ if(ob ...

  9. c语言数据结构复习

    1)线性表 //顺序存储下线性表的操作实现 #include <stdio.h> #include <stdlib.h> typedef int ElemType; /*线性表 ...

  10. Mybatis学习总结(一)——入门基础

    一.Mybatis介绍 1.MyBatis是什么? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了go ...