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

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_34138255

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量57

点赞数

文章标签： javascript 前端 ui ViewUI

原文链接：https://segmentfault.com/a/1190000008097285

版权

第1章认识 jQuery

1.2 jQuery 简介

1.2.1 jQuery 团队

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

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) 开源。任何人可以自由使用并提出修改意见。

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() 对比

	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 结构

<!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. 为代码添加注释
编写优秀选择器的时候，不要忘记给这段代码加上注释，这对于自己日后阅读和与他人分享、合作时都能起到良好效果。

// 在一个 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>