JQuery中的一些注意点1，比如：ready | selector | each

最新推荐文章于 2020-05-05 20:53:28 发布

雾里看花叹朦胧

最新推荐文章于 2020-05-05 20:53:28 发布

阅读量266

点赞数

分类专栏： JQuery 文章标签： JQuery ready load selector each

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/81838277

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用JQuery过程中需要注意到的一些地方！

1. JQuery 的 ready | load 事件

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发 $(document).ready()事件。

在旧的版本中的确是这样，但在新新的版本中已经修正。
新版本中，两个方法都会被调用。与$();函数三者的调用顺序如下：
$(); = $(document).ready();> body onload attr
具体的实例请参见 readyNotice.html 文章。
ready: 表示文档结构已经加载完成（不包含图片等非文字媒体文件）;
$();是$(document).ready();的简写形式，同时出现时，两个都会调用，谁写在前，就会被先行调用；
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
onload: 指示页面包含图片等文件在内的所有元素都加载完成。

readyNotice.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ready Notice</title>
    <script src="../jquery-2.1.3.min.js"></script>
    <script>
        function onload() {
            console.log('body onload attr!');
        }
        $(function () {
            console.log('JQuery onload!');
        });
        $(document).ready(function () {
            console.log('JQuery document ready event');
        });
    </script>
</head>
<body onload="onload()">
    <h1>
        JQuery onload | JQuery document ready event | body onload attr
        <br>
        三者之间的调用顺序验证。
        <br>
        结果是：
        <br>
        $();是$(document).ready();的简写形式，同时出现时，两个都会调用，谁写在前，就会被先行调用
        <br>
        JQuery onload!
        <br>
        JQuery document ready event
        <br>
        body onload attr!
    </h1>
</body>
</html>

2.选择器中，使用任何的元字符作为名称的文本部分，它必须被两个反斜杠转义：\\

HTML 代码:
    <span id="foo:bar"></span>
    <span id="foo[bar]"></span>
    <span id="foo.bar"></span>
jQuery 代码:
    $("#foo\\[bar\\]")
结果:
    [ <span id="foo[bar]"></span>]

3.each

以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

HTML 代码:
   <div id="div1">1</div>
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
   <div id="div5">5</div>
jQuery 代码:
   $("div").each(function(i){
       if(i === 1) {
           return true; //就像在普通的循环中使用'continue'
       }
       if (i === 3) {
           return false; //就像在普通的循环中使用 'break'
       }
       console.log(i);
   });
结果:
   0,2