[JQ_node1] JQuery入门

类库简述

大多数 JavaScript 框架一般都具备的特性包括：

选择器（Selector）
DOM 遍历
DOM 操作
实用函数
事件处理
Ajax
前端开发框架:

Bootstrap、 jQuery、 jQuery Mobile、 Prototype、 Dojo、YUI、 Ext JS 、MooTools ……
jQuery优势

轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源

jQuery简介

jQuery，顾名思议，也就是JavaScript和查询（Query）即辅助JavaScript开发的类库。
jQuery是一个兼容多浏览器的javascript库，核心理念是
write less,do more(写得更少,做得更多)。
jQuery在2006年1月由美国人John
Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。
如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery环境的配置

获取jQuery类库
进入jQuery官网或其他平台下载jQuery文件
通常每个版本号有两个版本可供下载
生产版 - 用于实际的网站中，已被精简和压缩
开发版 - 用于测试和开发，未压缩，是可读的代码
2.0及之后的版本，不再兼容 IE 6 7 8
在页面中引入jQuery

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

$(document).ready与JS的window.onload的区别

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
window.onload没有简化写法
$(document).ready( function () { …} )
可以简写为：$(function () {…} );

jQuery选择器

基本选择器：
$(“#test”)选取id为test的元素—单个元素
$(“.test”)选取所有class为test的元素—集合元素
$(“p”)选取所有的
元素—集合元素
$(“*”)选取所有的元素—集合元素
$(“div,span,p.myClass”)选取—集合元素
层次选择器：

$(“div span”)选取<div>里的所有的<span>(可以选到子和孙所有元素)元素—集合元素
$(“div>span”)选取<div>元素下元素名是<span>的子元素—集合元素
$(“.one+div”)选取class为one的下一个<div>同辈元素—集合元素
$(“#two~div”)选取id为two的元素后面的所有<div>同辈元素—集合元素
基本过滤选择器：

$(“div:first”)选取所有<div>元素中第1个<div>元素—单个元素
$(“div:last”)选取所有<div>元素中最后一个<div>元素—单个元素
$(“input:not(.myClass)”)选取class不是myClass的<input>元素—集合元素
$(“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的<input>元素—集合元素
$(“input:odd”)选取索引(索引从0开始)是奇数的<input>元素—集合元素
$(“input:eq(1)”)选取索引(索引从0开始)等于1的<input>元素—单个元素
$(“input:gt(1)”)选取索引(索引从0开始)大于1的<input>元素—集合元素
$(“input:it(1)”)选取索引(索引从0开始)小于1的<input>元素—集合元素
内容过滤选择器：

$(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素—集合元素
$(“div:empty”)选取不包含子元素和文本的<div>空元素—集合元素
$(“div:has(p)”)选取含有<p>元素的<div>元素—集合元素
$(“div:parent”)选取拥有子元素或文本元素的<div>元素—集合元素
属性过滤选择器：

$(“div[id]”)选取拥有属性id的div元素—集合元素
$(“div[title=test]”)选取属性title为“test”的<div>元素—集合元素
$(“div[title!=test]”)选取属性title不等于“test”的<div>元素—集合元素
$(“div[title^=test]”)选取属性title以“test”开始的<div>元素—集合元素
$(“div[title$=test]”)选取属性title以“test”结束的<div>元素—集合元素
$(“div[title*=test]”)选取属性title含有“test”的<div>元素—单个元素
$(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素—集合元素
子元素过滤选择器：

$(“div:nth-child(1)”) 选取所有div中，是其父标签的第一个子标签的div元素—集合元素
【比较 $(“div:eq(0)”)选取第一个div元素】

$(“ul li:first-child”)选取每个<ul>中第一个<li>元素—集合元素
【比较
$(“div:first”)选择所有div标签中的第一个元素】

$(“ul li:last-child”)选取每个<ul>中最后一个<li>元素—集合元素
【比较$(“div:last”）选择所有div标签中的最后一个元素】

$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素—集合元素
first-child与：first的区别

$(“ul li: first-child”)选取每个<ul>中第一个<li>元素
->每个<ul>中第一个元素->必须是<li>->才会被选中->否则不会被选中
$(‘div:first’)选择所有div标签中的第一个。
nth-child(index)与：eq(index)的区别

index从1开始 index从0开始
$(‘div:nth-child(1)’) 选取所有<div>中是其父标签的第一个子标签的div；
->每个<div>有父标签&父标签第i个子标签必须是<div>->才会被选中
$(‘div:eq(0)’);选取第一个div；

js模拟jq点击

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;}
div{
    width:300px;
    height: 300px;
    background: #eee;
}
</style>
</head>
<body>
    <div id="box">点我</div>
</body>
<script>
(function(){
   function $(targetID){
        var str=targetID.substring(0,1);//截取第0个元素1个
        if (str=='#') {
            var ID=targetID.replace(/#/g,'')
            var obj=document.getElementById(ID);
            obj.click=function(fn){
                this.onclick=fn;
            }
            return obj;
        }
   }
   window.Jquery=$;//对外公开接口
   window.$=window.Jquery;//对外公开接口
})();
Jquery('#box').click(function(){
    alert('box1');
});
$('#box').click(function(){
    alert('box2');
});
</script>
</html>