您的位置：首页 > Web前端 > JQuery

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

2016-12-05 10:11 686 查看

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、不污染顶级变量、出色的浏览器兼容性、链式操作方法、隐式迭代、行为层与结构层分离、丰富的插件支持、完善的文档、开源。

第一个小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>认识jQuery</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script><!-- jquery不需要安装之类的，只需要文件引入就可以了 -->
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head>
<body>

</body>
</html>

$在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 JavaScript web前端

相关文章推荐

新的分享

章节导航