jQuery

其是对javascript封装的一个框架包
简化对javascript的操作
javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码足够少



特点：
①   语法简练、语义易懂、学习快速、丰富文档。 
②   jQuery 是一个轻量级的脚本，其代码非常小巧 
③   jQuery 支持 CSS1~CSS3 定义的属性和选择器 
④   jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。 
⑤   能将 JavaScript 脚本与 HTML 源代码完全分离，便于后期编辑和维护。 
⑥   插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能  

3. 出现的年代
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.2，官方地址为：http://jquery.com/，中文地址为 http://jquery.org.cn/。 
4. 其他相关的javascript框架包
Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery

Prototype：与面向对象的原型继承关键字一致，该框架的特点是功能扩展比较容易。
YUI:  yahoo  user  interface 雅虎用户接口，该框架可以实现各种页面布局效果。
    例如效果之一：标签切换对应内容

Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
     该框架可以实现效果之一：页面不同区域进行拖拽效果。
    该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
    
jQuery：javascript+query  
    使用前期，jquery侧重快速找到页面上各种节点。
    后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。

 选择器
在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1. 基本选择器
$(‘#id属性值’)  ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’)  class属性值选择器
$(‘*’)     通配符选择器
$(‘s1,s2,s3’)联合选择器

层次选择器
2.1 $(s1  s2) [父子]
派生选择器：在s1内部获得全部的s2节点(不考虑层次)
$(“div  span”)
<div>
<span></span>
<p>
<span></span>
</p>
</div>
<span></span>

2.2 $(s1 > s2) [父子]
直接子元素选择器:在s1内部获得s2的子元素节点
$(“div > span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>

2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(“div + span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>

2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(“div ~ span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>


3. 并且(过滤)选择器:

:first  $("tr:first")
:last
:not
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:gt(index)
:header  匹配h1...h6标题元素


内容过滤选择器
4.1 :contains(内容)
包含内容选择器，获得节点内部必须通过标签包含指定的内容
$(“div:contains(beijing)”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
4.2 :empty
获得空元素(内部没有任何元素/文本(空) )节点对象
$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>

4.3 :has(选择器)
内部包含指定元素的选择器
    $(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div>
<div><span class=”apple”></span></div>

4.4 :parent
寻找的节点必须作为父元素节点存在
$(“div:parent”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>



5. 表单域选中选择器
复选框、单选按钮、下拉列表

$(:checked) : 过滤出被选中的复选框,单选按钮
$("input:lt(4):checked");

$(:selcted) 获得下拉列表的选中情况


四. 属性操作
<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom” 
    address=”beijing”
/>
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);

jquery方式操作属性(attribute)：
$().attr(属性名称);         //获得属性信息值
$().attr(属性名称，值);   //设置属性的信息
$().removeAttr(属性名称);   //删除属性
$().attr(json对象);       //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn);      //通过fn函数执行的return返回值对属性进行赋值





五. 快捷操作
1. class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class’);  //删除class的属性

$().addClass(值);        //给class属性追加信息值
$().removeClass(值); //删除class属性中的某个信息值
$().toggleClass(值); //开关效果，有就删除，没有就添加



标签包含内容操作
<div>hello<span>world</span></div>

javascript操作：
dvnode.innerHTML 获得div包含的信息
dvnode.innerHTML = XXX；  设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)

jquery操作：
$().html();         //获得节点包含的信息
$().html(信息);   //设置节点包含的内容
    $().text();         //获得节点包含的“文本字符串信息”内容
    $().text(信息);       //设置节点包含的内容(有html标签就把“><”符号变为符号实体)

    
1 html() 和 text()方法的区别：
①   获取内容
前者可以获取html标签 和 普通字符串内容
后者只获取普通字符串内容
②   设置内容    
前者可以设置html标签 和 普通字符串内容
后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----&lt;  >----&gt;   空格------&nbsp;
以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致。
3. css样式操作
$().css(name，value);    //设置
$().css(name);          //获取
$().css(json对象);        //同时修改多个css样式
3.1 css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 复合属性样式需要拆分为"具体样式"才可以操作
例如：     background 需要拆分为  background-color background-image 等进行操作
    border： border-left-style  border-left-width  border-left-color 等
    margin： margin-left  margin-top 等

    
value属性快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);

快捷操作：
$().val();          //获得value属性值
$().val(信息值);   //设置value属性的值
该val方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。

复选框操作
全选、反选、全不选
$().attr(‘checked’,true);       //设置复选框选中
$().attr(‘checked’,false);      //取消复选框选中
$().attr(‘checked’);            //判断复选框选中情况，返回布尔值


总结：
1. 属性操作
$().attr(name)
$().attr(name,value)
$().attr(json对象);
$().removeAttr(name)
$().attr(name,function)
2. 快捷操作
a)  class属性值的操作
$().addClass(value)
$().removeClass(value)
$().toggleClass(value)
b) 包含内容操作
$().html()  $().html(value)
$().text()   $().text(value)
c) css样式操作
$().css(name,value)
$().css(name)
$().css(json对象)
d)  val()
$().val()
$().val(value)
e)  复选框选中操作
$().attr(‘checked’,true);
$().attr(‘checked’,false);

• jQuery和DOM关系

$符号的由来
$(‘div’)  $(‘.apple’)  $(‘*’)等等。
$符号就是一个函数，函数名称为”$”符号而已。也可以使用jQuery符号。



var jQuery = (function(selctor,context){
    return new jQuery.fn.init(selector,context);
}
    return window.jQuery = window.$ = jQuery
);

使用jquery过程中用到的$符号，其在jquer框架内部体现为是函数，其和jQuery关键字互为别名

jquery对象 与 dom对象关系
jquery对象：$(‘li’)  $(‘.apple’) 等选择器使用返回的信息就是jquery对象
dom对象： document.getElementById()  
           document.getElementsByTagName();

           
1. jquery对象 和 dom对象 互相调用对方的成员
 jquery对象 与 dom对象 互相调用对方成员失败了
原因：它们不是平等关系，导致其成员也有层次划分。
jquery对象 是 包含 dom对象的

2.jquery对象 如何封装的dom对象
dom对象 和jquery对象做合并，dom对象 是jquery对象 的数组组成部分。

3. jquery对象 和 dom对象 的转化
3.1 jquery对象-----》dom对象： $()[下标]
$("#apple")[1].style.backgroundColor = "red";

3.2 dom对象-----》jquery对象：$(dom对象)
var div = document.getElementById("apple");
$(div).css("background-color","green");

var lis = document.getElementsByTagName("li");
$(lis[2]).css('color','red');

• jquery框架对象分析

jquery框架对象类型：jquery对象  和  $对象
① jquery对象就是各种选择器创建出来的对象
② $对象就是函数对象
1. jquery对象
$("#apple").css()/attr()/html()/text()/addClass  等方法可以调用


2. $函数对象
    $函数对象可以调用的许多成员也是通过extend复制继承过来的
    $.get()  $.post()   $.ajax()

上无论是jquery对象 还是 $对象，他们98%以上的成员都是通过各自的extend复制继承过来的。


遍历方法
each()方法：
$.each(数组/对象,function处理);  //$对象      调用的
$(选择器).each(function处理);   //jquery对象  调用的

//each遍历对象

var cat = {name:"kitty",age:22,run:function(){console.log("running!")}};

jQuery.each(cat,function(k,v){
    console.log(k+'----'+v);
});

//2.遍历对象
var colors = ['red','blue','green'];
jQuery.each(colors,function(i,val){
    console.log(i + '----' + val);
});

/*
遍历jQuery对象
$('li').each(function(i dom对象下标索引,val 代表具体的dom对象){});

    this代表遍历出来的每个DOM对象
*/

$('li').each(function(i,val){
    console.log(i + '----' + val+'+++'+ this);
});

• 加载事件

javascript的加载事件：
    <body  onload = “函数()”>
    window.onload = function(){}
1. jquery加载事件实现
① $(document).ready(function处理);
② $().ready(function处理);
③ $(function处理);  对第一种加载的封装而已



2.jquery加载事件与传统加载事件的区别

2.1 设置个数
在同一个请求里边，jquery的可以设置多个，而传统方式只能设置一个
    传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者。
    jquery方式加载事件是把每个加载事件都存入一个数组里边，成为数组的元素，执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。

2.2 执行时机不一样
    传统方式加载事件，是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
    jquery方式加载事件，只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。


3.jquery加载事件原理
    jquery加载事件是对DOMContentLoaded的封装(而非onload)


八. 普通事件操作
① dom1级事件设置
    <input  type=”text”  onclick=”过程性代码” value=’tom’ />
    <input  type=”text”  onclick=”函数()” />
    itnode.onclick = function(){}
    itnode.onclick = 函数;
② dom2级事件设置
    itnode.addEventListener(类型，处理，事件流);
    itnode.removeEventListener(类型，处理，事件流);
    node.attachEvent();
    node.detachEvent();
③ jquery事件设置
    $().事件类型(事件处理函数fn);     //设置事件
    $().事件类型();                     //触发事件执行
    事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等    
例如：$(‘div’).click(function(){事件触发过程this});
（该方式事件函数内部this都代表jquery对象内部的dom节点对象）。
jquery调用的大部分方法里边的this关键字都代表其对应的dom对象。


九. jquery对文档的操作
通过jquery方式实现页面各种节点的追加、修改、删除、复制等操作
1. 节点追加
1.1 父子关系追加
主动:append(content)
prepend(content)
    

被动:
appendTo(content)
prependTo(content)



1.<input onclick="...this">
    
2.<input onclick="func()">
    function func(){this}
3.itnode.onclick = func;
function func(){this}
4.itnode.onclick = function (){this}

只有第二种情况this代表window,其它三种都是代表input元素节点对象

兄弟关系追加:
主动:
after(content)
before(content)

被动:
insertAfter(content)
insertBefore(content)


$("shu li:last").after("<li>xxx</li>");
$("#fei").before("<li>aaaa</li>");

2.节点替换

replaceWith(content)
$('select').replaceWith('content');

replaceAll(selector);
$('content').replaceAll('select')

3.节点删除
//删除父元素的全部子元素
$('#shu').empty();

$("#wu li:first,#gai").remove();

4.复制节点
clone([false]); //只复制对象的节点
clone([true]);  //复制元素节点及其身上的对应事件;



十. 属性选择器使用

[attribute] : $("div[id]"); 

[attribute=value] : $("input[name=selector]");

[attribute!=value]

[attribute^=value],以value值开始的元素:$("input[name^="news"]")

[attribute$=value],以value值结尾的元素:$("input[name$="news"]")
    
    
[attribute*=value],包含元素:$("input[name*="news"]")

[selector1][selector2][selctor3]:并且选择器,需要同时满足多个条件时使用
$["input[id][name$='man']"]

• 事件绑定

 事件绑定
jquery事件的简单操作：
    $().事件类型(function事件处理);
    $().事件类型();

1.1 jquery事件绑定
    $().bind(事件类型，function事件处理);
    $().bind(类型1 类型2 类型3，事件处理);   //给许多不同类型的事件绑定同一个处理
    $().bind(json对象);       //同时绑定多个不同类型的事件
    (事件类型：click  mouseover  mouseout  focus  blur 等等)
    事件处理：有名函数、匿名函数

    
    1.2 取消事件绑定
    ① $().unbind();                     //取消全部事件
    ② $().unbind(事件类型);         //取消指定类型的事件
    ③ $().unbind(事件类型，处理);      //取消指定类型的指定处理事件
注意：第③种取消事件绑定，事件处理必须是有名函数。



事件绑定是丰富事件操作的形式而已。

从dom2级事件操作开始，同一个对象可以绑定多个同类型的事件，具体如下：
dvnode.addEventListener(‘click’,fn);
dvnode.addEventListener(‘click’,fn);
$(‘div’).click(function);
$(‘div’).click(function);


2. 事件委派
live(type,[data],fn) bind()   //后续添加的元素也会有与当前兄弟节点一样的事件

die([type],func) //与live反向,绑定的事件会移除 unbind()


3. 事件对象、阻止浏览器默认动作、阻止事件冒泡
$().bind(‘click’,function(evt){ window.event });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容处理。

阻止浏览器默认动作、阻止事件冒泡：
    dom2级浏览器默认动作阻止：
        事件对象.preventDefault();    主流浏览器
        事件对象.returnValue = false;   IE浏览器
    dom2级事件冒泡阻止：
        事件对象.stopPropagation();    主流浏览器
        事件对象.cancelBubule = true;   IE浏览器
    
在jquery里边：
    $().bind(‘click’,function(evt){
        evt.preventDefault();
        evt.stopPropagation();
    });
    preventDefault()方法是jquery的方法，名字与js底层代码的名字一致而已。
                 并且其有做浏览器兼容处理
    stopPropagation()方法是jquery的方法，名字与js底层代码的名字一致。

• 动画效果

1.基本动画
show(speed,[callback])
hide(speed,[callback])
toggle()
toggle(switch)
toggle(speed,[callback]) //切换元素的可见状态

2.垂直动画
slideUp()
slideDown()
slideToggle()

3.颜色渐变动画
fadeIn(speed,[callback])
fadeOut(speed,[callback])
fadeTo(speed,opacity,[callback])
fadeToggle(speed,[callback])

• jquery封装的ajax

具体操作：
$.get(url  [,data]  [,fn回调函数]   [, dataType]);
    data:给服务器传递的数据，请求字符串 、json对象 都可以设置
    fn：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理
    dataType：服务器返回数据类型，html、text、xml、json
    (该ajax是异步的get方式请求)

$.post(url[,data][,fn回调函数][, dataType]);
    该方法与$.get()方法使用完全一致，不同的是其为post方式请求

$.ajax({  //json对象
        url:请求地址,
        data:给服务器传递的数据,
        dataType:数据从服务器返回格式html、text、xml、json
        type:get/post请求方式
        success:function(){}  ajax成功请求后的回调函数，可以做后续处理使用
        async:[true]异步/false同步，
        cache:[true]缓存/false不缓存,
}
)

• jquery插件开发

什么是jquery插件
jquery框架本身给我们提供了一些方法供使用。但是方法的数目是有限的，其不能任意满足我们对各种功能的需求。那么我们自己可以来给jquery框架开发、扩展一些额外功能方法。

开发、扩展jquery框架额外方法的过程就是“插件开发”



2. 两种形式丰富方法
①  给$.fn(给jquery对象)丰富
    $.fn.成员 = 值;
    $.fn.extend(json对象);
②  给$(给$对象)丰富
    $.成员 = 值;
    $.extend(json对象);