JQuery

简介

引入

JQuery下载：https://jquery.com/

JQuery.mousewheel.js下载：https://plugins.jquery.com/mousewheel/

1
2
3
4
5
6
7
8
9
<!-- 直接在页面将js文件嵌入进来 -->
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

<!-- JQuery中没有滚轮事件，因此还需要引入滚轮事件的插件 -->

<!-- 
1. 下载的文件中含有两个js文件，其中带mini的是压缩后的，未加mini的是原始的库，生产环境中使用带mini的。
2. 学习时，应该阅读不带mini的
-->

JQuery与原生js的区别

  • 原生JS

    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
        // 原生js书写方案，onload必须等到页面全部渲染完成以后才会执行
        window.onload = function(){
            var oDiv = document.getElementById("ID");
            alert(oDiv);
        }
    </script>

  • JQuery

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
    <!-- jQuery的完整写法 -->
    <script type="text/javascript">
        // $是jQuery中的经典符号，变量的命名建议以$开始
        // ready是等到页面节点全部加载完成后就开始渲染页面
        $(document).ready(function(){
            var $div = $("#ID");
            alert($div);    
        })
    </script>


    <!-- jQuery的简要写法 -->
    <script type="text/javascript">
        $(function(){
            var $div = $("#ID");
            alert($div);    
        })
    </script>

jQuery修改样式

1
2
3
4
5
6
7
<script type="text/javascript">
    $(function(){
        var $div = $("#ID");
        // 利用jQuery的内置方法css直接修改已经定位的元素的属性，css内部添加的是字典信息
        $div.css({"color":"red"})
    })
</script>

jQuery选择器

思想

  • 选取某个网页元素，然后对它进行操作

选择器

  • 快速选择元素，选择规则与css样式相同

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 选取Id为指定ID的所有元素
    $("#ID");

    // 选取class为Class的所有元素
    $(".Class");

    // 选取所有标签为div
    $("li");

    // 选择id为"ID"下的所有li标签中的span元素
    $("#ID li span");

    // 选取input标签中，name属性为first的元素
    $("input(name=first)");

  • 对选择集进行过滤

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 选择包含p标签的Div元素
    $("div").has("p");

    // 选择class不等于myClass的div元素
    $("div").not(".myClass");

    // 选择class等于myClass的div元素
    $("div").filter(".myClass");

    // 选取第6个div元素,默认数字从0开始计数
    $("div").eq(5);

  • 选择集的偏移

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // 选择div元素之前紧挨着的同辈元素
    $("div").prev();

    // 选择div元素之前所有的同辈元素
    $("div").prevAll();

    // 选择div元素后面紧挨着的同辈元素
    $("div").next();

    // 选择div元素后面所有的同辈元素
    $("div").nextAll();

    // 选择div的父级元素
    $("div").parent();

    // 选择div的所有子级元素
    $("div").children();

    // 选择div所有的同级元素
    $("div").siblings();

    // 选择div内class等于myclass的元素
    $("div").find(".myclass");

jQuery是否选中

由于jQuery的容错机制，即使没有找到元素，也不会报错，为了验证是否定位到元素，需要打印出元素的length属性来判断是否定位准确。若为0，则未定位到，若大于0，则表示选择到了元素

1
2
3
var $oDiv = $("#ID");
// 通过弹出的数字进行判断
alert($oDiv.length);

jQuery样式和事件

思想

  • 同一个函数完成取值和赋值（css）

样式

  • 行间样式

    1
    2
    3
    4
    5
    6
    7
    // 获取对象的属性，格式：$("定位").css("属性名")
    // 当选择器定位的是多个元素的时候，此时只会获取到其中第一个元素对应的属性
    $("div").css("width");

    // 修改对象的样式
    $("div").css({"width":"520px","color":"red"});
    $("div").css("width", "30px");  // 可用于的单个属性的设置

  • 修改样式名

    操作会修改元素的Class属性信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 判断Id为div1的对象是否含有：divClass，如果有则返回true，反之为false
    $("#div").hasClass("divClass");

    // 为Id为div1的对象追加样式类：divClass
    $("#div").addClass("divClass");

    // 移除Id为div1的对象中的divClass的样式
    $("#div").removeClass("divClass");

    // 移除Id为div1的对象中的divClass、name的样式，多个Class之间用,间隔开
    $("#div").removeClass("divClass name");

    // 重复切换name的样式，它需要配合button按钮一起使用
    $("#div").toggleClass("name");

事件

  • click事件

    1
    2
    3
    4
    5
    // 利用click包裹封闭函数
    var $btn = $("#btn");
    $btn.click(function(){
        $div.toggleClass("add");
    })

  • index定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 内部的this指的是原生对象，代表的是当前鼠标点击的对象，该对象只有原生的一些方法
    var $btn = $("input");
    $btn.click(function(){
        // 使用jQuery对象用$(this)，代表的是当前鼠标点击的对象，该对象含有jQuery定义的方法
        $(this).addClass("myClass").siblings().removeClass("yourClass");
        
        // index可以捕获到当前点击的对象相比较其它同胞元素的索引位置，默认从0开始计数
        $btn.eq( $(this).index() ).addClass("myClass");
    })

jQuery特效、链式、动画

特效

  • 案例

    1
    2
    3
    4
    5
    6
    7
    8
    var $btn = $("button");
    var $div = $("#div")
    $btn.click(function(){
        // fadeIn(持续时间, "效果", 回调函数)
        $div.fadeIn(1000, "swing", function(){
            alert("动画完成");
        })
    })

  • 常用特效如下：

    方法 效果
    fadeIn() 淡入
    fadeOut() 淡出
    fadeToggle() 切换淡入淡出
    hide() 隐藏
    show() 显示
    toggle() 切换元素的可见状态
    slideDown() 向下展开
    slideUp() 向上卷起
    slideToggle() 依次展开和卷起某个元素

链式调用

1
2
3
4
5
// 将多条语句通过一条语句的.来进行合并实现功能
// children中也可以通过样式进行筛选
$(this).next().stop().sideToggle().parent().siblings().children("ul").sideUp();

// stop()的目的是为了解决动画加载过程中，由于重复点击操作而反复执行

动画

1
2
3
4
5
6
7
8
9
10
11
// animate方法可以设置元素某属性上的动画，可以设置一个/多个属性值，动画执行完成后还可以执行一个特定的函数
// annimate可以让样式变化的能够渐序执行
// 格式：[对象].animate({样式}, 持续时间, "动画效果", 回调函数)
$(this).stop().animate({"width":"600px", "height":"200px"}, 10000, "swing", function(){
    alert("动画结束");
})

// 通过对宽度设置+/-=可以实现每次长度叠加的效果
$(this).stop().animate({"width":"+=100px", "height":"200px"}, 10000, "swing", function(){
    alert("动画结束");
})

jQuery尺寸和滚动事件

尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 获取元素的宽度
$("div").width();

// 获取元素的高度
$("div").height();

// 元素的宽度 + padding
$("div").innerWidth();

// 元素的高度 + padding
$("div").innerHeight();

// 元素的宽度 + padding + border
$("div").outerWidth();

// 元素的高度 + padding + border
$("div").outerHeight();

// 元素的宽度 + padding + border + margin
$("div").outerWidth(true);

// 元素的高度 + padding + border + margin
$("div").outerHeight(true);

// 获取元素相对页面的绝对位置
$("div").offset()
$("div").offset().left;  // 获取元素相对页面左侧的距离值
$("div").offset().top;  // 获取元素相对页面顶部的距离值

// 获取可视区域的宽度
$(window).width();

// 获取可视区域的高度
$(window).height();

// 获取页面文档的宽度
$(document).width();

// 获取页面文档的高度
$(document).height();

// 获取页面文档上下滚动的距离
$(document).scrollTop();

// 获取页面文档的左右滚动的距离
$(document).scrollLeft();

事件

1
2
3
4
5
// 设置页面滚动事件，当页面滚动时就会检测，其检测频率很高。
$(window).scroll(function(){函数体})

// 制作页面返回动画, 绑定返回按钮的点击事件
$(html,body).animate({"scrollTop":0})

属性和循环

属性

1
2
3
4
5
6
7
8
9
10
11
// jQuery获取对象中内嵌的html内容
$("div").html();

// 设置对象的html内容
$("div").html("wu da shuai");

// 取出对象中某个属性的值
$("div").prop("class");

// 设置对象中某个属性的值,此处配置的属性名在节点上需要已存在
$("div").prop({"class":"name"});

循环

1
2
3
4
5
6
// 循环用户当定位到多个元素时，对这些元素进行循环分类操作

var $li = $("li");
$li.each(function(num){
    alert("元素的索引值" + "num");
})

jQuery事件

事件

  • 常见事件

    事件名称 作用
    mouseover() 鼠标进入事件(进入子元素也会触发)
    mouseout() 鼠标离开事件(离开子元素也会触发)
    mouseenter() 鼠标进入事件(进入子元素不触发)，在子元素内部移动不会产生任何的事件
    mouseleave() 鼠标离开事件(离开子元素不触发)，在子元素内部移动不会产生任何的事件
    mousewheel() 鼠标滚轴事件，当滚动时触发，需要绑定在$(window)上，需引入Jquery.mousewheel.js插件
    hover() 同时为mouseenter和mouseleave事件制定处理函数
    ready() DOM加载完成后触发
    resize() 浏览器窗口的大小发生变化时触发，需要绑定在$(window)上
    scroll() 滚动条的位置发生变化时触发
    submit() 用户提交表单时触发
    blur() 元素失去焦点
    focus() 元素获得焦点 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    // blur(): 用户触发元素失去焦点的时候触发的函数
    $("div").blur(function(){
        alert("移出了元素");
    })

    // focus()：用户聚焦于某个焦点的时候触发的函数
    $("div").focus(function(){
        alert("聚焦于焦点")
    })
    $("div").focus();  // 是使得页面默认聚焦于某个元素，常用方式

    // hover()：用户鼠标移入移出某个元素的时候触发的函数
    // 第一个函数是mouseenter()事件
    // 第二个函数是mouseleave()事件
    $("div").hover(function(){
        alert("鼠标移入");
    }, function(){
        alert("鼠标移出");
    })

    // resize()：检测浏览器窗口大小发生变化时，需要直接绑定到$(window)
    $(window).resize(function(){
        alert($(window).width);
    })

    // submit()：定义用户提交表单的事件，但是一般提交表单(form)不用该事件，所以需要阻止
    $("#form").submit(function(){
        return false;
    })

    // mousewheel()：鼠标滚轴事件，需要引入插件，并且直接绑定到$(window)
    $(window).mousewheel(function(event, dat){
        // event表示滚轮事件本身
        // dat是滚轴的方向，向上则其为-1，反之为1
        alert(dat)
    })

    // val()：获取用户在input输入框中输入的内容
    var $data = $("#input").val();
    $("#input").val("");  // 将输入框的内容清空

  • 多事件绑定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // bind用于给一个元素绑定多个事件
    // 第一个参数为传递的事件名，多个事件用空格间隔开
    // 第二个参数为触发的函数
    $("div").bind("click mouseout", function(){
        alert("事件已触发");
    })

    // unbind 用于给原本绑定事件的元素解除某个事件的绑定
    // 传递的参数为需要解绑的事件名
    $(this).unbind("click")

事件冒泡

  • 机制

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 【事件冒泡】是指子元素的事件会层层传递到其祖先级的同名事件上，从而触发父级及祖先级的同名事件
    // 【事件冒泡】存在的目的是为了实现【事件委托】的功能
    <script type="text/javascript">
        $(function(){
            $(".son").click(function(){
                alert(1);
            })
            
            $(".father").click(function(){
                alert(2);
            })
        })
    </script>

    // 点击上面【son】元素时，此时弹出1的同时，也会触发【father】的click事件，弹出2

  • 阻止冒泡事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 阻止冒泡事件有三种方式，在需要终止元素的冒泡事件上添加如下内容即可：
    // 1. 阻止冒泡事件：stopPropagation();
    $(function(){
        // 定义函数中的第一个参数代表了事件的本身，此处的event表示的是click事件
        $(".son").click(function(event){
            event.stopPropagation();
        })
        
    // 2. 阻止默认表单提交：preventDefault();
    $(function(){
        $(".son").click(function(event){
            event.preventDefault();
        })
        
    // 3. 合并1和2的阻止行为：return false;，推荐使用这个
    $(function(){
        $(".son").click(function(event){
            return false;
        })

事件委托

1
2
3
4
5
6
7
8
9
10
// 利用事件冒泡的原理，将对应的事件绑定到父级上，通过判断事件来源的子集，执行对应的操作。
// 事件委托可以极大的减少事件的绑定次数，提高性能，其次可以让新加入的元素也拥有相应的操作。

// delegate的参数含义如下：
// 第一个：是子集对应的选择器
// 第二个：表示子集会触发的事件名称
// 第三个：事件触发后执行的函数
$("ul").delegate("li", "click", function(){
    $(this).css({"color":"red"});
})

函数节流

1
2
3
4
5
6
7
8
9
10
// javascript中有些函数的触发频率很高，可能会导致事件触发次数过于频繁，因此通过定时器限制触发频率，以提高效率
// 高频事件如：scroll()、resize()、mousewheel()等
var timer = null;
$(window).mousewheel(function(event, dat){
    clearTimeout(timer);  // clearTimeout是清除指定的定时器，后面参数为定时器名称
    // setTimeout是创建一次性的定时器，第一个参数是定时器触发的函数，第二个是延时执行的时间
    timer = setTimeout(function(){  
        alert(1);
    }, 200)
})

节点操作

创建节点

1
2
3
4
5
6
7
8
// html创建节点的效率是最高的，如果不能，则使用节点操作
$("div").html('<a href="shuai"> 连接 </a>');

// 创建一个空节点, 回头插入到dom中时，会是一个空节点
var $content = $("<a>");

// 创建一个带内容的节点
var $content = $('<a href="shuai"> 连接 </a>');

插入节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var $content = $('<a href="shuai"> 连接 </a>');

// append()和appendTo()：在现存元素的内部，从后面插入元素
$("div").append($content);
$content.appendTo($("div"));

// prepend()和prependTo()：在现存元素的内部，从前面插入元素
$("div").prepend($content);
$(content).prependTo($("div"));

// after()和insertAfter()：在现存元素的外部，从后面插入元素
$("div").after($content);
$content.insertAfter($("div"));

// before()和insertBefore()：在现存元素的外部，从前面插入元素
$("div").before($content);
$content.insertBefore($("div"));

// 对已存在节点也可执行同类操作,它可以移动页面元素到指定的位置
$("#id").insertBefore($("#class"));

删除节点

1
$("#div").remove();

拓展

1
2
3
<!-- href的值设定为javascript:;则表示这个连接不做任何操作，写#也可同样效果，但是会携带a的样式-->
<a href="javascript:;" ></a>
<a href="#" ></a>

动态数据

json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// xml数据格式逐渐被json数据格式所替代
// json指的是类似于javascript对象的一种数据格式

// javascript自定义对象
var oMan = {
    name: "tom",
    age: "15",
    son: ["shuai", "qi"],
    talk: function(s){
        alert(1 + s);
    }
}

// json数据格式, 字符串必须用双引号包裹
{
    "name": "tom",
    "age": 15,
    "son": ["shuai", "qi"]
}

ajax

  • 目的：让javascript发送http请求，与后台通信，获取数据和信息

  • 原理：实例化xmlhttp对象，使用此对象与后台通信，ajax通信过程不影响javascript的执行，从而实现异步

  • 实践：通过ajax自己发送http请求，不通过浏览器地址栏，使得页面在无刷新的情况下获取到服务器后台数据，并更新在页面的指定位置。

  • 同步与异步：程序中同步指做完一件事后，就去做下一件事；异步指同时做好几件事

  • 同源策略：ajax请求的资源和页面只能够是同一个域下面的资源，不能是其它域下的资源，这是ajax基于安全的考虑，可以使用jsonp解决，报错信息如下：

    1
    2
    No 'Access-Control-Allow-Origin' header is present on the requested resource. 
    Origin 'http://localhost:8081' is therefore not allowed access.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// jQuery将ajax和jsonp封装在了一起，使用的时候用$.ajax，包含参数如下：
// 1. url: 请求的地址
// 2. type：请求方式，默认为get，常用的有post
// 3. dataType：设置数据的返回格式，常用的是json、jsonp，还可设置为html
// 4. data：设置发送给服务器的数据，用json格式传递
// 5. success：设置请求成功后的回调数据
// 6. error：设置请求失败后的回调函数
// 7. async：设置是否异步，默认为true，表示异步

// 传统写法
$.ajax({
    url: "json/wuxiang.json",
    type: "get",
    dataType: "json",
    data: {"name":"shuai"},
    success: function(data){  // data表示的是请求后获得的返回数据
        alert(data.name);  // 获取返回数据中的name值
    },
    error: function(){
        alert("请求失败后执行的内容");
    }
});

// 推荐写法
$.ajax({
    url: "json/wuxiang.json",
    type: "get",
    dataType: "json",
    data: {"name":"shuai"}
}).done(function(data){  // done表示数据返回后执行的回调函数
    alert(data.name);
}).fail(function(){
    alert("请求失败后执行的内容");
})

jsonp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// jsonp允许异域请求数据,请求原理是利用<script>标签可以跨域链接资源的特性
// jQuery中jsonp与ajax已经封装在一起了

$.ajax({
    url: "json/wuxiang.js",
    type: "get",
    dataType: "jsonp",
    data: {"name":"shuai"},
    jsonpCallback: "fnback"  // 此处fnback对应于请求数据文件中的起始名
}).done(function(data){  // done表示数据返回后执行的回调函数
    alert(data.name);
}).fail(function(){
    alert("请求失败后执行的内容");
})


// wuxiang.js中数据为：fnback({"name":"shuai", "age":18})

本地存储

Cookie存储

  1. Cookie存储在本地，大小4K，同源的http请求时携带传递，损耗带宽
  2. Cookie可设置访问路径，只有此路径及此路径的子路径才能访问该Cookie，在设置的过期时间内有效
  3. 如果访问未定义的cookie时会提示undefined
  4. JQuery本身并没有封装Cookie的操作，使用插件：JQuey.cookie.js，下载地址：http://plugins.jquery.com/cookie/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 引入cookie操作的插件，需要先引入JQuery，再引入插件
// 创建cookie,从左到右依次为Cookie名称、值、过期时间、cookie作用的路径
$.cookie('the_cookie_name', 'the_value', { expires: 7, path: '/' });

// 读取cookie
$.cookie('the_cookie_name');

// 删除cookie
$.cookie('the_cookie_name', null);

// 完整Cookie编辑方案
$.cookie('the_cookie','the_value',{
    expires:7,  // 设置过期时间
    path:'/',  // 设置Cookie的路径
    domain:'jquery.com',  // 设置Cookie作用的域名
    secure:true  // 设置Cookie传输时的安全性，默认为https
})

LocalStorage存储

  • 存储在本地，容量为5M或者更大
  • 不会在请求的时候携带传递，在所有的同源数据中共享，数据一直有效，除非人为删除
  • iphone的无痕浏览不支持该方式
1
2
3
4
5
6
7
8
9
10
// 设置
localStorage.setItem("键", "值");
localStorage.键 = 值;

// 获取
localStorage.getItem("键");
localStorage.键

// 删除
localStorage.removeItem("键")

sessionStorage存储

  • sessionStorage存储在本地，容量为5M或者更大
  • 不会在请求的时候携带传递，在同源的窗口关闭前一直有效
  • iphone的无痕浏览不支持该方式
1
2
3
4
5
6
7
8
9
10
// 设置
sessionStorage.setItem("键", "值");
sessionStorage.键 = 值;

// 获取
sessionStorage.getItem("键");
sessionStorage.键

// 删除
sessionStorage.removeItem("键")

JQuery UI

引入

使用

1
2
3
4
5
6
7
8
9
10
// JQuery UI提供很多功能，此处只以拖拽功能为例

$("div").draggable({
    axis: "y",  // 设置拖动的轴向，默认为x,y轴均可拖动
    containment: "parent",  // 限定对象的拖动范围，parent是限定拖动范围为其父级
    opacity: 0.6,  // 设置拖动时对象的透明度
    drag: function(ev, ui){  // ev表示事件对象本身，ui表示返回拖动对象的属性
        console.log(ui);  // 返回拖动对象的位置信息
    }
})

拓展

1
2
# 使用nodeJS运行js脚本
node server.js

总结

为便于记忆，将脑图绘制如下：脑图

JQuery