jquery 笔记

与其他库的对比：
1:prototype—2:Dojo—3:YUI—4:Ext Js—5:jQuery

一： 简介

jQuery 是Prototype 之后又一个优秀的JavaScript 库，
John Resig 创建于2006 年1 月的开源项目。
语法简洁，跨平台的兼容性，极大的简化的JS开发人员遍历HTML 文档、操作DOM、处理
事件、执行动画和开发Ajax。

jQuery强调的理念：写得少，做得多<====>Write less,Do more

jQuery的优势

1：轻量级—
2：强大的选择器—
3：出色的DOM操作的封装—
4：可靠的事件处理机制—
5：完善的ajax处理—
6：不污染顶级变量—
7：出色的浏览器兼容—
8：链式操作方式—
9：隐式迭代—
10：行为层和结构层分离—
11：丰富的插件机制—
12：文档完善且是开源的

jQuery类库说明：
jquery-1.7.2.js（114k）无压缩，用于测试，学习，开发
jquery-1.7.2.min.js（54k/18k）迷你版|主要用于产品和项目

<!—引入jquery库–>

<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>

$(document).ready(function(){})和window.onload作用类似  //加载页面完之后
区别：两个都输出                    前面个会被覆盖
简写：$(function(){})                无
注意：$(function(){})==jQuery(function(){});

#号(代表id) 和 .号(代表class)============
<div id="menu">
<div class="has_children">
   <a>1.1-JavaScript和JavaScript库</a>
   <a>1.2-加入jQuery</a>
</div>
#menu {    //就是这样拿到id为menu的
   width:300px;
}
.has_childred{ //这样那class为has_childred的}
div a{ //可操作a标签的样式 }

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
  $(".has_children").click(function(){
     $(this).addClass("highlight")         //为当前元素增加highlight类(addClass是添加样式)
            .children("a").show().end()    //将子节点的a元素显示出来并重新定位到上次操作的元素
            .siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
            .children("a").hide();         //将兄弟元素下的a元素隐藏
});
});
</script>

1.4 ====jQuery对象和DOM对象
$('#foo').html();  //获取id为foo的元素内的html代码 html()是jQuery中的方法
===上同等下
document.getElementById('foo').innerHTML

1.4.3>jQuery和DOM对象之间的转化
(1) jQuery对象转化为DOM 对象:有两种方法  
       var $cr = ${"#cr"} | ${'.cr'};   //通过id或class得到jQuery对象
方法一:var cr = $cr[0];      //DOM对象
方法二:var cr = $cr.get(0);  //DOM对象   如果是class，下标可以大于0

(2) DOM对象转化为jQuery 对象--语法：$(DOM对象)
var cr = document.getElementById("cr")  //通过id得到DOM对象
var $cr = $(cr);


1.5======解决jQuery和其它库的冲突 conflict冲突
          冲突原因：导入其他库在jQuery库之前
<!-- 先引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 后引入 jQuery -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

(1)jQuery.noConflict();//运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

jQuery(function(){
	jQuery('p').click(function(){
		alert(jQuery(this).text());
	});
});
(2)自定义快捷方式：
var $j = jQuery.noConflict();//自定义一个比较短快捷方式
$j(function(){ //使用jQuery
    $j("p").click(function(){
        alert( $j(this).text());
    });
});
(3)任然可以继续使用$
jQuery.noConflict();    //将变量$的[控制权让渡]给prototype.js
jQuery(function($){ //使用jQuery
    $("p").click(function(){
        alert( $(this).text() );
    });
});
(4)通过匿名函数来实现：
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){     //定义匿名函数并设置形参为$
    $(function(){  //匿名函数内部的$均为jQuery
        $("p").click(function(){ //继续使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery); //执行匿名函数且传递实参jQuery

2.jQuery库在其他库之前导入
直接使用jQuery，无需jQuery.noConflict();
=======================================================================上为第一天总结

--------------------------------------------jQuery选择器----(基本)(层次)(过滤)------
jquery选择器是什么？---就是找到元素添加行为
Jquery 选择器完全继承了css 的风格，利用它我们可以很快的找到dom，然后为其添加相应的行为。
jquery选择器和css选择器对比：
css---找到元素后添加样式
jquery---找到元素后是添加行为

2.2jQuery选择器的优势：
(1)写法简单：$(#ID)用来代替document.getElementById()
(2)支持css1到css3的全部样式
(3)完善的处理机制


一：基本选择器：(#)(.)(E)(*)(组合)
#id           根据指定的id匹配一个元素       $(#text)取id为text的元素
.class           类名选取一个元素            $(.last)选取所有class为last的元素
Element         根据元素名匹配元素            $(“p”)选取所有的 p标签
*               匹配所有的元素                $(“*”)选取所有的元素
Selector1,selector2, ……selectorN----将每一个匹配的元素合并并返回-----$(“div,span,p.myclass”)选取所有的<div>、<span>和class为myclass的p标签
注意：id只能用一次，class可以多次使用


二：层次选择器:("a b")(>)(+)(~)
$("A B")---选取A元素里的!所有!B元素（后代元素:孙子也算，呵呵）--示例:--$("div span")选取div下的所有span元素
$("parent >child")---选取parent下的所有!子元素!(不算孙子)---$("div>span")选取div下的span!子元素!
$("prev+next")---紧接在prev后的next元素----$(".one+div")选取class为one的下一个<div>元素
$("prev~siblings兄弟")---选取prev元素!之后!的所有siblings元素---$("#two~div")选取id为two后的所有div元素


三：过滤选择器--(基本)(内容)(可见性)(属性)(子元素)(表单对象属性)
基本过滤选择器--内容过滤选择器--可见性过滤器--属性过滤器--子元素过滤器--表单对象属性过滤器
(1)基本过滤选择器:
:first--第一个元素--$("div:first")选取所有<div>标签第一个<div>标签   
:last--最后一个元素--$("div:last")选取所有<div>标签最后<div>标签
:not(selector)--除了指定选择器的其他元素--$("input:not(.myClass)")选择class不是myClass的<input>元素
:even--索引为偶数:0开始--$("input:even")选取索引是偶数的<input>元素
:odd---索引为奇数:0开始--$("input:odd")选取索引是奇数的<input>元素
:eq(index)--索引=index的元素---$("input:eq(1)")选取索引等于1的<input>元素
:gt(index)--索引>index的元素---$("input:gt(1)")选取索引大于1的<input>元素
:lt(index)--索引<index的元素---$("input:lt(1)")选取索引小于1的<input>元素
:header--选取所有标题(h1,h2,h3)--$(":hander")选取网页中所有的<h1>,<h2>,<h3>..
:animated--当前正在执行动画的所有元素--$("div:animated")选取正在执行动画的<div>元素
例>: function animateIt() {   //当前正在执行动画的所有元素
	    $("#mover").slideToggle(3000|"slow|fast|normal", animateIt);  //slow慢   fast快  normal正常
	}
	animateIt();
	$(':animated').css("background","blue");

(2)内容过滤选择器:-----
:contains(text)--选取含有文本内容为"text"的元素--$("div:contains('我')")选取含有文本"我"的<div>元素
:empty--不包含子元素或文本的空元素---$("div:empty")选取不包含子元素(不含有文本)的<div>元素
:has(selector)--含有选择器所匹配元素的元素--$(div:has('p'))选取含有<p>元素的<div>元素
:parent--选取含有子元素或者文本的元素---$("div:parent")选取含有子元素(文本元素)的<div>元素

(3)可见性过滤器:
:hidden---选取所有隐藏的元素---$(:hidden)选取所有隐藏的元素。包括<input type="hidden"/>,
<div style="display:none";>和<div style="visibility:hidden";>如果只想选取<input>--使用$("input:hidden")

:visible--选取所有可见的元素---$("div:visible")选取所有可见的<div>元素

(4)属性过滤器--(=)(!=)(^=)($=)(*=)(复合)通过元素的属性来获取相应的元素       $("input[^name]")
[attribute]--选取拥有此属性的元素---$("div[id]")选取拥有属性id的div标签
[attribute=value]--属性值为value的元素---$("div[class=test]")选取属性class为"test"的<div>元素
[attribute!=value]--属性值不等于value的元素---$("div[class!=test]")选取属性class不等于"test"的<div>元素
                                                              注意：没有属性class的<div>元素也会被选取
[attribute^=value]--属性值以value开始的元素---$("div[class^=t]")选取属性class以"t"开始的<div>元素
[attribute$=value]--属性值以value结尾的元素---$("div[class$=t]")选取属性class以"t"结尾的<div>元素
[attribute*=value]--属性值!包含!有value的元素---$("div[class*=test]")选取属性class!包含!有"test"的<div>元素
[selector1][selector2][selectorN]--用属性选择器合并成一个复合的属性选择器
                $("div[id][class$='t']")选取拥有属性id,并且属性class以"t"结尾的<div>元素

$('div[class]').each(function(){//输出所有div标签有class属性的的文本值
	alert(this.innerText);
}); 

(5)子元素过滤器:----
:nth-child(index/even/odd/equation)--选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
         :eq(index)匹配一个(从0开始)，而:nth-child将每个父元素匹配子元素(从1开始)
   例：$('div.one:nth-child(2)').css("background","blue");//one:nth中间没分开：选取class=one的第二个div
       $('div.one :nth-child(2)').css("background","blue");//one :nth中间分开表示：匹配每个div父元素的子元素第2个
:first-child--选取每个父元素的第一个子元素-----:first只返回单个元素，而first-child选择将为每个父元素匹配第1个子元素。例：$("ul li:first-child")选取每个<ul>中第一个<li>元素
:last-child--选取每个父元素的最后一个子元素-----:last只返回单个元素，而last-child选择将为每个父元素匹配最后1个子元素  例：$("ul li:last-child")选取每个<ul>中最后一个<li>元素
:only-child--匹配只包含!1个子元素!的父元素---$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素

(6)表单对象属性过滤器--:enabled--:disabled--:checked--selected
:enabled---选取所有可用元素--$("#form :enabled")选取id为form的表单的--所有可用元素
:disabled--选取所有不可用元素$("#form :disabled")选取id为form的表单的--所有不可用元素
:checked---选取所有选中的元素(单选框，复选框)--$("input:checked"):选取所有选中的<input>元素
:selected--选取所有选中的!选项!元素----$("select:selected"):选取所有选中的选项元素

选择器中注意事项----
选择器中含有"." "#" "(" "]"等特殊字符------要转译 通过\\
例如:<div id=’id#d’></div>
     <div id=’id[1]’></div>
$("#id#d")    $("#id[1]")这些写法是错误的。----------
$("#id\\#d")  $("#id\\[1\\]") 正确

--------------------------------------------第三章总结---jQuery的DOM操作-----------------------
DOM是一种与[浏览器]、[平台]和[语言]无关的的接口
DOM操作分为三种: (DOM-core)----(HTML-DOM)----(CSS-DOM)----
(DOM-core)----任何一种支持DOM的程序设计语言都可以使用它--处理网页--处理XML
getElementById(),getElementsByTagName(),getAttribute(),setAttribute()是DOM Core的组成部分

(HTML-DOM)----代码比较简短，只能用来处理Web文档

(CSS-DOM)----主要作用是获取和设置style对象的各种属性

jQuery的DOM操作
查--创--插--删--复制--替换--包裹节点------属性操作--样式操作--设置和获取HTML，文本的值--遍历节点

1:查-- attr()方法获取各种属性--$("ul li:eq(1)").attr('title');
2:创-- var v = $("<li title='香蕉'>香蕉</li>");---$("ul").append(v);
3:插-- 
      A.append(B)  A添加B(内部后面)
      A.appendTo(B) 将A添加到B中(内部后面)

      A.prepend(B)  A添加B(内部前面)
      A.prependTo(B) 将A添加到B中(内部前面)
      
      A.after(B)  B.insertAfter(A)   插入到外部后面
      A.before(B) B.insertBefore(A)  插入到外部前面

4:删--
remove()--删除谁返回谁--
empty()--删除了但位置还在
例外：detach()分离--也可以删除元素

5:复制--clone() 
clone(true)---用参数true的--克隆出来的还可以克隆

6:替换--replaceWith()--replaceAll()
A.replaceWith(B) 将A替换成B---$('p').replaceWith('<strong>你喜欢的car是：</strong>');
A.replaceAll(B)  将B替换成A---$('<strong>你喜欢的car是sss：</strong>').replaceAll('p');

7:包裹--wrap()同wrapAll某个节点用其他元素包裹起来---wrapInner() 将其他标签包裹起来
$('p').wrap('<div id="ddd"></div>');//将p元素被div元素包裹起来
$('p').wrapInner('<div>ddddd</div>');//p标签 包裹 div

8:属性操作---attr()来获取或设置属性，removeAttr来删除属性
var $attr = $('p').attr('title','我的天');//设置------alert($attr.attr('title'));//获值
alert( $('p').attr('title'));  // 标题是学习
var $attr = $('p').removeAttr('title');---alert( $('p').attr('title'));//undefined

9:样式操作
1.获取或设置样式
$('p').attr('class','r'); //它是将原来的class替换为新的class，并非追加

2.追加样式--addClass()--$(‘p’).addClass(‘r’);

3.移除样式--带参和不带参--$('p').removeClass('r');
移除多个样式：$('p').removeClass('r c');//移除class=r c 两个样式
$('p').removeClass();//移除<p>标签下所有的class

４．切换样式--toggleClass()--$('p').toggleClass('c');

5:判断样式--hasClass()
$('p').hasClass('c')等价于：$('p').is('.c')

10--设置和获取HTML、文本的值--
html()--text()---val()---

11:遍历节点---
children---子元素
find()----后代元素
next()----下一个元素(同级)
prev()----前一个元素(同级)
siblings()----前后紧临同级元素
closest()-----取得最近的匹配元素
例: $(document).bind("click", function (e) {  //绑定一事件
	$(e.target).closest("li").css("color","red");  //closest 最靠紧的  
    })

我认为比较经典的：图片提示效果：
几个注意的地方:
设置样式：#xx{
     position:absolute;  //这是主要的一行
}
 var tool = "<div id='xx'><img src='"+this.href+"'alt='产品预览图'/></div>";  //创建一节点
$("body").append(tool);  


-----------------------------------------第四章jQuery中的事件和动画-------------------------------------
事件：
1:执行时机：
window.onload(function(){})方法就要等待页面!所有的元素!都加载完毕才执行Er，(相对慢)
$(document).ready()在!DOM树就绪!时就可以调用js代码  (快)

2:事件绑定--bind()
bind(type,[data],fn)
type(String)--事件类型--如click
fn:(Function)--处理函数
data(object)--(可选)作为event.data属性值传递给事件对象的额外数据对象

3:合成事件--hover()--toggle()
hover(enter,leave);--两个函数
    光标移到(enter)元素上就出发第一个函数，移开(leave)触发函数2
toggle(fn1,fn2,fn3,fn4….fnN);--鼠标连续点击。
    第一次点击调用fn1...第N次点击调用fnN

4:事件冒泡--小到大----事件捕获(jQuery不支持)--大到小
  阻止冒泡--event.stopPropagation();

  阻止默认事件：return false;

5:事件对象的!属性!。
①：event.type---事件类型
②：event.target--事件目标
③：event.pageX和event.pageY--获取光标相对于页面的X坐标和Y坐标
④：event.which---单击事件中获取鼠标的左=1、中=2、右=3键

6:移除事件---unbind([type][,data])--1参数是事件类型，2参数是将要移除的函数名
①：unbind()没有参数时：删除所有绑定的事件。
②：unbind(type)---只提供了事件类型作为参数，则值删除该类型的绑定事件
③：unbind(type,data)--删除指定类型的指定函数。

6-1--只执行一次的函数-
---one()----语法与bind()一样的。

7:模拟操作--
①：自动触发--trigger()
    $("#btn").trigger('click');--等价于--$('#btn').click();
②：触发自定义函数
    $('#btn').bind('mclick',function(e){
        $('.test').append("<br>触发自定义函数");
    });
    $('#btn').trigger("mclick");
③：触发自定义函数之!参数传递!---语法trigger(type[,data]);
例：<button id="btn">点击我</button> <div class="test"></div>
    $('#btn').bind('mclick',function(e,p1,p2){
        $('.test').append("<br>"+p1+";"+p2);
    });
    $('#btn').trigger("mclick",['呵呵','触发自定义函数']);

④：执行默认动作--triggerHandler()
$('input').trigger('focus')---触发了绑定的focus事件，并执行了浏览器默认操作
$('input').triggerHandler('focus')---触发了绑定的focus事件，不执行...  

⑤：绑定多个事件类型
        $('div').bind('mouseover mouseout',function(){
		$(this).toggleClass("over");
	});
⑥：添加事件命名空间--如sss
$("div").bind("click.sss",function(){//div绑定单击事件
$("div").unbind(".plugin"); //根据命名空间，删除事件

---------jQuery的动画--------------------
1:show()--hide()--不带参时:相当于$(E).css('display',none/block/inline);-- 不会有动画

2.fadeIn() 和fadeOut()方法（fade褪色）
作用：修改元素对象的不透明度
  fadeOut()--在在指定一段时间内降低元素的不透明度,直到元素完全消失
  fadeIn()--相反
  fadeIn(3000) 和fadeOut(2000)也可以加参数，表示动画的速度

3.slideUp和slideDown方法--改变元素的高度--可设参数--slideUp(1000)
  slideUp()：那个调用它的元素从 下至上收起（隐藏）；
  slideDown：那个调用它的元素从 上到下的展开（显示）；

自定义动画的方法---animate(params,speed,callbackFn)
①params:一个包含样式属性及值的映射，如--{property1:'value1',property2:'value2',...}
②speed：(可选) 速度
③callback：(可选)在动画完成时执行的函数

简单动画--$(this).animate({left:'500px'},3000);
复合动画--$(this).animate({left:'500px',height:'200px'},3000); //一起变化
多重动画--$(this).animate({left:'500px'},3000).animate({height:'200px'},3000);  //两步变化
综合动画--$(this).css({'opacity':'0.5'});//设置不透明度
	  $(this).animate({left:'500px',height:'200px',opacity:'1'},3000)
		 .animate({top:'200px',width:'200px'},3000)
		 .fadeOut('slow');
动画回调函数--$(this).css({'opacity':'0.5'});//设置不透明度
              $(this).animate({left:'500px',height:'200px',opacity:'1'},3000)
              .animate({top:'200px',width:'200px'},3000, function(){
                  $(this).css("border","5px solid blue")
               });

JQuery的Ajax用到的技术：
     jQuery是一种javascript框架，是对javascript的一种轻量级的封装，容易理解Ajax是一种由xml+javascript组合起来的
     
     
     Ajax的用到的方法：
        load()方法
	$.get()和$.post()方法
	$getScript()和$getJson()
	$.ajax()方法
	    Type：“post”
	    url ：“提交的路径”
	    dataType：“text”
	    data：提交的数据
	    timeout：设置超时。
	    success：function
	    error：function
	serialize()方法
	serializeArray()方法
	$param()

	成功的ajax成功还失败事件流。
	  ajaxStart--beforeSend--ajaxSend--success--ajaxSuccess--complete--ajaxComplete--ajaxStop 成功的
	                                   error     ajaxError                                    失败的
  Ajax 的核心是 Request+Javascript+Xml
  Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据


1 ajax是什么东西
ajax 即“Asynchronous JavaScript and XML”（异步JavaScript和XML)是一种技术的称呼。一种异步请求技术.可实现动态刷新

 ajax的优势：1.不需要插件支持
              2.异步刷新，界面的局部刷新。
                解决页面更新比较慢，对用户不友好的问题，局部刷新，只刷新用户改变的部分，
		提高页面的反应速度，提高用户体验。
                 
缺点：①不适合大量或复杂数据的提交。
      ②破坏了浏览器的前进后退功能。

核心靠浏览器httpRequest对象，

ajax程序的处理过程：
1  创建(XMLHttpRequest)对象,不同的浏览器创建方式不同。（IE和非IE）IE(ActivtXObject),非IE(new XMLHttpRequest()对象)
2：发送请求，调用XMLHttpRequest的open()和send()方法
  ① xmlhttp_request.open('GET'，URL,true)
     第一个参数：HTTP请求方式--get，post
     第二个参数：请求页面的URL
     第三个参数：请求是否为异步，如果async设置为true，javascript函数将继续执行，不等待服务器响应。
  ② xmlhttp_request.send(null);

3：服务器响应（回调函数）
   ①告诉http请求对象用哪一个函数处理这个响应，对象onreadystatechange属性设置为要使用的javascript
    的函数名：xmlhttp_request.onreadystatechange-FunctionName;
    FunctionName是用js创建函数名，也可直接将js代码创建在onreadystatechange之后，
   ② 监察请求的状态，xmlHttpRequest提供了readyState属性来对服务器响应进行判断。
     readyState的取值如下：0(未初始化)1(正在装载)2(装载完毕)3(交互中)4(完成)
     所以只有当readyState=4的时，函数才可以处理响应。具体代码如下：
     接着，函数会检查http服务器响应的状态值。当http服务器响应值为200是，表示状态正常。

4：返回数据两种格式：text和xml格式


由于Jquery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false就可以了.