jQuery学习笔记（一）

l         JQuery简介：

JQuery是JavaScript的封装类库

优点：尺寸小，使用简单方便（支持链式编程，隐式迭代），跨浏览器兼容性好。插件丰富，开源，免费。

何为链式编程：如:$(“#div1”).draggble.show().hide().fly(); 可以一直点下去

何为隐式迭代：表示自动迭代方法调用。$(“div”).draggble表示所有的div都操作draggble方法

用法：直接引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放在同一目录下。Vsdoc(相当于js的说明库)与js放在一起就会有第三方js的自动提示的功能。

简单的JQuery

 $(document).ready(function){

 alert(“加载完毕”);

}); //注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。

当页面Dom元素加载完毕时执行代码，可以简写为：

$(function(){

 alert(“加载完毕”);

})

ready和onload类似，但是onload只能注册一次(window.onload=function()) 如 window.onload=function(alert(“函数1”);); window.onload=function(alert(“函数2”);); 程序运行时后注册的函数会覆盖前面注册的函数。因为JQuery没有类似C#的+=机制。而ready可以多次注册都可以执行。

JQuery的ready和Dom的onload的区别：onload是所有Dom元素创建完毕，图片，CSS等都加载完毕后才会被触发，而ready则是Dom元素创建完毕就触发。这样的好处是可以提高网页的响应速度。在JQuery也可以使用$(window).load()来实现onload那种事件调用的机制。

JQuery提供的函数

l         $.map(array,fn)对数组array中的每一个元素调用fn函数进行逐个处理。最后将处理结果返回，得到一个新的数组。

  var arr1=[3,4,5,6];

  var arr2=$.map(arr1,function(item){return item*2;})

l         $.map不善于处理Dictionary风格的数组。

l         $.each(array,fn)对数组array每个元素调用fn函数进行处理。没有返回值

 如：var dic1 = { "xiaoshang": 20, "xiaoli": 23, "xiaoming": 22 };//此处为字典类型数据

        $.each(dic1, function (key, value) { alert(key + "的Ì?年¨º龄¢?是º?" + value); }); //$.each函数没有返回值

如果是普通风格的数组，则key的值是序号。

 var varnumber = [1, 2, 3, 4];

        $.each(varnumber, function (key, value) { alert(key + "的Ì?值¦Ì是º?" + value); }); //key表示索引value表示值

 还可以省略function的参数，这时用this可以得到遍历的当前元素。

var arr=[1,2,3,4];

$.each(arr,function(){alert(this);});

JQuery对象与DOM对象

l         JQuery对象就是通过JQuery对象包装DOM对象后产生的对象。DOM对象要想通过JQuery对象操作必须要先转换为JQuery对象。

l         $(“#div1”).html()等价于：document.getElementById(“div1”).innerHTML;

l         $(“#div1”)得到的就是JQuery对象，JQuery对象只能调用JQuery对象封装的方法，不能调用DOM对象的方法。DOM对象也不能调用JQuery对象的方法。所以$(“#div1”).innHTML是错误的，因为innerHTML属性是DOM对象的属性。

l         Array是JS语言本身的对象，不是ＤＯＭ对象，因此不需要转换为JQuery对象就可以使用。

l         将ＤＯＭ对象转换为JQuery对象的方法是：$(dom对象)；

l         当调用JQuery对象没有封装的方法时，需要将JQuery对象转换为ＤＯＭ对象。转化方法：var domobj=jqobj[0] 或者 var domobj=jqobj.get(0);

 示例：$(document).ready(
function()
{
//jquery对象转化为dom对象
var $temp=$("#el1");
var dom=$temp[0];
var dom2=$temp.get(0);
alert(dom2.innerText);//=document.getElementById("el1").innerHTML;

//dom对象转化为jquery对象
var temp2=document.getElementById("el1");
var $temp2=$(temp2);
alert($temp2.text());
}
);

l         JQuery修改样式：有参数表示设置，无参数表示获得。设置和获得都是调用JQuery的同一个方法。如：设置样式:$(“#div1”).css(“background”,”red”);获得样式:$(“#div1”).css(“background”);设置value值:$(“#un”).val(“abc”);获得value值:$(“#un”).val();类似的获取个设置 innerText、innerHTML用text()和html()方法。

$(function () { $("#div1").css("background","red"); });//设置样式

       $(function () { alert($("#div1").css("background")); }); //获取样式

       $(function () { $("#txt1").val(new Date()); })

       $(function () { alert($("#txt1").val()); })