码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实战:认识jQuery的点点滴滴

时间:2015-06-13 15:44:35      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:javascript   jquery   jquery基础   事件   

在这个章节我们可以学到以下的知识:

①为什么应当使用jQuery?
②jQuery的基本原理和概念
③怎样使用jQuery?

为什么是jQuery?

曾经利用JavaScript试着给页面增添动态的功能,就会发现都遵循着这样的一种模式:选择一个元素或者一组元素,然后可以给它绑定事件和添加效果,例如显示和隐藏,添加css类或者修改元素的特性等等。

利用原始的JavaScript完成这些任务中的任何一个,都会需要用到数十行代码.jQuery的创造者为了使这些常见的任务变得简单而特意地创造了jQuery库。

jQuery把确保代码能跨越所有主要浏览器以一致的方式工作,摆在了高优先级的位置。许多更为困难的JavaScript问题,比如在执行页面操作之前必须等待页面加载完毕之类的问题,已经被悄悄地解决了。

jQuery基本原理

在其核心,jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS,就会很清楚选择器的威力,通过元素的特性或者元素在文档中的位置去描述元素组。有了jQuery,你就能够利用现有的知识去发挥选择器的威力,在很大程度上简化了JavaScript代码。

例如:

$(" p a")//获取所有p元素下的所有元素
$("#nav_item")//获取id为nav_item的所有元素
$("p:even")//获取所有偶数的p元素
$("body->div")//获取body下的直接子节点div
$("div:has(a)")//获取所有有<a>链接的div
......
......

传统的window实例的onload助理程序被用于:在整个页面完全加载之后执行语句
例:

window.onload=function(){
    alert("我是加载完成了");
}`

上面的代码是在构建DOM树之后,也是在所有图像和其他外部资源完全地加载并且页面在浏览器窗口显示完毕之后,执行代码。

更好的用户体验是,只要等到文档结构被完整地解析,同时浏览器已经把HTML转换成DOM树形式的时候,就立即执行脚本代码。以跨浏览器方式来实现这一点还是挺坤谈的,然而jQuery已经帮我们搞掂了。

$(document).ready(function(){
    alert("我是在DOM树形成后就执行的");
})

怎样使用jQuery?
首先,先从官网下载:http://jquery.com/download/
然后写上:

<script language="javascript" type="text/javascript" src="jquery文件路径"></script>

或者使用CDN的jQuery

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>  //新浪的cdn

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> //百度的cdn

小结

jQuery拥有极高的跨浏览器兼容,jQuery在选择器上极大的模仿CSS的选择器,给我们带来了很大的方便,jQuery封装了很多有用但复杂的函数,我们只需调用即可。

万事开头难,希望大家能和我一起坚持下去,玩转jQuery。

本文作者By: 罗坚元 http://blog.csdn.net/sunyuan_software

jQuery实战:认识jQuery的点点滴滴

标签:javascript   jquery   jquery基础   事件   

原文地址:http://blog.csdn.net/sunyuan_software/article/details/46482653

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!