jQuery

作者: Mx勇 | 来源:发表于2016-12-05 13:33 被阅读33次

    web前端之锋利的jQuery一:认识jQuery

    jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

    The Write Less,Do More(写更少,做更多),无疑就是jQuery的核心理念,简洁的API、优雅的链式、强大的查询与便捷的操作。从而把jQuery打造成前端世界的一把利剑,所向披靡!

    它兼容CSS3,还兼容各种浏览器,jQuery使用户能更方便地处理DOM、事件、实现动画效果,并且方便地为网站提供AJAX交互。

    其主要的优势有:轻量级、强大的选择器、出色的DOM封装操作、可靠的事件处理机制、完善的jQuery、不污染顶级变量、出色的浏览器兼容性、链式操作方法、隐式迭代、行为层与结构层分离、丰富的插件支持、完善的文档、开源。

    第一个小例子:

    认识jQuery$(document).ready(function(){alert("Hello World!");    }

    $在jQuery通常就是“jQuery”的简写。

    $(document).ready(function(){});就等同于JavaScript中的window.onload(function(){});

    window.onload(function(){}):

    1.必须等到网页全部被加载完成之后后才执行

    2.只有一个,如有多个执行最后一个

    3.不能被简写

    $(document).ready(function(){}):

    1.等到所有DOM结构绘制完毕后执行,可能其DOM元素关联的还没有加载完毕

    2.可以书写多个

    3.可以被简写:$(function(){});

    DOM:

    jQuery中的$(‘#foo’).html();相当于getElementById(‘foo’).innerHTML;

    DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;

    复制代码 代码如下:

    var domObj = document.getElementById(“id”); //DOM对象

    var$obj =$(“#id”); //jQuery对象;

    var $variable=jQuery对象;

    var variable=DOM对象;

    jQuery对象转换成DOM对象:

    jQuery对象不能使用DOM中的方法,但是如果对jQuery对象方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM中的方法,有以下两种处理:

    (1)jQuery对象是一个类似于数组的对象,可以通过[index]的方法得到相应的DOM对象。

    jQuery代码如下:

    var$cr=$(“#cr”); //jQuery对象

    var cr=$(cr[0]); //DOM对象

    alert(cr.checked); //检测这个checkbox是否被选中

    (2)另一种方法是jQuery自身提供的,通过get(index)方法得到相应的DOM对象。

    jQuery代码如下:

    var$cr=$(“#cr”); //jQuery对象

    var cr=$cr.get(0); //DOM对象

    alert(cr.checked); //检测这个checkbox是否被选中

    DOM对象转换成重点内容jQuery对象:

    对于一个DOM对象,只需要$()把DOM对象包装起来,就可以获得一个jQuery对象,方式为$(DOM对象)

    jQuery代码如下:

    var cr=document.getElementById(“cr”); //DOM对象

    var$cr=$(cr); //jQuery对象

    解决其他库与JQuery的冲突:

    1.jQuery库在其他库之后导入

    在其他库和jQuery库都被加载完毕之后,可以再任何时候调用jQuery.noConfict()函数来将变量$的控制权移交给其他JavaScript库。

    2.jQuery库在其他库之前导入

    如果jQuery库在其他库之前导入,那么可以直接使用“jQuery”来做一些jQuery的工作,同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConfict()函数

    相关文章

      网友评论

        本文标题:jQuery

        本文链接:https://www.haomeiwen.com/subject/ovikmttx.html