锋利的 jQuery (第二版) 认识 jQuery

时间  2019-12-10
标签 锋利 jquery 第二 认识 栏目 JQuery 繁體版
原文   原文链接

第1章 认识 jQuery

1.2 jQuery 简介

1.2.1 jQuery 团队

如今的 jQuery 团队主要包括 核心库、UI、插件 和 jQuery Mobile 等开发人员以及推广和网站设计、维护人员。css

1.2.2 jQuery 优点

1) 轻量级。 压缩后的 jQuery 大小在 30KB 左右。
2) 强大的选择器。jQuery 支持 CSS 1 --> CSS 3 几乎全部的选择器， 以及jQuery 独有的选择器。引入插件可支持 XPath 选择器。
3) 出色的 DOM 封装。
4) 可靠的事件处理机制。jQuery 在 预留退路、按部就班 以及 非入侵式 编程方面作的不错。
5) 完善的 Ajax。
6) 不污染顶级变量。 jQuery 只创建一个名为 jQuery 的对象，其全部的函数方法都在这个对象之下。其别名 $ 能够随时交出控制权，不会污染其余对象。
7) 出色的浏览器兼容性。
8) 链式操做方式。 对发生在同一个 jQuery 对象的一组动做， 能够直接连写无需重复获取对象。
9) 隐式迭代。 jQuery 的方法被设计成自动操做对象集合而不是单独的对象。
10) 行为层与结构层分离。 能够用 jQuery 选择器选中元素并直接给该元素添加事件。
11) 丰富的插件支持。
12) 完善的文档。
13) 开源。 任何人能够自由使用并提出修改意见。html

1.3 jQuery 代码的编写

1.3.1 jQuery 库对比

表 1-1前端

           名称           大小                                                          说明
jquery.js 约229KB 完整无压缩版本，主要用于测试、学习和开发
jquery.min.js 约30KB 通过工具或服务器开启 Gzip 压缩 主要应用于产品和项目

1.3.2 jQuery 代码

在 jQuery 库中, $ 是jQuery 的简写形式，如 $("#foo") 等价于 jQuery("#foo")
表 1-2 window.onload 与 $(document).ready() 对比python

                       window.onload                                   $(document).ready()
执行时机 必须等待网页中全部的内容加载完毕后（包括图片）才能执行 网页中全部的 DOM 结构绘制完毕后就执行， 可能 DOM 元素关联的东西并无加载完
编写个数 不能同时编写多个
如下代码没法正确执行:
window.onload = function() {
alert("test1");
};
window.onload = function() {
alert("test2");
};
结果只输出 “test2”		 能同时编写多个
如下代码正确执行:
$(document).ready(function() {
alert("Hello 1");
});
$(document).ready(function() {
alert("Hello 2");
});
结果两次都输出
简化写法 无 $(document).ready(function() {
//...
});
能够简写成：
$(function() {
//...
});

1.3.3 jQuery 代码风格

1. 链式操做风格
HTML 结构jquery

<!DOCTYPE html>
<html>

<head>
    <title>前端UI</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.8.3.js"></script>
</head>

<body>
    <div class="box">
        <ul class="menu">
            <li class="level1">
                <a class="base" href="#none">衬衫</a>
                <ul class="level2">
                    <li><a href="#none">短袖衬衫</a></li>
                    <li><a href="#none">长袖衬衫</a></li>
                    <li><a href="#none">短袖T恤</a></li>
                    <li><a href="#none">长袖T恤</a></li>
                </ul>
            </li>
            <li class="level1">
                <a class="base" href="#none">卫衣</a>
                <ul class="level2">
                    <li><a href="#none">开襟卫衣</a></li>
                    <li><a href="#none">套头卫衣</a></li>
                    <li><a href="#none">运动卫衣</a></li>
                    <li><a href="#none">童装卫衣</a></li>
                </ul>
            </li>
            <li class="level1">
                <a class="base" href="#none">裤子</a>
                <ul class="level2">
                    <li><a href="#none">短裤</a></li>
                    <li><a href="#none">休闲裤</a></li>
                    <li><a href="#none">牛仔裤</a></li>
                    <li><a href="#none">免烫卡其裤</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
$(function() {
    $(".level1 > a").click(function() {
        $(this).addClass("current")
            .next().show()
            .parent().siblings().children("a").removeClass("current")
            .next().hide();
    });
});
</script>

</html>

CSS 样式编程

ul {
    padding: 0;
}

ul >li {
    list-style-type: none;
}

a {
    text-decoration-line: none;
    text-align: center;
    display: block;
    height: 25px;
    width: 90px;
    color: black;
}

a:active {
    color: #5F9EA0;
}

.box {
    margin: 0 auto;
}

.menu {
    height: 183px;
    width: 92px;
    margin: 0 auto;
}

.base {
    border: 1px solid #272822;
    background-color: #F6F6F6;
}

.level2 {
    display: none;
    border: 1px solid #272822;
}

.level2 li {
    background-color: #fff;
}

.current {
    background-color: #005F3C;
    color: #D2691E;
}

代码规范：

(1) 对于同一个对象不超过3个操做的，能够直接写成一行。如：数组

$("li").show().unbind("click");

(2) 对一个对象的较多操做，每行写一个操做。如：浏览器

$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast", 0.6)
.fadeTo("fast", 1)
.unbind("click")
.click(function(){
// do something
});

(3) 对于多个对象的少许操做，每一个对象写一行，若涉及子元素，能够考虑适当地使用缩进。如：服务器

$(this).removeClass("hightlight")
     .children("li").show().end()
.siblings().removeClass("highlight")
     .children("li").hide();

2. 为代码添加注释
编写优秀选择器的时候，不要忘记给这段代码加上注释， 这对于本身往后阅读和与他人分享、合做时都能起到良好效果。dom

// 在一个 id 为table 的 tbody 中，对于每一行的一列中的 checkbox 若是没被禁用，将这一行的背景置为红色。
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red")

1.4 jQuery 对象和 DOM 对象

1.4.1 DOM 对象和 jQuery 对象简介

1. DOM 对象
DOM（Document Object Model），每一份 DOM 均可以表示成一棵树。
经过 JavaScript 中的 getElementsByTagName或 getElementById 获取元素节点。 像这样获得的 DOM 元素就是 DOM 对象。DOM 对象可使用 JavaScript 中的方法。

var domObj = document.getElementById("id");
var ObjHTML = domObj.innerHTML; // 使用 JavaScript 中的属性----innerHTML

1. jQuery 对象
jQuery 对象经过 jQuery 包装 DOM 对象后产生的对象。jQuery 可使用 jQuery 里的方法。如：

$("foo").html()

等价于

document.getElementById("foo"),innerHTML;

jQuery 对象没法使用 DOM对象的任何方法。

1.4.2 jQuery 对象和 DOM 对象的相互转换

约定变量定义风格， 若是获取的是 jQuery 对象， 则在变量前加一个 $ 符号。如：

var $variable = jQuery 对象；

若是是 DOM 对象

var variable = DOM 对象；

1. jQuery 对象转 DOM 对象
[index] 和 get(index)方法
(1) jQuery 对象是一个相似数组的对象，可经过 [index] 方法获得 DOM 对象。

var $cr = $("#cr"); // jQuery 对象
var cr = $cr[0]; // DOM 对象

(2) 另外一种方法为 jQuery 自己提供，经过 get(index) 方法获得 DOM 对象。

var $cr = $("#cr"); // jQuery 对象
var cr = $cr.get(0); // DOM 对象

2. DOM　对象转 jQuery 对象
对于一个 DOM 对象， 只要用 $() 将 DOM 对象包起来， 就获得一个 jQuery 对象。

var cr = document.getElementById("cr"); // DOM 对象
var $cr = $(cr); // jQuery 对象

1.5 解决 jQuery 和 其余库的冲突

在 jQuery 中， 几乎全部的插件都被限制在它的命名空间里。 jQuery 用 $ 做为自身快捷方式。
1. jQuery 库在其余库以后导入
在其余库和 jQuery 库都被加载完毕后， 能够在任什么时候候调用 jQuery.noConflict() 函数来将变量 $ 的控制权移交给其余的 JavaScript 库。如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="prototype.js"></script>
    <script src="../jquery-1.8.3.js"></script>
</head>
<body>
    <div id="id">
        I am a cool gay!(It will be hided!)
    </div>
    <button> Do you agree?(It will be clicked!)</button>
</body>
<script>
    jQuery.noConflict();// 将变量$的控制权移交给prototype.js
    jQuery(function(){// 使用 jQuery
        jQuery("button").click(function(){
            alert(jQuery(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隐藏元素
</script>
</html>

也能够自定义快捷方式

var $j = jQuery.noConflict();// 将变量$的控制权移交给prototype.js
    $j(function(){// 使用 jQuery，利用自定义快捷方式---$j
        $j("button").click(function(){
            alert($j(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隐藏元素

其余方法一:

jQuery.noConflict();// 将变量$的控制权移交给prototype.js
    jQuery(function($){// 使用 jQuery 设定页面加载时执行的函数
        $("button").click(function(){// 在函数内部继续使用$()方法
            alert($(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隐藏元素

其余方法二:

jQuery.noConflict();// 将变量$的控制权移交给prototype.js
    (function($){       // 定义匿名函数并设置形参为 $
        $(function(){   // 匿名函数的$均为 jQuery
            $("button").click(function(){// 继续使用$()方法
               alert($(this).text())
            });
        });
    })(jQuery);  // 执行匿名函数并传递实参 jQuery
    $("id").style.display = 'none';// 使用 prototype.js隐藏元素

2. jQuery 库在其余库以前导入
若 jQuery 库在其余库以前导入， 可直接使用 jQuery 作 jQuery 的工做。
同时可以使用 $() 方法做为其余库的快捷方式。无需使用 jQuery.noConflict()函数。如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../jquery-1.8.3.js"></script>
    <script src="prototype.js"></script>

</head>
<body>
    <div id="id">
        I am a cool gay!(It will be hided!)
    </div>
    <button> Do you agree?(It will be clicked!)</button>
</body>
<script>
    jQuery(function(){// 使用 jQuery, 无需调用 jQuery.noConflict()函数
        jQuery("button").click(function(){
            alert(jQuery(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隐藏元素
</script>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程