jQuery - 1.简单的JQuery

1.简单的JQuery

        $(document).ready(function () {

            alert("加载完毕！");

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

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

$(function () {

            alert("加载完毕！");

});

和onload类似，但是onload只能注册一次(window.onload=function...) ,后注册的取代先注册的，而ready则可以多次注册都会被执行。

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

        $(window).load(function() {

            alert("gee");

});

2.jQuery对象（包装集）、Dom对象

DOM对象的JavaScript方法

Var obj=document.getElementById(“ID”);
Var objhtml=obj.innerHTML;

jQuery对象是通过jQuery包装DOM对象后产生的对象

$(“#ID”).html();

jQuery对象不能使用DOM对象的方法，DOM对象也不能使用jQuery对象的方法

var $cr = $(“#cr"); var cr = $cr[0]; // var cr = $cr.get(0);

        $(document).ready(function() {

var $div = $("#d2");

//把JQuery转换为DOM

var div = $div.get(0);

            div.innerHTML = "cba";

});

var cr = document.getElementById("cr"); var $cr = $(cr);

window.onload = function() {

var div = document.getElementById("d1");

//把DOM对象转换为JQuery对象

var $div = $(div);

            $div.html("333");

};

Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用

3.JQuery提供的函数

$.map(array,fn) 对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。猜猜内部实现。

例子，得到一个元素值是原数组值二倍的新数组
var arr = [3, 5, 9];
var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。
$.map不能处理Dictionary风格的数组。

$.each(array,fn) 对数组arry每个元素调用fn函数进行处理，没有返回值。猜猜内部实现。
var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
$.each(arr, function(key, value) { alert(key+"="+value); });

如果是普通风格的数组，则key的值是序号。
还可以省略function的参数，这时候用this可以得到遍历的当前元素：
var arr = [3, 6, 9];
$.each(arr, function() { alert(this); });//能读懂。
普通数组推荐用无参，用dict风格的就用key、value。
$.函数名可以视为静态函数

        //$.map有返回

        var arr = [100, 200, 300, 400];

        arr = $.map(arr, function (n) {

            return n * 4;

});

        alert(arr);

        ////！------弹出[400,800,1200,1600]

        var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };

    //$.each(arr, function (key, value) {

        //     alert(key + "=" + value);

        //});

        //！------分别弹出"tom=汤姆","jerry=杰瑞","lily=莉莉"

        //$.each(arr, function () {

        //    alert(this);

        //});

        //！------分别弹出汤姆,杰瑞,莉莉

        //var tt = [ 2, 3, 5 ];

        //$.each(tt, function () {

        //    alert(this);

        //});

        ////！------分别弹出2，3，5

        //$.map(arr, function() {

        //    alert(this);

        //});

        //！------分别弹出3个 [object Window]