jQuery详解

Posted 2021-01-19 -hjj

jQuery

1、jQuery的简介
    是一个轻量级的JS库-是一个被封装好的JS文件。提供了更为简便的页面元素操作方式。

    封装了 DOM，JS ，CSS

    核心理念：Write Less Do More
    
    官网：https://jquery.com/
    jQuery版本：
        jQuery 3.3.1
        jQuery 2.x ：不再支持IE6,7,8
        jQuery 1.11.x
2、使用jQuery
    1、引入jQuery文件
        <script src="jquery-1.11.3.js"></script>
        注意：引入的操作必须要放在其他jQuery操作之前
    2、使用jQuery
        ... ...
3、jQuery对象
    1、什么是jQuery对象
        jQuery对象是由jQuery对页面元素进行封装后的一种体现
        jQuery中所提供的所有操作都只针对jQuery对象，其他对象不能用(如:DOM对象)
    2、工厂函数 - $()
        想要获取jQuery对象 或 转换为jQuery对象的话，就必须要使用工厂函数
    3、DOM对象 和 jQuery对象之间的转换
        DOM对象：以DOM的方式获取出来的节点对象，都是DOM对象,DOM对象只能使用DOM中所提供的方法和属性，是不能
访问jQuery提供的属性和方法

        jQuery对象：由jQuery封装而得到的对象。jQuery对象只能访问jQuery提供的属性和方法，是不能访问DOM提供的属性和 
方法

        1、将DOM对象转换为jQuery对象
            语法：var $obj=$(DOM对象);
            注意：在为jQuery对象起名的时候，最好在变量名称前 + $

        2、将jQuery对象转换为DOM对象
            1、var dom对象 = jQuery对象.get(0);
            2、var dom对象 = jQuery对象[0];

JS中创建对象

1、使用Object 直接创建对象
    var newObj = new Object();
    //添加属性
    newObj.property1 = value1;
    newObj.property2 = value2;
    ... ...
    //添加方法
    newObj.method1 = function(){
        ... ...
    }

    newObj.method2 = function(arg){
        arg 就是参数
    }
2、使用构造器创建对象
    function 对象名(参数1,参数2,...){
        
        //只能使用this来访问或创建当前对象的成员
        
        //使用参数为属性赋值
        this.属性1 = 参数1;
        this.属性2 = 参数2;
        //创建方法
        this.funName = function(){
            
        }
    }

    使用对象
    var obj1 = new 对象名(参数1,参数2);

3、使用JSON创建对象
    1、什么是JSON
        JSON：javascript Object Notation - JS对象表现形式
        JSON通常会作为轻量级的数据交换格式

        JSON一般表示只有属性没有方法的对象
    2、声明JSON对象
        0、JSON对象使用{}来表示
        1、使用键值对的方式来声明数据的
        2、所有的属性，必须用""引起来，如果值是字符串的话，也必须用""引起来
        3、属性 和 值 之间用 : 隔开
        4、多对属性之间，使用 , 隔开

jQuery选择器

1、作用
    获取页面上的元素们，返回jQuery对象所组成的数组
    语法：$("选择器");
2、选择器的分类
    1、基础选择器
        1、ID选择器
            用法:$("#ID值");
            说明：返回html中指定ID值的元素
        2、类选择器
            用法;$(".className");
            说明：返回HTML中所有class为className的元素
        3、元素选择器
            用法:$("元素名称");
            说明:返回HTML中所有指定标记的元素
        4、通用选择器
            用法:$("*");
            说明:返回HTML中所有的元素
        5、群组选择器
            用法:$("selector1,selector2,... ...")
            说明:返回满足工厂函数内所有选择器的元素
    2、层级选择器
        1、$("selector1 selector2")
                后代选择器
        2、$("selector1>selector2")
                子代选择器
        3、$("selector1+selector2")
            名称：相邻兄弟选择器
            作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
        4、$("selector1~selector2")
            名称：通用兄弟选择器
            作用：匹配selector1后面且满足selector2选   择器的所有元素
    3、过滤选择器
        1、基本过滤选择器
            1、:first
                只匹配到一组元素中的第一个
            2、:last
                只匹配到一组元素中的最后一个
            3、:not(selector)
                在一组元素中，将满足selector的元素排除出去
            4、:odd
                匹配 偶数行 元素(奇数索引)
            5、:even
                匹配 奇数行 元素(偶数索引)
            6、:eq(index)
                匹配下标等于 index 的元素
                $("p:eq(0)").css();
            7、:gt(index)
                匹配下标大于 index 的元素
            8、:lt(index)
                匹配下标小于 index 的元素
        2、内容过滤选择器
            1、:contains("text")
                匹配包含指定文本的元素
                $("p:contains('佳能')")
            2、:empty
                匹配空元素(不包含任何子元素以及文本)
            3、:has(selector)
                匹配含有指定选择器的元素
            4、:parent
                匹配本身是父元素的元素
        3、可见性过滤选择器
            1、:visible
                匹配所有的可见元素
            2、:hidden
                匹配所有不可见元素
        4、状态过滤选择器
            主要用在表单控件上
            1、:enabled
                匹配所有的可用元素
            2、:disabled
                匹配所有禁用元素
            3、:checked
                匹配所有被选中的元素(radio 和 checkbox)
            4、:selected
                匹配所有被选中的元素(select)
        5、子元素过滤选择器
            1、:first-child
                匹配属于其父元素中的第一个子元素
            2、:last-child
                匹配属于其父元素中的最后一个子元素
            3、:nth-child(n)
                匹配属于其父元素中的第n个子元素
    4、属性选择器
        使用元素的属性来匹配页面的元素
        1、[attr]
            匹配具有attr属性的元素
            ex:
                1、匹配页面中所有有id属性的元素
                    $("[id]")
                2、匹配页面中所有有class属性的元素
                    $("[class]")
        2、[attr=value]
            匹配attr属性值为value的元素
            ex:匹配页面中所有的文本框
                $(":text");
                $("input[type='text']")
        3、[attr!=value]
        4、[attr^=value]
            匹配attr属性值是以value字符开始的元素们
        5、[attr$=value]
            匹配attr属性值是以value字符结尾的元素们
        6、[attr*=value]
            匹配attr属性值中包含value字符的元素们

jQuery 操作 DOM

1、基本操作
    1、html()
        等同于dom中的 innerHTML
        作用：读取或设置jQuery对象中的HTML内容
    2、text()
        等同于dom中的 innerText
        作用：读取或设置jQuery对象中的普通文本内容
    3、val()
        等同于dom中的 value
        作用：读取或设置jQuery对象的value值(表单)
    4、属性操作
        1、attr()
            作用：读取或设置jquery对象的属性值
            ex:
                $("#main").attr("id");
                $("#main").attr("class","redBack");
        2、removeAttr(attrName)
            作用：删除jQuery对象的指定属性
2、样式操作
    1、attr("class","className")
        为元素动态绑定class属性值
    2、$obj.addClass("className")

        $obj.addClass("c1").addClass('c2').addClass('c3').html("测试的文本");
    3、removeClass("className")
        删除指定的类选择器
    4、removeClass()
        删除所有的类选择器
    5、toggleClass("className")
        切换样式
         元素如果具备className选择器，则删除
         元素如果没有className选择器，则添加
    6、hasClass("className")
        判断元素是否包含className选择器
    7、css("属性","值")
        为元素动态的设置某css属性极其值
        $obj.css("background-color","red");
    8、css(JSON对象)
        $obj.css({
            "color":"red",
            "font-size":"32px",
            "text-decoration":"underline"
        });
3、遍历节点
    1、children() / children(selector)
        获取jQuery对象的所有子元素或带有指定选择器的子元素
        注意：只考虑子元素不考虑后代元素
    2、next() / next(selector)
        获取jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
    3、prev() / prev(selector)
        获取jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
    4、siblings() / siblings(selector)
        获取jQuery对象的所有兄弟 / 满足selector的所有兄弟
    5、find(selector)
        查找满足selector选择器的后代元素
    6、parent()
        查找jQuery对象的父元素
4、创建 & 插入节点
    1、创建对象
        语法：$("创建内容");
        ex:
            1、创建一个div
                var $div=$("<div></div>");
            2、创建一个button，文本为 测试按钮
                var $btn=$("<button>测试按钮</button>");
    2、插入节点
        1、内部插入
            1、$obj.append($new);
                将$new作为$obj的最后一个子元素插入进来
            2、$obj.prepend($new);
                将$new作为$obj的第一个子元素插入进来
        2、外部插入
            1、$obj.after($new)
                将$new作为$obj的下一个兄弟插入进来
            2、$obj.before($new)
                将$new作为$obj的上一个兄弟插入进来
5、删除节点
    1、remove()
        语法：$obj.remove();
        作用：删除$obj元素
    2、remove("selector")
        语法：$obj.remove("selector")
        作用：按选择器删除元素
    3、empty()
        语法：$obj.emptu()
        作用：清空$obj中所有的内容
6、替换 和 复制
    1、替换
        1、replaceWith
            语法:$old.replaceWith($new);
            使用$new元素替换$old元素
        2、replaceAll
            语法：$new.replaceAll($old);
    2、复制
        1、clone()
            $new = $old.clone();

jQuery 事件

1、页面加载后执行
    HTML页面加载流程：
        1、向服务器发送请求
        2、接收服务器的响应
        3、在内存中生成DOM树
        4、渲染 - 显示内容到网页上
        5、执行window.onload
    jQuery 处理的时候
        1、向服务器发送请求
        2、接收服务器的响应
        3、在内存中生成DOM树
        4、执行 加载后的 操作
        5、渲染 - 显示内容到网页上
    如何实现页面加载后执行：
    1、
        $(document).ready( function(){
            //页面的初始化操作
            //DOM数加载完成后就开始执行
        } );
    2、
        $().ready( function(){
            //页面的初始化操作
            //DOM数加载完成后就开始执行
        } );
    3、
        $( function(){
            //页面的初始化操作
            //DOM数加载完成后就开始执行
        } );
2、jQuery实现事件的绑定
    1、方式1
        $obj.bind("事件名称",function(){
            //事件的操作
            //允许使用this来表示当前元素
        });

        $obj.bind("事件名称",function(event){
            //事件的操作
            //允许使用this来表示当前元素
            //允许传递event对象，作为事件对象
        });
    2、方式2
        $obj.事件名称(function(){
            //事件的操作
            //允许使用this来表示当前元素
        });

        $obj.事件名称(function(event){
            //事件的操作
            //允许使用this来表示当前元素
            //允许传递event来表示事件对象
        })

jQuery 动画

1、基本显示 / 隐藏
    语法：
        显示：$obj.show(); / $obj.show(duration);
        隐藏：$obj.hide(); / $obj.hide(duration);
2、滑动式 显示/隐藏
    语法：
        显示：$obj.slideDown() / $obj.slideDown(duration);
        隐藏：$obj.slideUp() / $obj.slideUp(duration);
3、淡入淡出式 显示/隐藏
    语法：
        显示：$obj.fadeIn() / $obj.fadeIn(duration)
        隐藏：$obj.fadeOut() / $obj.fadeOut(duration)

JSON ：

JavaScript Object Notation
JSON是一种轻量级的数据交换格式

声明JSON格式的对象：
    1、JSON格式的对象使用 {}
    2、使用键值对的方式来声明数据
        键 - 表示该对象的属性
        值 - 表示该对象的值
    3、属性的属性(键)，必须用""引起来，值也是字符串的话也需要使用""引起来
    4、属性 和 值之间使用 : 隔开
    5、多对属性之间，使用 , 隔开

    var obj = {
        "name":"sanfeng.zhang",
        "age":"30",
        "gender":"男"
    };

Python工具 - pip

1、作用
    Python的软件包管理器，有一些python包被集成到了pip中。只要被集成到pip中的包，都允许通过pip直接安装
2、安装 pip
    sudo apt install python-pip (python2)
    sudo apt install python3-pip (python3)
3、使用 pip / pip3
    1、安装/更新/删除 python包
        1、安装python包
            sudo pip3 install SomePackage
            ex:
                sudo pip3 install pymysql==0.7.11
        2、下载 python 包
            sudo pip3 download SomePackage
        3、删除 python 包
            sudo pip3 uninstall SomePackage
        4、更新(升级)python包
            sudo pip3 upgrade SomePackage
    2、查看当前环境中所安装的包
        pip3 list
    3、搜索
        pip3 search SomePackage
    4、展示
        pip3 show SomePackage
    5、记录现有环境的python包
        1、pip3 freeze > requirements.txt
            将当前python环境中所安装的内容打包成一个列表
        2、pip3 install -r requirements.txt
            允许在当前系统下，逐一安装requirements.txt中所列出的内容

Python工具 - VirtualEnv

1、什么是VirtualEnv - 虚拟环境
    VirtualEnv,是Python中的虚拟环境，在做Python应用开发时，如果不想在大的Python环境中安装各种各样的包的话，则可以虚拟
出一个Python环境，可以让虚拟环境专门为某一个应用而存在。允许在虚拟环境中安装各种包且不影响大的python环境
2、安装 VirtualEnv
    sudo pip3 install virtualenv
3、创建 和 使用 虚拟环境
    1、准备工作
        mkdir my_env
        cd my_env
    2、创建虚拟环境
        virtualenv 虚拟环境名称
        ex:virtualenv default

        创建指定版本的虚拟环境
        virtualenv -p /usr/bin/python2.7 名称
        virtualenv -p /usr/bin/python3.5 名称
    3、启动虚拟环境
        注意：不能在 bin 目录中启动虚拟环境
        source bin/activate
    4、退出虚拟环境
        deactivate
    5、删除虚拟环境
        rm 虚拟环境目录 -rf

    注意：
        在虚拟环境中使用pip安装和卸载内容时，不要使用 sudo 进行授权
4、虚拟环境管理工具 - VirtualenvWrapper
    1、作用
        第三方的管理工具，能够快速，高效而且方便的管理虚拟环境
    2、安装虚拟环境管理工具
        sudo pip3 install virtualenvwrapper
    3、配置 virtualenvwrapper
        在~目录下，有一个终端管理文件 .bashrc (在~目录下，输入 ll)
        配置 .bashrc ，以便在启动终端时，就自动启动虚拟环境管理工具
        修改.bashrc : sudo vi .bashrc
        在 .bashrc 最底部增加以下内容：
        1、export WORKON_HOME=~/my_env
            将 ~/my_env 作为虚拟环境的管理目录，所有使用virtualenvwrapper创建的虚拟环境都默认保存于此
        2、如果系统中包含多个python执行环境的话，则添加以下内容
            export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
        3、source /usr/local/bin/virtualenvwrapper.sh
        4、在 ~ 目录下，执行一遍 .bashrc
            source .bashrc
    4、使用虚拟环境管理工具
        1、创建并进入虚拟环境
            1、mkvirtualenv 虚拟环境名称
                ex: mkvirtualenv default
            2、
                mkvirtualenv --python=/usr/bin/python2.7 虚拟环境名称
        2、查看当前所维护的所有虚拟环境
            workon
        3、切换虚拟环境
            workon 虚拟环境名称
        4、退出虚拟环境
            deactivate
        5、删除虚拟环境
            rmvirtualenv 虚拟环境名称
        

WEB 与 服务器

1、WEB ：表示用户可以浏览的网页(HTML,CSS,JS)
2、服务器
    1、硬件 与 软件
        硬件范畴：一台主机
        软件范畴：一个能够接受用户请求并给出响应的程序
    2、作用
        1、存储WEB上的信息(网页，图片，音视频，css)
        2、能够处理用户的请求(request)并给出响应(response)
        3、能够执行服务器端程序：如查询数据库
    3、WEB与服务器的关系
        参考图 - WEB与服务器的关系
        运行在服务器端的程序，可以由不同的语言来编写：
            Java语言 -> JSP
            C#语言 -> ASP.NET
            php语言 -> php
            Python语言 -> Django
    4、网站请求的全过程
        1、用户：输入域名，通过域名解析(DNS)器得到IP地址
        2、向服务器发送http/https请求
        3、传输层TCP协议，经过网络传输和路由解析
        4、WEB服务器接收HTTP请求
        5、服务器处理请求内容，并进行必要的数据交换
        6、将响应的内容发回给浏览器(响应)
        7、浏览器解析HTML
        8、显示解析好的内容      

框架

    1、什么是框架
        框架是一个为了解决某些开放性问题而存在的一种结构。框架提供了最基本的功能，我们只需要在这些基本功能的基础上构建
自己的操作就可以了。
    2、框架的优点
    1、快速开发 - 基本功能已经提供好了
    2、可以解决大部分问题
    3、bug少，稳定性较高
    3、框架的分类
        1、前端框架
                处理前端内容(HTML,CSS,JS)
        2、后端框架
            处理服务器程序的
            Spring - Java
        3、全栈框架
                包含WEB整体的解决方案，包含开发框架，运行环境
                Rails (Ruby)
                Django(Python)
    4、Python的WEB框架
        1、Django ：重量级的Python Web 框架
        2、Tornado ：异步框架
        3、Flask ：轻量级框架
        4、Webpy ：轻量级框架
        5、Web2py ：全栈框架，webpy的加强版

设计模式 与 框架模式

1、设计模式
    设计模式，是一套被反复使用，多数人知晓并经过分类的代码设计经验的总结，是为了解决一些通用性问题的
    目的：重用代码并保证代码的可靠性
    官方认证的设计模式有23种：单例模式，抽象工厂模式，观察者模式 -- 《大话设计模式》
2、框架模式
    代码的重用，框架模式是解决如何设计程序框架的代码，在框架模式中会包含多种的设计模式
    如：MVC，MTV，MVVM，ORM，... ...
    1、MVC
        M ：Models，模型层
            在程序中主要处理数据，负责在数据库中对数据进行存取操作(CRUD)
        V ：Views , 视图层
            应用程序中处理显示的部分内容(html,jsp)
        C ：Controllers , 控制器层
            处理用户交互的部分，通常负责从模型中取出数据，再进行业务的处理，最后将数据给视图，并将视图给客户端
    2、MTV
        M ：Models 模型层，功能同上
        T ：Templates 模板层
            用于处理用户显示的部分内容，如：html
        V ：Views 视图层
            处理用户交互部分，从模型中获取数据，再将数据给模板，再显示给用户

        M  ---  M
        V  ---  T
        C  ---  V