jQuery基础(2)

来源：互联网发布：fc2live直播域名编辑：程序博客网时间：2024/06/04 00:41

一、jQuery的使用

jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。

注意:jQuery库中只提供了一个名字为jQuery的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。

例如:

    var d1 = document.getElementById("my_div");    //出错,因为d1是dom模型中的对象而不是jQuery的对象    d1.hide();    //注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字    var $d2 = jQuery("#my_div");    //正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法    $d2.hide();

强调:jQuery库只提供了一个叫jQuery的对象,但是我们可以使用jQuery库中提供的方法把我们的普通dom对象转换为jQuery的对象,从而使用其提供的方法.

a.简写形式

  $是jQuery的一个简写形式  $("#my_div")等价于jQuery("#my_div")  之后的代码中我们一般都会使用jQuery的简写

b.如何判断一个对象是不是jQuery的对象?

  var $d2 = jQuery("#my_div");  alert($d2 instanceof jQuery);//返回true则是jQuery对象  alert(typeof($d2));//Object 这个判断不出来

c.ready()函数和onload事件

window对象的onload事件:当某个元素加载完毕的时候触发
例如:

    <html>        <head>            ...        </head>        <body onload="test()">            .....            .....            .....        </body>    </html>

注:这里表示当网页中所有的内容加载完毕后（包含图片）才能执行test函数

jQuery中的有一个方法可以代替这种情况:
例如:

     <html>        <head>        <script type="text/javascript">             $(document).ready(function(){                //...dosomething        });        </script>        </head>        <body>            .....            .....            .....        </body>     </html>

注:网页中所有DOM结构加载完毕后就执行ready方法中定义的匿名函数，可能dom元素关联的东西并没有加载完(图片等资源),效果和onload事件一样,但是执行效率比onload高,因为不需要等待页面中图片等资源的加载完毕.

这个方法有一个简写的形式:

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

d.jQuery()函数

在jQuery类库中，最重要的方法就是jQuery()方法，也就是$(),功能强大，具有四种
调用方式：
1).参数一为CSS选择器（字符串），参数二为一个元素或者jQuery（可选）定义了元素查询的范围，称为上下文

    $("#one")

2).参数为Element,Docoment,Window对象
$()方法将这些元素封装成jQuery对象并返回。

3).参数为HTML文本字符串
$()会根据传入的文本创建好HTML元素并封装成jQuery对象返回，也可以有第二个参数，当为object对象时，假设该对象的属性表示HTML属性的键值对，这些属性将设置到新创建的对象上。当第二个参数对象的属性名为css,html,text,width,height,offset,val,data或者为jQuery事件处理程序注册方法名时，jQuery
将调用新建元素上的同名方法，并传入属性值

4).参数为一个函数

    $(function(){    })

e.jQuery对象
$()的返回值是一个jQuery对象，jQuery对象是类数组对象：拥有length属性和介于0~length-1之间的数值属性。

    size()      替代length属性    get()       替代方括号索引    toArray()   将jQuery对象转换为真实数组    ...其余方法下章介绍selector    创建jQuery对象时选择器字符串context     上下文对象jquery      字符串形式的jQuery版本号

二、DOM对象与jQuery对象

a.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。

     在html中，<table> <h2> <p> <ul> 等都是DOM元素节点     可以通过javascript中的方法获取到DOM元素节点：     getElementById()     getElementsByTagName()     ..

b.jQuery对象

就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jquery对象就可以使用jquery库文件中的方法，但是jquery对象中无法使用dom对象的任何方法。

     例如:     $("#foo").html() 等价于 document.getElementById("foo").innerHTML;     但是不可以 $("#foo").innerHTML

c.对象之间的转化

  定义变量的风格，（推荐使用）js中的变量名是可以使用$开头的  dom对象使用普通的变量名字  jQuery对象一般可以使用$开头的变量名  这样主要是用于区别jquery对象和dom对象的,没有其他别的作用.jQuery对象也可以使用一个普通的变量名

1) jquery对象转换为 DOM对象

jquery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象 对象名[index],也可以通过get(index)方法获得，对象名.get(index)

  其中index是jQuery对象中的下标(jquery可以看成一个数字/集合)，怎么来理解这里所说的【数组对象】:首先它是一个对象,同时这个对象里面也有像，数组一样的下标,可以存值和取值.除了这以外还有这个对象的其他的一些属性.这个时候如果使用for-in的话可以看到这个对象中的属性及其值.

2) DOM对象转换成jquery对象

使用$将DOM对象包装起来即可

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

其实所有的jquery对象都是通过$()函数制造出来的，它就是一个jquery对象的制造工厂

3)获得一个jQuery对象的三种方式

3.1.把一个dom对象转换为jQuery对象

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

3.2.通过选择器直接拿到一个jQuery对象

    var d = $("#my_div");

3.3.直接创造出一个jQuery对象

    var v = $("<div>test</div>");

注意:我们使出浑身解数把一个对象变为jQuery对象的目的，就是我们想通过这个对象调用到jQuery库给我们提供的各种简单便捷的函数.从而达到上面所提供的jQuery的理念:write less,do more

阅读全文

1 0