Jquery 学习一

      在阅读《锋利的Jquery 》这本书时，记录一下自己的学习内容，做一些笔记，方便以后查找。

    一、几种流行的javaScript库：

1.Prototype--http://prototypejs.org/

2.Dojo--http://demos.dojotoolkit.org/demos/

 3.MOOTools--http://mootools.net/demos/?demo=Request.JSON

4.Jquery--是一个轻量级的库，拥有强大的选择器，和出色的DOM操作，可靠地事件处理器，完善的兼容性和链式操作等。

二、Jquery简介与使用

1. jquery中的$.ajax与JQuery.ajax是等价的。

$(document).ready(function(){

//等待dom加载完成后执行function中的代码

});

2.window.onload 与$(document).ready()的对比

(1)执行时机：window.onload--必须等待网页中所有元素加载完毕后（包括图片），才能执行。$(document).ready()--网页中所有DOM元素绘制完毕后就执行，可能DOM元素关联的东西比并没有加载完。

    

(2)编写个数：window.onload--不能同时编写多个：例如以下的代码是错误的  window.οnlοad=function(){  alert("test1");}     window.οnlοad=function(){  alert("test2");}

执行结果只有test2.

$(document).ready()--可以同时编写多个：例如$(document).ready(function(){  alert("test1")});     $(document).ready(function(){  alert("test2")});执行结果为test1和test2.

（3）简化写法：$(document).ready(function(){//.....});可以简写成 $(function(){//......});

测试代码：

<script type="text/javascript">
$(document).ready(
function(){
alert("hello word!");

}
);
 $(document).ready(function(){
  alert("test2");
 });
 

 $(function(){
  alert("test$$$");
 });
 window.onload = function(){
  alert("test3");
 }


window.onload = function(){
  alert("test4");
 }
</script>

三、Jquery的代码风格：

  1.链式代码风格：

四、DOM对象与JQuery对象

在网页中通过例如<h1>、<p>、<ul>、<li>这些都称之为DOM节点。通过document.getElementById()获取的节点元素称之为DOM对象。

Jquery对象就是通过Jquery对象包装DOM对象后产生的对象。

例如：$("#id").html()   等同于 document.getElementById("#id").innerHTML //获取id为id的元素内的html代码。

Jquery对象有属于自己的方法，DOM对象也有属于自己的方法，不能互相使用

五、DOM对象与Jquery对象的互相转换

1.jquery对象转换成DOM对象有两个方法

（1）var jquery = $("#jquery");//Jquery对象

 var dom = $jquery[0];//dom对象

                alert(dom.checked);

（2）var jquery = $("#jquery");//Jquery对象

var dom = $jquery.get(0);//dom对象

 alert(dom.checked);

2.DOM对象转换成Jquery对象

var dom = document.getElementById("dom");//dom对象

var jquery = $(dom);//jquery对象