jQuery详解

jQuery

一、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
二、使用jQuery
    一、引入jQuery文件
        <script src="jquery-1.11.3.js"></script>
        注意：引入的操做必需要放在其余jQuery操做以前
    二、使用jQuery
        ... ...
三、jQuery对象
    一、什么是jQuery对象
        jQuery对象是由jQuery对页面元素进行封装后的一种体现
        jQuery中所提供的全部操做都只针对jQuery对象，其余对象不能用(如:DOM对象)
    二、工厂函数 - $()
        想要获取jQuery对象 或 转换为jQuery对象的话，就必需要使用工厂函数
    三、DOM对象 和 jQuery对象之间的转换
        DOM对象：以DOM的方式获取出来的节点对象，都是DOM对象,DOM对象只能使用DOM中所提供的方法和属性，是不能
访问jQuery提供的属性和方法

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

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

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

JS中建立对象

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

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

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

三、使用JSON建立对象
    一、什么是JSON
        JSON：JavaScript Object Notation - JS对象表现形式
        JSON一般会做为轻量级的数据交换格式

        JSON通常表示只有属性没有方法的对象
    二、声明JSON对象
        0、JSON对象使用{}来表示
        一、使用键值对的方式来声明数据的
        二、全部的属性，必须用""引发来，若是值是字符串的话，也必须用""引发来
        三、属性 和 值 之间用 : 隔开
        四、多对属性之间，使用 , 隔开

jQuery选择器

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

jQuery 操做 DOM

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

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

jQuery 事件

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

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

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

jQuery 动画

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

JSON ：

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

声明JSON格式的对象：
    一、JSON格式的对象使用 {}
    二、使用键值对的方式来声明数据
        键 - 表示该对象的属性
        值 - 表示该对象的值
    三、属性的属性(键)，必须用""引发来，值也是字符串的话也须要使用""引发来
    四、属性 和 值之间使用 : 隔开
    五、多对属性之间，使用 , 隔开

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

Python工具 - pip

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

Python工具 - VirtualEnv

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

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

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

WEB 与 服务器

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

框架

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

设计模式 与 框架模式

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

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