jQuery学习

jQuery是一个快速、简洁的JavaScript框架

jQuery设计的宗旨是“write Less,Do More”

初识jQuery

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互

总结来说为下面三点:

  • jQuery 是一个 JavaScript
  • jQuery 极大地简化了 JavaScript 编程
  • jQuery 很容易学习

使用jQuery编写HelloWorld

  • 下载jQuery库
  • 引入jQuery

    1
    2
    3
    4
    5
    <head>
    <meta charset="UTF-8">
    <title>01-初识jQuery</title>
    <script src="js/jquery-1.11.3/jquery.js"></script>
    </head>
  • 编写helloWorld

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>02-jQuery-HelloWorld</title>
    <script src="js/jquery-1.11.3/jquery.js"></script>
    <script>
    // 原生js的固定写法
    window.onload = function(ev) {
    };

    // jQuery的固定写法
    $(document).ready(function () {
    alert("Hello World");
    });
    </script>
    </head>
    <body>
    </body>
    </html>

jQuery和js入口函数的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
window.onload = function (ev) {
// 通过原生的js入口函数可以拿到Dom元素
var img = document.getElementsByTagName("img")[0];
console.log(img);
// 通过原生的js入口函数可以拿到dom元素的宽高
var width = window.getComputedStyle(img).width;
console.log(width);
};

$(document).ready(function () {
// 通过jQuery入口函数可以拿到Dom元素
var $img = $("img")[0];
console.log($img);
// 通过jQuery入口函数不能拿到dom元素的宽高
var $width = $img.width();
console.log($width);
});
</script>

区别:

  • 原生jQuery入口函数的加载模式不同
  • 原生js会等到dom加载完毕,并且图片也加载完毕才会执行
  • jQuery会等到dom加载完毕,但不会等到图片也加载完毕就会执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
window.onload = function (ev) {
alert("hello cuzz"); // 不会显示
};
window.onload = function (ev) {
alert("hello cuxx"); // 会显示
};
</script>
<script>
$(document).ready(function () {
alert("hello cuzz"); // 会显示
});
$(document).ready(function () {
alert("hello cuxx"); // 会显示
});
</script>

区别:

  • 多个window.onload只会执行一次, 后面的会覆盖前面的
  • 多个$(document).ready()会执行多次,后面的不会覆盖前面的

原因:
jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰

1
2
3
4
5
6
7
8
9
10
11
<script>
// 相当于这样写
var test1 = function () {
alert("hello cuzz");
}
var test2 = function () {
alert("hello cuxx");
}
$(document).ready(test1);
$(document).ready(test2);
</script>

对比:

window.onload $(document).ready()
执行时机 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码
执行次数 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 可以执行多次,第N次都不会被上 一次覆盖
简写方案 $(function () { });

jQuery的四种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
// 第一种写法
$(document).ready(function () {
alert("hello cuzz");
});
// 第二种写法
jQuery(document).ready(function () {
alert("hello cuzz");
});
// 第三种写法
$(function () {
alert("hello cuzz");
});
// 第四种写法
jQuery(function () {
alert("hello cuzz");
});
</script>

推荐使用第三种写法

jQuery的核心函数

  • jQuery(callback),当dom加载完成之后执行传入的回调函数

    1
    2
    3
    4
    5
    <script>
    $(function () {
    alert("123");
    });
    </script>
  • jQuery([sel,[context]]),接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,并包装成jQuery对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script>
    $(function () {
    // 利用jQuery获取的div,得到的是一个jQuery对象
    var $box = $("div");
    console.log($box);

    // 利用原生js语法获取的div,得到的是一个js对象
    var box = document.getElementsByTagName("div");
    console.log(box);
    });
    </script>
  • 原生JS对象和jQuery对象相互转换

  • jQuery(html, [ownerDoc]) 根据 HTML 标记字符串,动态创建DOM 元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    $(function () {
    var $eles = $("<p>我是span</p><u>我是u</u>");
    // 无论是jQuery找到的还是创建的,我们最终拿到的永远都是jQuery对象
    console.log($eles);
    // 将创建好的DOM元素添加到body中
    $("body").append($eles);
    });
    </script>

jQuery的本质是一个伪数组,有0到length-1的属性

jQuery静态方法

  • 静态方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script>
    // 定义一个类
    function AClass() {
    };

    // 给这个类添加一个静态方法
    AClass.staticMethod = function () {
    alert("staticMethod")
    };

    // 静态方法的调用
    AClass.staticMethod();
    </script>
  • 实例方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script>
    // 定义一个类
    function AClass() {
    }

    // 给这个类添加一个实例方法
    AClass.prototype.instanceMethod = function () {
    alert("instanceMethod");
    }

    // 实例方法的调用
    var a = new AClass();
    a.instanceMethod();

    </script>

常用静态方法

  • $.each(object, [callback])

    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
    $(function () {
    // 遍历数组
    var arr = [1, 3, 5, 7, 9];
    // 通过原生方法遍历数组
    // 第一个回调函数参数是遍历到的元素
    // 第二个回调函数参数是当前遍历的索引
    // 返回值: 没有返回值
    var res = arr.forEach(function (ele, idx) {
    console.log(idx, ele);
    });
    console.log(res);

    // 通过jQuery静态方法遍历数组
    // 第一个回调函数参数是当前遍历的索引
    // 第二个回调函数参数是遍历到的元素
    // 返回值: 被遍历的数组
    var $res2 = $.each(arr, function (idx, ele) {
    console.log(idx, ele);
    });
    console.log($res2);

    // 遍历对象
    var obj = {name: "", age:"33", gender:"male"};
    // js对象没有forEach方法,所以通过forin方法遍历对象
    for(var key in obj){
    console.log(key, obj[key]);
    }
    // 通过jQuery静态方法遍历对象
    $.each(obj,function (key, value) {
    console.log(key, value);
    });
    });
  • $.holdReady(hold),传入true或false来暂停或则恢复ready()事件

  • $.trim(str) 去掉字符串起始和结尾的空格
  • $.isArray(obj) 判断是否是数组
  • $.isFunction(obj)判断是否是函数
  • $.isWindow(obj)判断是否是window对象

    学习网站

    在网上,发现菜鸟教程比较详细,排版也比较好,不再更新jQuery
-------------本文结束感谢您的阅读-------------

本文标题:jQuery学习

文章作者:cuzz

发布时间:2018年06月24日 - 23:06

最后更新:2019年07月16日 - 19:07

原始链接:http://blog.cuzz.site/2018/06/24/jQuery学习/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请博主吃包辣条
0%