美文网首页
jQuery入门到放弃(一)

jQuery入门到放弃(一)

作者: cuzz_ | 来源:发表于2018-09-02 13:35 被阅读0次

初识jQuery

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

总结来说为下面三点:

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

使用jQuery编写HelloWorld

  • 下载jQuery库
  • 引入jQuery
<head>
    <meta charset="UTF-8">
    <title>01-初识jQuery</title>
    <script src="js/jquery-1.11.3/jquery.js"></script>
</head>
  • 编写helloWorld
<!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入口函数的区别

    <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加载完毕,但不会等到图片也加载完毕就会执行
    <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函数传递一个新的函数,不同函数内部的数据不会相互干扰

<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的四种写法

    <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加载完成之后执行传入的回调函数
    <script>
        $(function () {
           alert("123"); 
        });
    </script>
  • jQuery([sel,[context]]),接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,并包装成jQuery对象
    <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 元素
    <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静态方法

  • 静态方法
    <script>
        // 定义一个类
        function AClass() {
        };

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

        // 静态方法的调用
        AClass.staticMethod();
    </script>
  • 实例方法
    <script>
        // 定义一个类
        function AClass() {
        }

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

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

    </script>

常用静态方法

  • $.each(object, [callback])
$(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入门到放弃(一)

      本文链接:https://www.haomeiwen.com/subject/jxdpwftx.html