专栏首页python3Python全栈之jQuery笔记

Python全栈之jQuery笔记

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使用方法:
    常用参数:
        1、url 请求地址
        2、type 请求方式,默认是'GET',常用的还有'POST'
        3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'
        4、data 设置发送给服务器的数据
        5、success 设置请求成功后的回调函数
        6、error 设置请求失败后的回调函数
        7、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事件包括如下几个事件:
        1、touchstart: 手指放到屏幕上时触发
        2、touchmove: 手指在屏幕上滑动式触发
        3、touchend: 手指离开屏幕时触发
        4、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使用参数:
    1、initialSlide:初始索引值,从0开始
    2、direction:滑动方向 horizontal | vertical
    3、speed:滑动速度,单位ms
    4、autoplay:设置自动播放及播放时间
    5、autoplayDisableOnInteraction:用户操作swipe后是否还自动播放,默认是true,不再自动播放
    6、pagination:分页圆点
    7、paginationClickable:分页圆点是否点击
    8、prevButton:上一页箭头
    9、nextButton:下一页箭头
    10、loop:是否首尾衔接
    11、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等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:
    1、col-lg-
    2、col-md-
    3、col-sm-
    4、col-xs-

bootstrap响应式查询区间:
    1、大于等于768
    2、大于等于992
    3、大于等于1200

bootstrap表单:
    1、form 声明一个表单域
    2、form-inline 内联表单域
    3、form-horizontal 水平排列表单域
    4、form-group 表单组、包括表单文字和表单控件
    5、form-control 文本输入框、下拉列表控件样式
    6、checkbox checkbox-inline 多选框样式
    7、radio radio-inline 单选框样式
    8、input-group 表单控件组
    9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
    10、form-group-lg 大尺寸表单
    11、form-group-sm 小尺寸表单

bootstrap按钮:
    1、btn 声明按钮
    2、btn-default 默认按钮样式
    3、btn-primay
    4、btn-success
    5、btn-info
    6、btn-warning
    7、btn-danger
    8、btn-link
    9、btn-lg
    10、btn-md
    11、btn-xs
    12、btn-block 宽度是父级宽100%的按钮
    13、active
    14、disabled
    15、btn-group 定义按钮组

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

bootstrap隐藏类:
    1、hidden-xs
    2、hidden-sm
    3、hidden-md
    4、hidden-lg

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

bootstrap下拉菜单:
    1、dropdown-toggle
    2、dropdown-menu

bootstrap选项卡:
    1、nav
    2、nav-tabs
    3、nav-pills
    4、tab-content

bootstrap导航条:
    1、navbar 声明导航条
    2、navbar-default 声明默认的导航条样式
    3、navbar-inverse 声明反白的导航条样式
    4、navbar-static-top 去掉导航条的圆角
    5、navbar-fixed-top 固定到顶部的导航条
    6、navbar-fixed-bottom 固定到底部的导航条
    7、navbar-header 申明logo的容器
    8、navbar-brand 针对logo等固定内容的样式
    11、nav navbar-nav 定义导航条中的菜单
    12、navbar-form 定义导航条中的表单
    13、navbar-btn 定义导航条中的按钮
    14、navbar-text 定义导航条中的文本
    9、navbar-left 菜单靠左
    10、navbar-right 菜单靠右

bootstrap模态框:
    1、modal 声明一个模态框
    2、modal-dialog 定义模态框尺寸
    3、modal-lg 定义大尺寸模态框
    4、modal-sm 定义小尺寸模态框
    5、modal-header
    6、modal-body
    7、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语法:
    1、注释
        // 不会被编译的注释
        /* 会被编译的注释 */

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

    3、混合
    .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;
    }

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

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

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

    7、导入
    // 导入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、代码的压缩与合并
    2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息.
    3、使用内容分发网络 CDN
    4、为文件设置Last-Modified、Expires和Etag
    5、使用GZIP压缩传送
    6、权衡DNS查找次数(使用不同域名会增加DNS查找)
    7、避免不必要的重定向(加"/")

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券