W3C-jQuery整理

又重新把W3C里关于jQuery的部分学习了一下，之前有很多东西模棱两可，这下又巩固了。所以说，基础真的很重要啊。基础+实践

W3C整理jQuery相关

$(document).ready(function(){

});===$.ready(function(){

});===$(function(){

});

他的作用类似于传统JavaScript中的window.onload方法但又有所区别：

1、window.onload必须等到页面内包括图片在内的所有元素加载完毕后才能执行

   $(document).ready(function(){});是DOM结构绘制完毕后就可以执行，不用等加载完毕

2、Window.onload不能同时编写多个，如果有多个，只会执行最后一个

   $(document).ready(function(){});可以同时编写多个，并且都可以得到执行

===========--------------------------------------------------

jQuery的一些用法：

1、$("p").css("color","red");//改变HTML元素的css属性

2、$("button").click(function(){});//事件函数，当按钮被点击时激发

3、$("#b").dblclick(function(){alert("double");})//双击事件

4、$(“#b”).focus(function(){});//焦点事件

5、$(“#b”).mouseover(function(){});//鼠标悬停事件

6、$(“#b”).hide();//隐藏==可以设置隐藏用的时间例如hide(1000)括号里还可以加上隐藏后执行的方法。

7、$(“#b”).show();//显示

8、$(“#b”).toggle();//用这个方法来切换hide和show方法

9、$(“#b”).fadeIn();//淡入隐藏，用法和hide差不多

10、$(“#b”).fadeOut();//淡出显示，用法和show差不多

11、$(“#b”).fadeToggle();//切换显示淡入淡出用法和toggle差不多

12、$(“#b”).fadeTO();//允许渐变为给定的不透明度介于0和1，里面可以由三个值，第一个是速度，第二个是达到的透明度，第三个是结束后执行的方法

13、$(“#b”).slideDown();//向下滑动元素，用法和hide差不多

14、$(“#b”).slideUp();//向上滑动元素，方法和hide差不多

15、$(“#b”).slideToggle();//切换上滑和下滑，方法和toggle差不多

16、$(“#b”).animate({left:’250px’},speed,callback);//动画,里面第一个参数是动画要完成的动作，第二个是速度，第三个是动画完成后执行的函数默认的，所有HTML元素都有一个静态位置，且无法移动。如果需要对位置进行操作，需要首先把元素的position设置为relative、absolute或fixed

17、Animate还可以同时使用多个属性，比如$(“#b”).animate({

     Left:’250px’,

     Opacity:’0.5’,

     Height:’150px’,//也可以使用‘+=150px’

     Width:’150px’});

Animate几乎可以操作所有css属性，不过需要记住一件重要的事情：当使用animate时必须使用camel标记法书写所有属性名，比如使用paddingLeft而不是padding-left使用marginRight而不是margin-right等。同时色彩动画并不包含在核心jQuery库中。如果要生成颜色动画需要从jQuery。Com里下载color Animations插件

18、animate可以把属性的动画值设定为show、hide、toggle例如$(“#b”).animate({height:’toggle’});

19、Animate还可以使用动画的队列功能，执行不同的动画效果

$("#b").dblclick(function(){
    vardiv=$("#b");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
})

20、(“#b”).stop();//停止动画，stop里有两个参数，第一个是否应该清除动画队列，第二个参数是是否立即完成当前对话，两个默认都是false

21、Callback，在动画执行后执行callback函数，例如(“#b”).hide(1000,funciton(){

Alert(“sdfjdf”);

});

21、jQuery允许我们在一条语句中写多个方法，叫jQuery方法链接

(“#b”).css(“color”,”red”),slideUp(2000).slideDown(32000);

22、jQuery获得内容和属性，jQuery中非常重要的部分就是操作DOM的能力。(“#b”).text()-设置或返回所选元素的文本内容，(“#b”).html()-设置或返回所选元素的内容（包括HTML标记）,(“#b”).val()-设置或返回表单字段的值（输入字段value之类）；(“#b”).attr(“href”);-获得属性值

23、text(function（i,origText）{return ;}) html() val()同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始值。然后以函数新值返回您希望使用的字符串

$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return"Old html: " +origText +" New html: Hello <b>world!</b> (index: "+ i+ ")";
    });
});

Old text: 这是粗体文本。 New text: Hello world! (index: 0)

24、(“#b”).attr(“href”,”http://chinaso.com”);改变属性值

25、Attr也可以一下改变多个属性值，也有类似val等的回调函数

26、jQuery添加元素：append()-在被选元素的结尾插入内容；prepend（）-在被选元素的开头插入内容；after()-在被选元素之后插入内容；before()-在被选元素之前插入内容。Append、prepend和after、before的区别是，前两者是加在那个元素里的结尾和开始，不管是行内元素还是块级元素，后两者是加入的内容是另外一个元素，不包括在原来的元素里的。

27、删除元素和内容，remove()-删除被选元素及其子元素；empty()-删除被选元素的子元素。Remove()方法也可以过滤，在括号里加上选择器就可以删除想要删除的元素了(“#b”).remove(“.italic”);

28、jQuery操作css：(“#b”).addClass()-像元素添加一个或多个类；(“#b”).removeClass()-删除一个或多个类；(“#b”).toggleClass()-切换添加删除操作。就是给这个元素添加或删除一个类名。

29、(“p”).css(“background-color”);-这个操作返回的是第一个匹配的元素的background-color值

30、jQuery尺寸方法：width() height()-这两个返回或设置元素的宽高，不包括内外边距和边框innerWidth() innerHeight()-这两个返回元素的宽高包括内边距outerWidth() outerHeight()-这两个返回元素的宽高包括内边距和边框。(“#b”).width(500).height(500);

31、Jquery遍历。(“#b”).parent()-返回被选元素的直接父元素(“#b”).parents()-返回被选元素的所有祖先元素，一路向上知道文档的根元素HTML；(“#b”).parentsUntil(“span”)-返回介于两个给定元素之间的所有祖先元素

32、(“#b”).children()-返回被选元素的所有直接子元素。(“#b”).find(“span”)-返回被选元素的所有后代中的span元素

33、(“#b”).siblings()-所有同胞元素；(“#b”).next()-下一个同胞元素；(“#b”).nextAll()-所有跟随的同胞元素；(“#b”).nextUntil(“h6”)-介于两个元素之间的所有同胞元素

34、(“#b”).prev() prevAll() prevUntil()方法与上面一样不过方向反过来指的是向上的同胞元素。

35、(“div b”).first()-被选元素的首个元素;(“div b”).last()-被选元素的最后一个元素；(“div b”).eq(1)-返回被选元素中带有指定索引号的元素。索引从0开始。

36、(“div b”).filter(“.intro”)-允许规定一个标准比如类名是intro，不匹配这个标准的元素会被从集合中删除然后返回符合条件的元素。(“div b”).not(“.intro”)-not与filter正好相反。

37、jQuery ajax：ajax是与服务器交换数据的艺术，他在不重载全部页面的情况下实现了对部分网页的更新，是一种用于创建快速动态网页的技术。Ajax=异步JavaScript和XML。使用ajax的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等。通过使用ajax可以用http get和http post从远程服务器上请求文本、HTML、XML或json，同时能够把这些外部数据直接载入网页的被选元素中。

38、Ajax，XMLHTTPRequest是AJAX的基础，所有现代浏览器都支持XMLHTTPRequest对象（IE5、6使用ActiveXObject），它用于在后台与服务器交换数据。

Ajax第一步就是创建XMLHTTPRequest对象，语句是variable=new XMLHTTPRequest();IE的是variable=new ActiveXObject(“Microsoft.XMLHTTP”);所以为了应对不同浏览器需要对浏览器做个判断，最终语句是：

var xmlhttp;

If(window.XMLHTTPRequest){

Xmlhttp=new XMLHTTPRequest();

}else{

Xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

第二步就要向服务器发送请求了

Xmlhttp.open(“GET”,”test1.txt”,true);

Xmlhttp.send();

//method-请求的类型，URL：文件在服务器上的位置，async：true异步/false同步

Send(string)：仅用于post请求时写string

与post相比，get更简单也更快，并且在大部分情况下都能用，但在一下情况下请用post：无法使用缓存文件、想服务器发送大量数据（post没有数据量限制）、发送包含未知字符的用户输入时，post比get更稳定也更可靠。

如果要像HTML表单那样post数据，要使用setRequestHeader()来添加http头，然后在send方法里规定您希望发的数据：

Xmlhttp.open(“post”,”ajax_text.jsp”,true);

xmlhttp.setRequestHeader(“Content-type”,”applicaiton/x-www-form-urlencoded”);

Xmlhttp.send(“fname=Bill&lname=Gates”);

规定响应处于onreadystatechange事件中的就绪状态时执行的函数

Xmlhttp.onreadystatechange=function(){

If(xmlhttp.readyState==4 && xmlhttp.status==200)

{do something}

}

如果需要获得来自服务器的响应，可以用XMLHTTPRequest对象的responseText或responseXML属性。

39、jQuery load(）方法，是简单但强大的ajax方法，从服务器加载数据并把返回的数据放入被选元素中。$(selector).load(url,data,callback);url必须-规定您希望加载的URL，data可选-规定与请求一同发送的查询字符串键值对集合；callback可选-是load方法完成后所执行的函数名称，callback参数有三个，responseTxt-包含调用成功时的结果内容，statusTXT-包含调用的状态，xhr-包含XMLHTTPRequest对象

40、$.get()方法通过http get请求从服务器上请求数据$.get(URL，callback)

41、$.post(）方法通过http post请求从服务器上请求数据$.post(URL，data，callback)

$("button").click(function(){
    $.post("demo_test_post.asp",
            {
                name:"Donald Duck",
                city:"Duckburg"
            },
            function(data,status){
                alert("Data: "+ data+ "\nStatus: "+ status);
            });
});

42、