Python全栈之jQuery笔记

时间 2019-11-17
原文原文链接
jQuery runnoob网址:
http://www.runoob.com/jquery/jquery-tutorial.html
jQuery API手册: http://www.runoob.com/manual/jquery/

jQuery笔记
笔记来源于:
    传智播客的黑马程序员视频笔记.
    菜鸟教程:http://www.runoob.com/
    本身的查询与整理.

JS的不完美地方:
    1. 代码比较麻烦,给多个元素添加事件须要遍历,可能还须要进行嵌套.
    2. 找对象麻烦,方法少,还比较长.
    3. 会有兼容性的问题.
    4. 若是想要实现简单的动画效果,须要用 animate, 也存在兼容性问题.
    5.js注册事件存在覆盖状况,须要使用addEventListener,比较麻烦.

jQuery的优势:
    1. 隐式遍历,不须要使用for循环;
    2. 找对象比较容易,很是灵活;
    3. 处理兼容性问题比较好;
    4. 实现动画效果很是简单,并且功能强大.
    5. 代码简单,粗暴.

jQuery版本:
    1.x版本: 可以兼容IE678浏览器
    2.x版本: 不兼容IE678浏览器
    1.x和2.x版本的jQuery都再也不更新版本了,如今只更新3.x版本
    3.x版本: 不兼容IE678,更加的精简(在国内不流行, 由于国内使用jQuery的主要目的就是兼容IE678)

jQuery的入口函数:
    方式一:
        $(document).ready(function () { 代码块 });
    方式二:
        $(function () { 代码块 });

JS的入口函数:
    window.onload = function () { 代码块 };

两种入口函数的区别:
    1.jQuery的入口函数要比JS的入口函数先执行;
    2.jQuery的入口函数会等待页面加载完成才执行,但不会等待图片的加载;
    3.JS的入口函数会等待页面和图片都加载完成才执行.

DOM对象:
    使用JS的方式获取的元素就是JS对象(DOM对象).

jQuery对象:
    使用jQuery的方式获取的元素就是jQuery对象.

DOM对象与jQuery对象是两类不一样的对象,因此:
    DOM对象不能调用jQuery的方法;
    jQuery对象也不能调用DOM对象的方法;
    可是DOM对象和jQuery对象之间能够相互转换.

DOM对象转换为jQuery对象:
    $(DOM对象)
jQuery对象转换成DOM对象:
    将jQuery中封闭的DOM对象取出来便可.

jQuery中的 $ 实际上就是一个函数.

=================================================================
jQuery中的选择器:
jQuery的选择器基本兼容了CSS1到CSS3全部的选择器,而且还添加了不少复杂的选择器.
用jQuery选择器选择一个对象,会有多种不一样的方法可供选择.

1.基本选择器(跟CSS选择器用法如出一辙):
名称          用法(示例)              描述
ID选择器       $("#id名")           获取指定的ID元素
类选择器       $(".class名")        获取同一类class元素
标签选择器     $("标签名")           获取同一类标签的全部元素
并集选择器     $("div,p,li")        使用逗号分隔,只要符合条件之一就会被选择
交集选择器     $("div.redClass")    获取class为redClass的div元素
其余选择器示例:
              $(document)          选择整个文档对象
              $("input[name=first]")选择name属性等于first的input元素(标签) 注意:这么写也行:$("input[name='first']")
              $("[name]")          选择全部包含name属性的标签
              $("[name=first]")    选择全部属性name等于first的标签 注意:这么写也行:$("[name='first']")
              $("a[target!='_blank']")  选取全部 target 属性值不等于 "_blank" 的 <a> 元素
              $(":button")         选取全部 type="button" 的 <input> 元素 和 <button> 元素


2.层级选择器(跟CSS选择器用法如出一辙):
名称          用法(示例)              描述
子代选择器      $("ul>li")           使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素
后代选择器      $("ul li")           使用空格,表明后代选择器,获取ul下的全部的li元素,包括孙子辈

3.过滤选择器(这种选择器都带冒号):
名称          用法                                  描述
:eq(index)  $("li:eq(2)");                      获取li元素中索引号为2的元素(索引从0开始)
:odd        $("li:odd");                        获取li元素中下标是奇数的元素(下标从0开始)
:even       $("li:even");                       获取li元素中下标是偶数的元素(下标从0开始)
:gt         $('#ul1 li:gt(2)')                  选择id为ul1元素下的前三个以后的li
:lt         $('#ul1 li:lt(2)')                  选择id为ul1元素下的前三个li
:input      $("#myForm :input")                 选择表单中的input元素
:visible    $("div:visible")                    选择可见的div元素

4.表单对象属性选择器
:enabled    匹配全部不可用的元素
:disabled
:checked
:selected

5.筛选选择器(方法):
筛选选择器的功能与过滤选择器有点相似,可是用法不同,筛选选择器主要是方法.
名称                      用法                    描述
children(selector)  $("ul").children("li")      至关于$("ul>li"),子代选择器
find(selector)      $("ul").find(".myClass");   选择div内的class等于myClass的元素
siblings(selector)  $("#first").siblings("li"); 查找兄弟节点,不包括本身自己
parent()            $("#first").parent();       查找父亲元素
eq(index)           $("li").eq(2);              至关于$("li:eq(2)"),index从0开始
next()              $("li").next();             找下一下兄弟
prev()              $("li").prev();             找上一个兄弟
prev("p")           $("div").prev("p");         选择div元素前面的第一个p元素
next("p")           $("div").next("p");         选择div元素后面的第一个p元素
closest("from")     $("div").closest("form");   选择离div最近的那个form父元素

=================================================================
jQuery之遍历
jQuery提供了多种遍历DOM的方法.遍历方法中最大的种类是树遍历(tree-traversal).
1.jQuery遍历-祖先:
    parent()        返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历.
    parents()
        返回被选元素的全部祖先元素，它一路向上直到文档的根元素 (<html>).
        您也可使用可选参数来过滤对祖先元素的搜索,示例:$("span").parents("ul");  返回全部<span>元素的全部祖先,而且它是<ul>元素.
    parentsUntil()
        parentsUntil() 方法返回介于两个给定元素之间的全部祖先元素.
        $("span").parentsUntil("div");  返回介于 <span> 与 <div> 元素之间的全部祖先元素(不包含div元素).

2.jQuery遍历-后代
后代是子、孙、曾孙等等.经过jQuery,您可以向下遍历DOM树,以查找元素的后代.
下面是两个用于向下遍历DOM树的jQuery方法:
    children()  返回被选元素的全部直接子元素.该方法只会向下一级对DOM树进行遍历.
        $("div").children();  返回每一个<div>元素的全部直接子元素
        您也可使用可选参数来过滤对子元素的搜索:
        $("div").children("p.1");  返回类名为"1"的全部<p>元素,而且它们是<div>的直接子元素.
    find()  返回被选元素的后代元素,一路向下直到最后一个后代.
        $("div").find("span");  返回属于 <div> 后代的全部 <span> 元素.
        $("div").find("*");     返回 <div> 的全部后代

3.jQuery遍历-同胞(siblings)
同胞拥有相同的父元素.经过jQuery,您可以在DOM树中遍历元素的同胞元素.
在DOM树中水平遍历:
    siblings()  返回被选元素的全部同胞元素.
        $("h2").siblings();     返回<h2>的全部同胞元素.注意:不包括<h2>元素.
        $("h2").siblings("p");  返回属于<h2>的同胞元素的全部<p>元素.
    next()  返回被选元素的下一个同胞元素.该方法只返回一个元素.
        $("h2").next();         返回<h2>的下一个同胞元素.
    nextAll()  返回被选元素的全部跟随的同胞元素
        $("h2").nextAll();      返回<h2>的全部跟随的同胞元素.
    nextUntil()  返回介于两个给定参数之间的全部跟随的同胞元素.
        $("h2").nextUntil("h6") 返回介于<h2>与<h6>元素之间的全部同胞元素.注意:不包括<h6>元素.
    prev(), prevAll(), prevUntil()
        prev(),prevAll()以及 prevUntil()方法的工做方式与上面的方法相似,只不过方向相反而已:
        它们返回的是前面的同胞元素(在DOM树中沿着同胞以前元素遍历,而不是以后元素遍历).

4.jQuery遍历-过滤
缩小搜索元素的范围:
三个最基本的过滤方法是:first(),last()和eq().它们容许您基于其在一组元素中的位置来选择一个特定的元素.
其余过滤方法,好比filter()和not()容许您选取匹配或不匹配某项指定标准的元素.
    first()  返回被选元素的首个元素.
        $("div p").first();     选取首个 <div> 元素内部的第一个 <p> 元素.
    last()  返回被选元素的最后一个元素.
        $("div p").last();      选择最后一个<div>元素中的最后一个<p>元素.
    eq(index)  返回被选元素中带有指定索引号的元素.索引号从0开始,所以首个元素的索引号是0而不是1.
        $("p").eq(1);           选取第二个<p>元素(索引号 1).
    filter()  容许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回.
        $("p").filter(".url");  返回带有类名"url"的全部<p>元素.
    not()  返回不匹配标准的全部元素.提示:not()方法与filter()相反.
        $("p").not(".url");     返回不带有类名"url"的全部<p>元素.

=================================================================
jQuery操做属性
1.attr操做(设置单个属性):
    第一个参数:须要设置的属性名
    第二个参数:对应的属性值
attr(name, value);
示例:
    $("img").attr("title", "新名字");
    $("img").attr("alt", "新说明");
用attr设置多个属性:
    参数是一个对象,包含全部须要设置的属性名与属性值
    $("img").attr({
        title: "新名字",
        alt: "新说明",
        style: "opacity: .5", # 设置透明度
    });
获取属性:
    传入须要获取的属性名,返回对应的属性值
    var 变量 = $(selector).attr("属性名");
jQuery方法attr(),也提供回调函数.回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值.而后以函数新值返回您但愿使用的字符串.示例以下:
    $("button").click(function(){
      $("#runoob").attr("href", function(i,origValue){
        return origValue + "/jquery";
      });
    });
删除属性:removeAttr()

注意:
    对于布尔类型(selected, checked, disabled等)的属性,不要用attr方法,使用prop方法;
    prop()函数的执行结果:
      1.若是有相应的属性,返回指定属性值.
      2.若是没有相应的属性,返回值是空字符串.
    attr()函数的执行结果:
      1.若是有相应的属性,返回指定属性值.
      2.若是没有相应的属性,返回值是undefined.
    对于HTML元素自己就带有的固有属性,在处理时,使用prop方法.
    对于HTML元素咱们本身自定义的DOM属性,在处理时,使用attr方法.
    具备 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

注意:
1.1类比attr操做的css操做:
    jQuery经过CSS方法同时设置多种样式:
    $("li").css("backgroudColor", "pink").css("color", "red").css("fontSize", "14px");
jQuery设置CSS样式的推荐方法:
    $("li").css({
        backgroundColor: "pink",
        color: "red",
        fontSize: "14px",
        border: "1px solid black",
        ...
    });
1.2 jQuery获取CSS样式的值:
    var 变量 = $(selector).css("样式的key,好比background或color等");
    特别注意:
        选择器获取的多个元素,获取信息获取的是第一个,好比：$("div").css("width").获取的是第一个div的width.
        缘由:jQuery的隐式迭代致使
        关于jQuery的隐匿迭代:
            jQuery进行设置操做时,会给符合条件的全部jQuery对象设置上相应的值;
            jQuery在进行值获取时,只会返回第一个元素对应的值.

1.3 操做样式类名(jQuery获取并设置 CSS 类):
    $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
    $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
    $("#div1").removeClass("divClass divClass2") //移除多个样式
    $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

2.prop操做:
    在jQuery1.6以后,对于checked, selected, disabled等这类boolean类型的属性来讲,不能用attr方法,只能用prop方法.
设置属性:
    $(selector).prop("checked", true);
获取属性:
    $(selector).prop("checked"); # 返回true或false

3.jQuery动画
jQuery提供了三组基本动画,这些动画都是标准的,有规律的的效果,jQuery还提供了自定义动画的功能.
3.1三组基本动画:
    显示(show)与隐藏(hide)是一组动画,注意:show与hide动画效果若是不传speed参数是没有动画效果的;
        语法:
            $(selector).hide(speed,callback);
            $(selector).show(speed,callback);
    滑入(slideUp)与滑出(slideDown)以及切换(slideToggle),注意:slide相关动画不传speed参数也有动画效果;
        语法:
            $(selector).slideUp(speed,callback);
            $(selector).slideDown(speed,callback);
            $(selector).slideToggle(speed,callback);
    淡入(fadeIn)与淡出(fadeOut)以及切换(fadeToggle),(fadeTo).
        语法:
            $(selector).fadeOut(speed, easing, callback);
            $(selector).fadeIn(speed, easing, callback);
            $(selector).fadeToggle(speed, easing, callback);
            $(selector).fadeTo(speed, opacity, easing, callback);  opacity为0-1之间,表明透明度.
show([speed], [callback]);
    speed:可选参数,表示动画执行的时间,单位毫秒
          1.若是不传,就没有动画效果,若是是slide和fade系列,会默认为normal;
          2.推荐设置speed为1000毫秒;
          3.固定字符串(即:show(slow)), slow(200), normal(400), fast(600).若是传其余字符串,则默认为normal.
    callback:可选参数,执行完动画后执行回调函数.

3.2自定义动画:
animate: 自定义动画:
$(selector).animate({params}, [speed], [easing], [callback]);
参数:
    {params}: 要执行动画的css属性,带数字(必选);
    speed: 执行动画的时长(可选);
    easing: 执行动画的效果,默认为swing(缓动), 能够是linear(匀速);
    callback: 动画执行完后当即执行的回调函数(可选).
注意:
    默认状况下，全部的 HTML 元素有一个静态的位置，且是不可移动的。
    若是须要改变，咱们须要将元素的 position 属性设置为 relative, fixed, 或 absolute!

3.3动画队列与中止动画:
    在同一个元素上执行多个动画,那么对于这个动画来讲,后面的动画会被放到动画队列中,等前面的动画
    执行完成才会执行.
stop(clearQueue, jumpToEnd);
参数:
    clearQueue:是否清除队列;
    jumpToEnd:是否跳转到最终效果.
示例:$(selector).stop();  --> 等现于$(selector).stop(false, false);

一般animate方法与stop方法会一同使用,语法以下:$(selector).stop().animate({params: values}, speed, easing, callback);

=================================================================
jQuery节点操做:
1.建立节点:
    $(htmlStr)
    htmlStr: html格式的字符串
    $("<span>这是一个span元素</span>");

2.添加节点
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素以后插入内容
before() - 在被选元素以前插入内容
    注意:append/prepend 是在选择元素内部嵌入;after/before 是在元素外面追加.
appendTo
prependTo

3.清空节点与删除节点:
empty: 清空指定节点的全部元素,自身保留(清理门户)
    $("div").empty();   清空div的全部内容(推荐使用,会清除子元素上绑定的内容,源码)
    $("div").html("");  使用html方法来清空元素,不推荐使用,会形成内存泄漏,绑定的事件不会清除.
remove: 相比于empty,自身也删除
注意:jQuery remove() 方法也可接受一个参数,容许您对被删元素进行过滤:
    $("p").remove(".italic");   删除全部具备属性class='italic'的元素.

4.克隆节点:
做用:复制匹配的元素
复制$(selector)所匹配到的元素(深度复制)
    cloneNode(true)
返回值为复制的新元素,和原来的元素没有任何关系.即修改新元素,不会影响到原来的元素
    $(selector).clone();

jQuery特殊属性操做
1.1 val方法
    val方法用于设置和获取"表单元素"的值,例如input,textarea的值(只针对表单元素)
    设置值:$(selector).val("要设置的值");
    获取值:var 变量 = $(selector).val();
1.2 html方法与text方法
    html方法至关于innerHTML, text方法至关于innerText
    html方法的使用:
        设置内容:$(selector).html("<span>要设置的内容</span>");
        获取内容:var 变量 = $(selector).html();
    text方法的使用:
        设置内容:$(selector).text("<span>这是要设置的内容</span>");
        获取内容:var 变量 = $(selector).text();
    区别:html方法会识别html标签, text方法会把内容直接当成字符串,并不会识别字符串内的html标签.
补充说明:
text()、html()以及val()的回调函数:
上面的三个jQuery方法:text()、html()以及val(),一样拥有回调函数.回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值.
而后以函数新值返回您但愿使用的字符串.示例以下:
    $("#btn1").click(function(){
        $("#test1").text(function(i,origText){
            return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
        });
    });
    $("#btn2").click(function(){
        $("#test2").html(function(i,origText){
            return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
        });
    });

1.3 width方法与height方法
    设置或者获取高度
    带参数表示设置高度:$(selector).height(200);
    不带参数表示获取高度:$(selector).height();
        innerWidth()方法,innerWidth()获取的是width+padding的值
        outerWidth()方法,outerWidth(flase)获取的是width+padding+border的值
                         outerWidth(true)获取的是width+padding+border+margin的值
    其余:
        $(window).height();获取可视区高度
        $(document).height();获取页面高度
1.4 scrollTop与scrollLeft:
    设置或者获取垂直滚动条的位置
    获取页面被卷曲的高度: $(window).scrollTop();
    获取页面被卷曲的宽度: $(window).scrollLeft();
1.5 offset方法与position方法:
    offset方法获取元素距离document的位置,position方法获取的是元素距离有定位的父元素的位置.
    获取元素距离document的位置,返回值为对象{left: 100, top: 100}
        $(selector).offset();
    获取相对于其最近的有定位的父元素的位置:$(selector).position();

2 jQuery事件机制
jQuery事件:
事件函数列表：
    blur() 元素失去焦点
    focus() 元素得到焦点
    change() 表单元素的值发生变化
    click() 鼠标单击
    dblclick() 鼠标双击
        当单击元素时,发生click事件.
        click()方法触发click事件,或规定当发生click事件时运行的函数.
        触发被选元素的click事件: $(selector).click()
        添加函数到click事件:$(selector).click(function)

    mouseover() 鼠标进入（进入子元素也触发）
    mouseout() 鼠标离开（离开子元素也触发）
    mouseenter() 鼠标进入（进入子元素不触发）
    mouseleave() 鼠标离开（离开子元素不触发）
    hover() 同时为mouseenter和mouseleave事件指定处理函数
    mouseup() 松开鼠标
    mousedown() 按下鼠标
    mousemove() 鼠标在元素内部移动
    keydown() 按下键盘
    keypress() 按下键盘
    keyup() 松开键盘
    load() 元素加载完毕
    ready() DOM加载完成
    resize() 浏览器窗口的大小发生改变
    scroll() 滚动条的位置发生变化
    select() 用户选中文本框中的内容
    submit() 用户递交表单
    toggle() 根据鼠标点击的次数，依次运行多个函数
    unload() 用户离开页面
注意事项:
关于mouseover/mouseout事件与mouseenter/mouseleave事件的区别:
    mouseover/mouseout会在鼠标通过本身和本身的子元素时都会触发事件;
    mouseenter/mouseleave只会在鼠标通过本身时触发事件.

主动触发事件:
可以使用jquery对象上的trigger方法来触发对象上绑定的事件.
示例:
    给element绑定hello事件
    element.bind("hello",function(){
        alert("hello world!");
    });
    触发hello事件
    element.trigger("hello");

事件冒泡:
    在一个对象上触发某类事件(好比单击onclick事件),若是此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,
    若是没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象全部同类事件都将被激活),
    或者它到达了对象层次的最顶层,即document对象(有些浏览器是window).
事件冒泡的做用:
    事件冒泡容许多个操做被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可让你在对象层的不一样级别捕获事件.
阻止事件冒泡:
    事件冒泡机制有时候是不须要的,须要阻止掉,经过 event.stopPropagation()来阻止.
示例(若是每一个元素的父元素都定义了事件,则会从下到上依次触发):
$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......
<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默认行为:
阻止右键菜单:写入下列代码可阻止页面的右键菜单行为.
$(document).contextmenu(function(event) {
    event.preventDefault();
});

    js中已经学习过了事件,可是jQuery对JS事件进行了封装,增长并扩展了事件处理机制,
    jQuery不只提供了更加优雅的事件处理语法 ,并且极大的加强了事件处理的能力.
2.1 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定
    bind注册多个事件示例:
    $(selector).bind({
        mouseenter: function(){
            alert("mouseenter方法");
        },
        click: function() {
            alert("click方法");
        },
        ...
    });
    bind为多种事件绑定同一函数示例:
    $(selector).bind("mouseenter click", function(){函数体});
    delegate事件绑定:
    示例:
        $(selector).delegate("p", "click", function(){函数体});
        参数:
        第一个参数:事件最终由谁来执行(示例为事件最终由p标签来执行);
        第二个参数:事件的类型(示例为click事件);
        第三个参数:函数,须要作的事件
        delegate事件绑定的优势: 动态建立的元素也能绑定事件;
        注意: 委托事件只能给父元素以及祖先元素注册,不能给子元素注册,其实现原理为冒泡原理.
2.2 on注册事件(重点)
    jQuery1.7以后,jQuery用on统一了全部事件的处理方法.
    最现代的方式,兼容zepto(移动端相似jQuery的一个库),强烈建议使用.
on注册简单事件:
$(selector).on("click", function(){});表示给$(selector)绑定事件,而且由本身触发,不支持动态绑定事件.
on注册委托事件:
$(selector).on("click", "span", function(){});
    表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定.
on注册事件的语法:
第一个参数:events,绑定事件的名称能够是由空格分隔的多个事件(标准事件或自定义事件)
第二个参数:selector,执行事件的后代元素(可选),若是没有后代元素,那么事件将由本身执行.
第三个参数:data:传递给处理函数的数据,事件触发的时候经过event.data来使用(不常使用)
第四个参数:handler,事件处理函数
$(selector).on(event[, selector][, data], handler);
2.3事件解绑
unbind方式(不用)
    $(selector).unbind();解绑全部的事件
    $(selector).unbind("click");解绑指定的事件
undelegate方式(不用)
    $(selector).undelegate();解绑全部的delegate事件
    $(selector).undelegate("click");解绑全部的click事件
off方式(推荐):
    $(selector).off();解绑selector选中元素的全部事件
    $(selector).off("click");解绑selector选中元素的click事件
2.4 触发事件
    $(selector).click();触发click事件;
    $(selector).trigger("click");
2.5 jQuery事件对象
    jQuery事件对象其实就是对JS事件对象的一个封装,处理了兼容性的问题
    screenX和screenY:对应屏幕最左上角的值
    clientX和clientY:距离页面左上角的位置(忽视滚动条)
    pageX和pageY:距离页面最顶部的左上角的位置(会计算滚动条的距离)

    event,keyCode:按下的键盘代码
    event.data:存储绑定事件时传递的附加值

    event.stopPropagation():阻止事件的冒泡行为(propagation英文:宣传; 传播,传输,蔓延,扩展,波及深度; 〔生〕繁殖法,〔地〕传导; 培养)
    event.preventDefault():阻止浏览器默认的行为
    return false:既能阻止事件冒泡,又能阻止浏览器的默认行为.

3. jQuery补充知识点
3.1 链式编程
        jQuery链式调用:
        jQuery对象的方法会在执行完后返回这个jQuery对象，全部jQuery对象的方法能够连起来写.下列的方法都返回jQuery对象,可链式调用:
            $('#div1') // id为div1的元素
            .children('ul') //该元素下面的ul子元素
            .slideDown('fast') //高度从零变到实际高度来显示ul元素
            .parent()  //跳到ul的父元素，也就是id为div1的元素
            .siblings()  //跳到div1元素平级的全部兄弟元素
            .children('ul') //这些兄弟元素中的ul子元素
            .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素
        示例:$("#p1").css("color","red").slideUp(2000).slideDown(2000);
    一般状况下,只有设置操做才能把链式编程延续下去.
    由于获取操做的时候,会返回获取的相应的值,没法返回jQuery对象.
    end();  筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,而且返回匹配元素以前的状态.
3.2 each方法
    jQuery的隐匿迭代会对全部的DOM对象设置相同的值,可是若是咱们须要给每个对象设置不一样的值的时候,就须要隐匿迭代了.
    each做用:遍历jQuery对象集合,为每一个匹配的元素执行一个函数
    $(selector).each(function(index, element){});
        第一个参数表示当前元素全部匹配元素中的索引号
        第二个参数表示当前元素(DOM对象)

=================================================================
jQuery-AJAX
1.jQuery load()方法:
    load() 方法从服务器加载数据,并把返回的数据放入被选元素中.
    语法: $(selector).load(URL,data,callback);
         必需的URL参数规定您但愿加载的URL
         可选的data参数规定与请求一同发送的查询字符串键/值对集合.
         可选的callback参数是load()方法完成后所执行的函数名称.回调函数能够设置不一样的参数:
            responseTxt - 包含调用成功时的结果内容
            statusTXT - 包含调用的状态
            xhr - 包含 XMLHttpRequest 对象

         示例:
         $("#div1").load("demo_test.txt");      把文件"demo_test.txt"的内容加载到指定的<div>元素中.
         $("#div1").load("demo_test.txt #p1");  把"demo_test.txt"文件中id="p1"的元素的内容,加载到指定的<div>元素中.
         报错示例:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

2.jQuery-AJAX get()和post()方法:
    jQuery get()和post()方法用于经过HTTP GET或POST请求从服务器请求数据.
    $.get()
        该方法经过 HTTP GET 请求从服务器上请求数据.
        语法: $.get(URL,callback);
            必需的 URL 参数规定您但愿请求的 URL.
            可选的 callback 参数是请求成功后所执行的函数名.第一个回调参数 data 存有被请求页面的内容,第二个回调参数 status 存有请求的状态.
        示例:
            $.get("/try/ajax/demo_test.php",function(data,status){ 函数体 });
    $.post()
        该方法经过 HTTP POST 请求向服务器提交数据.
        语法: $.post(URL,data,callback);
            必需的 URL 参数规定您但愿请求的 URL.
            可选的 data 参数规定连同请求发送的数据.
            可选的 callback 参数是请求成功后所执行的函数名.第一个回调参数 data 存有被请求页面的内容,而第二个回调参数 status 存有请求的状态.
        示例:
            $("button").click(function(){
                $.post("/try/ajax/demo_test_post.php",
                {
                    name:"菜鸟教程",
                    url:"http://www.runoob.com"
                },
                    function(data,status){
                    alert("数据: \n" + data + "\n状态: " + status);
                });
            });

3.jQuery-Ajax
    $.ajax使用方法:
    经常使用参数:
        一、url 请求地址
        二、type 请求方式,默认是'GET',经常使用的还有'POST'
        三、dataType 设置返回的数据格式,经常使用的是'json'格式,也能够设置为'html'
        四、data 设置发送给服务器的数据
        五、success 设置请求成功后的回调函数
        六、error 设置请求失败后的回调函数
        七、async 设置是否异步,默认值是'true',表示异步
    之前的写法:
        $.ajax({
            url: 'js/user.json',
            type: 'GET',
            dataType: 'json',
            data:{'aa':1}
            success:function(data){
                ......
            },
            error:function(){
                alert('服务器超时，请重试！');
            }
        });
    新的写法(推荐):
        $.ajax({
            url: 'js/user.json',
            type: 'GET',
            dataType: 'json',
            data:{'aa':1}
        })
        .done(function(data) {
            ......
        })
        .fail(function() {
            alert('服务器超时，请重试！');
        });

=================================================================
jQuery-noConflict()方法
jQuery noConflict()  该方法会释放对 $ 标识符的控制,这样其余脚本就可使用它了.虽然释放了 $ ,但依然能够用jQuery来代替 $ 执行jQuery全部的功能.
示例:
    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍然在工做!");
      });
    });
您也能够建立本身的简写,noConflict()会返回对 jQuery 的引用,您能够把它存入变量,以供稍后使用,示例以下:
    var jq = $.noConflict();
    jq(document).ready(function(){
      jq("button").click(function(){
        jq("p").text("jQuery 仍然在工做!");
      });
    });
若是你的jQuery代码块使用$简写,而且您不肯意改变这个快捷方式,那么您能够把$符号做为变量传递给ready方法.这样就能够在函数内使用$符号了 
    - 而在函数外,您依旧不得不使用 "jQuery" 示例以下:
    $.noConflict();
    jQuery(document).ready(function($){
      $("button").click(function(){
        $("p").text("jQuery 仍然在工做!");
      });
    });

=================================================================
jQuery扩展:
1 jQuery插件简介(不做展开):
1.1 jQuery经常使用插件:
    插件: jQuery不可能包含全部的功能,咱们能够经过插件来扩展jQuery的功能
    jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能.
1.1.1jQuery.color.js
    animate不支持颜色的渐变,但使用jQuery.color.js后就能够支持.
    使用该插件的步骤:
    1.引入jQuery文件
    2.引入插件(若是有用到css的)
    3.使用插件
1.1.2jQuery.lazyload.js
    懒加载插件
1.1.3jQuery.ui.js插件
    jQueryUI专指由jQuery官方维护的UI方向的插件
    官方API: http://api.jqueryui.com/category/all/
    其余教程:jQueryUI教程
    基本使用:
    1.引入jQueryUI的样式文件
    2.引入jQuery
    3.引入jQueryUI的JS文件
    4.使用jQueryUI功能
    使用jQuery.ui.js实现新闻模块的案例.

1.2制做 jQuery插件
    原理: jQuery插件其实就是给jQuery对象增长一个新的方法,让jQuery对象拥有某一个功能.
    经过给$.fn添加方法就可以扩展jQuery对象
    $.fn.pluginName = function(){};

=================================================================
2 移动端库和框架(不做展开):
2.1 移动端js事件
    移动端的操做方式和PC端是不一样的,移动端主要用手指操做,因此有特殊的touch事件,touch事件包括以下几个事件:
        一、touchstart: 手指放到屏幕上时触发
        二、touchmove: 手指在屏幕上滑动式触发
        三、touchend: 手指离开屏幕时触发
        四、touchcancel: 系统取消touch事件的时候触发,比较少用.
移动端通常有三种操做:点击、滑动、拖动.这三种操做通常是组合使用上面的几个事件来完成的,全部上面的4个事件通常不多单独使用,
通常是封装使用来实现这三种操做,可使用封装成熟的js库.


2.2 zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,它与jquery有着相似的api.若是你会用jquery,那么你也会用zepto.
Zepto的一些可选功能是专门针对移动端浏览器的,它的最初目标是在移动端提供一个精简的相似jquery的js库.
zepto官网: http://zeptojs.com/
zepto中文api: http://www.css88.com/doc/zeptojs_api/
zepto包含不少模块,默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块.若是还须要其余的模块,能够自定义构建.
zepto自定义构建地址: http://github.e-sites.nl/zeptobuilder/

touch模块封装了针对移动端经常使用的事件,可以使用此模块进行移动端特定效果开发,这些事件有:
    1.tap 元素tap的时候触发,此事件相似click,可是比click快.
    2.longTap 当一个元素被按住超过750ms触发.
    3.swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过期触发.(可选择给定的方向)

2.3 swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,通常用来触屏焦点图、触屏整屏滚动等效果.
swiper分为2.x版本和3.x版本,2.x版本支持低版本浏览器(IE7),3.x放弃支持低版本浏览器,适合应用在移动端.
    2.x版本中文网址:http://2.swiper.com.cn/
    3.x版本中文网地址:http://www.swiper.com.cn/

swiper使用方法:
<script type="text/javascript" src="js/swiper.min.js"></script>
......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    initialSlide :1,
    paginationClickable: true,
    loop: true,
    autoplay:3000,
    autoplayDisableOnInteraction:false
});
</script>

swiper使用参数:
    一、initialSlide:初始索引值,从0开始
    二、direction:滑动方向 horizontal | vertical
    三、speed:滑动速度,单位ms
    四、autoplay:设置自动播放及播放时间
    五、autoplayDisableOnInteraction:用户操做swipe后是否还自动播放,默认是true,再也不自动播放
    六、pagination:分页圆点
    七、paginationClickable:分页圆点是否点击
    八、prevButton:上一页箭头
    九、nextButton:下一页箭头
    十、loop:是否首尾衔接
    十一、onSlideChangeEnd:回调函数，滑动结束时执行


2.4 bootstrap
bootstrap是简单、直观、强悍的前端开发框架,让web开发更迅速、简单.来自Twitter,是目前很受欢迎的前端框架之一.
Bootrstrap是基于HTML、CSS、JavaScript的,让书写代码更容易.移动优先,响应式布局开发.
bootstrap中文网址: http://www.bootcss.com/

bootstrap容器
    container-fluid 流体
    container
        1170
        970
        750
        100%

bootstrap栅格系统
bootstrap将页面横向分为12等分,按照12等分定义了适应不一样宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:
    一、col-lg-
    二、col-md-
    三、col-sm-
    四、col-xs-

bootstrap响应式查询区间:
    一、大于等于768
    二、大于等于992
    三、大于等于1200

bootstrap表单:
    一、form 声明一个表单域
    二、form-inline 内联表单域
    三、form-horizontal 水平排列表单域
    四、form-group 表单组、包括表单文字和表单控件
    五、form-control 文本输入框、下拉列表控件样式
    六、checkbox checkbox-inline 多选框样式
    七、radio radio-inline 单选框样式
    八、input-group 表单控件组
    九、input-group-addon 表单控件组物件样式 十、input-group-btn 表单控件组物件为按钮的样式
    十、form-group-lg 大尺寸表单
    十一、form-group-sm 小尺寸表单

bootstrap按钮:
    一、btn 声明按钮
    二、btn-default 默认按钮样式
    三、btn-primay
    四、btn-success
    五、btn-info
    六、btn-warning
    七、btn-danger
    八、btn-link
    九、btn-lg
    十、btn-md
    十一、btn-xs
    十二、btn-block 宽度是父级宽100%的按钮
    1三、active
    1四、disabled
    1五、btn-group 定义按钮组

bootstrap图片:
    img-responsive 声明响应式图片

bootstrap隐藏类:
    一、hidden-xs
    二、hidden-sm
    三、hidden-md
    四、hidden-lg

bootstrap字体图标:
    经过字体代替图标,font文件夹须要和css文件夹在同一目录

bootstrap下拉菜单:
    一、dropdown-toggle
    二、dropdown-menu

bootstrap选项卡:
    一、nav
    二、nav-tabs
    三、nav-pills
    四、tab-content

bootstrap导航条:
    一、navbar 声明导航条
    二、navbar-default 声明默认的导航条样式
    三、navbar-inverse 声明反白的导航条样式
    四、navbar-static-top 去掉导航条的圆角
    五、navbar-fixed-top 固定到顶部的导航条
    六、navbar-fixed-bottom 固定到底部的导航条
    七、navbar-header 申明logo的容器
    八、navbar-brand 针对logo等固定内容的样式
    十一、nav navbar-nav 定义导航条中的菜单
    十二、navbar-form 定义导航条中的表单
    1三、navbar-btn 定义导航条中的按钮
    1四、navbar-text 定义导航条中的文本
    九、navbar-left 菜单靠左
    十、navbar-right 菜单靠右

bootstrap模态框:
    一、modal 声明一个模态框
    二、modal-dialog 定义模态框尺寸
    三、modal-lg 定义大尺寸模态框
    四、modal-sm 定义小尺寸模态框
    五、modal-header
    六、modal-body
    七、modal-footer

=================================================================
3 前端自动化及优化(不做展开):
3.1 less、sass、stylus
它们是三种相似的样式动态语言,属于css预处理语言,它们有相似css的语法,为css赋予了动态语言的特性、如变量、继承、运算、函数等.
这么作是为了css的编写和维护.
它们使用的文件分别是: .less、.scss、*.styl,这些文件是不能再网页上直接使用的,最终要编译成css文件来使用,编译的方法有软件编译,或者用nodejs程序.
less、sass编译软件:http://koala-app.com/index-zh.html
less中文网址:http://lesscss.cn/

less语法：
    一、注释
        // 不会被编译的注释
        /* 会被编译的注释 */

    二、变量
    @w:200px;
    .box{
        width:@w;
        height:@w;
        background-color:red;
    }

    三、混合
    .border{
        border:1px solid #ddd;
    }
    .box(@w:100px,@h:50px,@bw:1px){
        width:@w;
        height:@h;
        border:@bw solid #ddd;
    }
    .box{
        .border;
        background-color:red;
    }

    四、匹配模式
    .p(r){
        postion:relative;
    }
    .p(a){
        postion:absolute;
    }
    .p(f){
        postion:fixed;
    }
    .box{
        .p(f);
    }

    五、运算
    @w:300px;
    .box{
        width:@w+20;
    }

    六、嵌套
    .list{
        li{
            ...
        }
        a{
            ...
            &:hover{
                ...
            }
        }
        span{
            ...
        }
    }

    七、导入
    // 导入common.less,导入a.css文件

    @import "common";
    @import (less) "a.css";


3.2 前端自动化
Node.js
    Node.js能够理解为是一门后端脚本语言,使用了和JavaScript相同的语法,会使用JavaScript的程序员能很快上手node.js.
    nodjs在处理高并发方面性能卓越,目前许多公司都在使用nodejs做为后端数据服务和前端开发的中间层.
    node.js的中文网站:https://nodejs.org/zh-cn/

前端自动化
    前端开发的流程愈来愈复杂,其中有代码的合并和压缩、图片的压缩;对less、sass的预处理;文件操做等.
    这些工做是重复乏味的,为了优化开发流程,提升工做效率,前端自动化工具就出现了,自动化工具能够经过配置,自动完成这些工做.

grunt、gulp
    grunt和gulp是使用node.js编写的,前端首选的自动化工具,gulp在书写配置上比grunt更简洁,运行的性能更高,gulp逐渐成为主流.

gulp的使用
    gulp使用步骤: 安装nodejs->全局安装gulp->项目安装gulp以及gulp插件->配置gulpfile.js->运行任务
    gulp网站:http://gulpjs.com/

经常使用gulp插件：
    压缩js代码(gulp-uglify)
    less的编译(gulp-less)
    css的压缩(gulp-minify-css)
    自动添加css3前缀(gulp-autoprefixer)
    文件更名字 (gulp-rename)


3.3 前端性能优化
从用户访问资源到资源完整的展示在用户面前的过程当中,经过技术手段和优化策略,缩短每一个步骤的处理时间从而提高整个资源的访问和呈现速度.
网站的性能直接会影响到用户的数量,全部前端性能优化很重要.
前端性能优化分为以下几个方面:
1、代码部署:
    一、代码的压缩与合并
    二、图片、js、css等静态资源使用和主站不一样域名地址存储,从而使得在传输资源时不会带上没必要要的cookie信息.
    三、使用内容分发网络 CDN
    四、为文件设置Last-Modified、Expires和Etag
    五、使用GZIP压缩传送
    六、权衡DNS查找次数(使用不一样域名会增长DNS查找)
    七、避免没必要要的重定向(加"/")

2、编码:
html:
    一、使用结构清晰，简单，语义化标签
    二、避免空的src和href
    三、不要在HTML中缩放图片
css:
    一、精简css选择器
    二、把CSS放到顶部
    三、避免@import方式引入样式
    四、css中使用base64图片数据取代图片文件,减小请求数,在线转base64网站: http://tool.css-js.com/base64.html
    五、使用css动画来取代javascript动画
    六、使用字体图标,图标库网站: http://fontawesome.io/icons/    在线制做网站: www.iconfont.cn
    七、使用css sprite
    八、使用svg图形
    九、避免使用CSS表达式
        a {star : expression(onfocus=this.blur)}
    十、避免使用滤镜
javascript:
    一、减小引用库的个数
    二、使用requirejs或seajs异步加载js
    三、JS放到页面底部引入
    四、避免全局查找
    五、减小属性查找
    六、使用原生方法
    七、用switch语句代替复杂的if else语句
    八、减小语句数,好比说多个变量声明能够写成一句
    九、使用字面量表达式来初始化数组或者对象
    十、使用DocumentFragments或innerHTML取代复杂的元素注入
    十一、使用事件代理(事件委托)
    十二、避免屡次访问dom选择集
    1三、高频触发事件设置使用函数节流，如：onmousemove、onmouseover
    1四、使用Web Storage缓存数据
    1五、使用Array的join方法来代替字符串的"+"链接(先将要链接的字符串放进数组)

=================================================================