2017-03-29

优雅使用jQuery

结合《锋利的jQuery》学习，记录属于自己的知识。jQuery是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理、完善的兼容性和链式操作等功能。

jQuery代码编写入门

获取jQuery通过官网获取
编写简单的jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery01</title>
</head>
<body>
</body>
<script src="//cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        alert("Hello World");
    });
    $(function() {      
        alert('tess');
    })
    $(document).ready(function () {
    });
</script>
</html>

window.onload和$(document).ready()的对比

jQuery对象和DOM对象

1、DOM(Document Object Model, 文档对象模型)，DOM对象可以使用JavaScript中的方法：

1 2	var domObject = document.getElementById("id"); var objHtml = domObj.innerHTML;

2、jQuery 对象就是通过jQuery包装DOM对象后产生的对象，jQuery 对象是jQuery 独有的。

3、jQuery对象和DOM对象的相互转换

1
2
3

var $variable = jQuery对象；
var variable = DOM对象；

//jQuery对象->DOM对象
var $cr = $("#cr");
var cr = $cr[0];
var cr = $cr.get(0);
//jQuery对象<-DOM对象
var cr = document.getElementById("cr");
var $cr = $(cr);

解决jQuery 和其他库的冲突

1、jQuery在其他库加载之后导入，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。

2、自定义一个快捷方式

1	var $j = jQuery.noConflict();

3、将变量$的控制权让渡给prototype.js

jQuery.noConflict();
jQuery(function($){                 //使用jQuery
    $("p").click(function(){        //继续使用 $ 方法
        alert( $(this).text() );
    });
});

4、执行匿名函数且传递实参jQuery

jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
(function($){                       //定义匿名函数并设置形参为$
    $(function(){                   //匿名函数内部的$均为jQuery
        $("p").click(function(){    //继续使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery);                         //执行匿名函数且传递实参jQuery

jQuery选择器

在jQuery中，对事件处理、遍历DOM和Ajax 操作都依赖于选择器。
jQuery 选择器分为基本选择器，层次选择器、过滤选择器、表单选择器；

基本选择器

选择器	描述	返回	示例
#id	匹配给定的id	单个元素	$(“header”)
.class	匹配给定的类名	集合元素	$(“.test”)
E	匹配给定的标签名	集合元素	$(“div”)
*	匹配所有元素	集合元素	$(“*’)
E, .class, E…	匹配给定的集合	集合元素	$(“span, .tips”)

层次选择器

选择器	描述	返回	示例
$(“ancestor descendant”)	匹配 ancestor 里的所有descendant(后代)元素	集合元素	$(“body div”)
$(“parent>child”)	匹配 parent 下的所有child(子) 元素	集合元素	$(“div>span”)
$(“prev+next”)	匹配紧接在 prev 后的next 元素	集合元素	$(“.error+span”)
$(“prev~siblings”)	匹配 prev 后的所有siblings 元素	集合元素	$(“span~a”)

可以用

过滤选择器

表单选择器

选择器	描述	返回	示例
:input	匹配所有 input, textarea,select, button元素	集合元素	$(“input”)
:text	匹配所有文本框	集合元素	$(“:text”)
:password	匹配所有密码框	集合元素	$(“:password”)
:radio	匹配所有单选框	集合元素	$(“:radio”)
:checkbox	匹配所有所有多选框	集合元素	$(“:checkbox”)
:submit	匹配所有提交按钮	集合元素	$(“:submit”)
:image	匹配所有图像按钮	集合元素	$(“:image”)
:reset	匹配所有重置按钮	集合元素	$(“:reset”)
:button	匹配所有按钮	集合元素	$(“:button”)
:file	匹配所有上传域	集合元素	$(“:file”)

编码规范

链式操作

对于同一个对象不超过3个操作的，可以直接写成一行：
1
$("li").show().unbind("click");

对于同一个对象的较多操作，建议每行写一个操作：

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

如果嫌代码行数过多，可以以功能块来换行。
对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当缩进：
1
2
3
4
$(this).addClass("highlight")
       .children("li").show().end()
.siblings().removeClass("highlight")
       .children("li").hide();

参考资料

书

文章

Title:优雅使用jQuery

Author:Lianjiang Chen

Created:2017-03-29, 11:22:39

Updated:2017-04-26, 16:18:47

Full URL:http://chenlianjiang.github.io/2017/03/29/优雅使用jQuery/

License: "CC BY-NC-SA 4.0" Keep Link & Author if Distribute.