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

时间: 2024-11-06 17:01:40

jQuery实战:认识jQuery的点点滴滴的相关文章

JQuery实战---初识JQuery+入门实例

JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇博客,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可以学到哪些知识nie,比如我们会学会JQuery的API函数的使用,以及简单的实例的

《jQuery实战》 Jquery之父John Resig 推荐序言

大道至简.为什么创建简单的页面交互效果非要编写臃肿.复杂的代码呢?复杂性并不是开发Web应用的必须条件. 当初我创建jQuery项目时,决定简化Web开发者日常的编码工作.当阅读<jQuery实战>这本书时,我非常高兴地看到这本书深入.准确地介绍了jQuery框架的精髓. 对于像学习实际简化代码编写工作的人来说,<jQuery实战>确实是梦寐以求的学习资料. 最让我开心的是,本书中Bear和Yehuda非常详细地介绍了jQuery框架的内部机制原理.他们深入研究了jQuery AP

妙味课堂Jquery从入门到插件开发到模拟视频教程 Jquery实战开发 Jquery UI

<jQuery课程 初级到高级到模拟>├<第一课:jQuery初级>│  ├01 妙味云课堂-jQuery简介.mp4│  ├02 妙味云课堂-jQuery设计思想之选择元素.mp4│  ├03 妙味云课堂-jQuery设计思想之写法.mp4│  ├04 妙味云课堂-jQuery设计思想之原生关系和链式操作.mp4│  ├05 妙味云课堂-jQuery设计思想之取值和赋值.mp4│  ├06 妙味云课堂-jQuery方法之filter not has.mp4│  ├07 妙味云课堂

几本 jQuery 书籍(含 jQuery 实战)

今天整理下手中的几本 jQuery 书籍,和大家分享一下,其中包括 jQuery 基础教程(Learning jQuery).jQuery 实战(jQuery in Action)和锋利的 jQuery. 1.jQuery实战(jQuery in Action) jQuery 之父推荐的书,大家可以想像."本书令我惊喜--这是一部深入透彻的著作,jQuery项目本身都从中获益匪浅.相信它将成为你学习和使用jQuery的理想资源."分享一个最好用的UI前端框架! 2.jQuery基础教程

jQuery实战4:标签页效果

今天我们来完成<jQuery实战>系列的标签页效果.先来看一看效果图 这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果.在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容.当用户想看其他内容的时候不需要离开页面,只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容.门户网站的首页,有很多频道都是标签页的最佳案例,如体育.财经.军事等模块都是位于不同的标签上.上边的标签页一般称为滑动门技术,下面的内容是一次性加载进来,鼠标移

jQuery实战的常用功能

最近看了<jQuery实战第二版>有所得,写下这篇随笔,这篇随笔主要介绍jQuery中的常用功能. jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网

Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入介绍了整个jQuery框架,此外还专门深入介绍了插件编程,以及一些扩展开发工具和框架,比如Bower和QUnit,当然还有经典的开发实战原则.每个API方法都使用了简明扼要的语法块来描述参数和返回值. <jQuery实战>(第三版)涵盖了从简单入门(如何在网页中引入jQuery)到高级开发的内容,

JQuery实战---窗口效果

在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相关小例子,今天我们这个小例子是关于窗口的弹出效果,相关源码,小编已经上传,有需要的小伙伴可以点击进行下载哦,希望可以帮助到有需要的小伙伴哦,接着,我们就开始小例子的学习,首先,我们来看一下最终的效果图,如下所示: 这个窗口效果的小例子,既不会被拦窗而且更加的灵活, 接着,我们来看一下这个小例子的整体

jquery实战第一讲---概述及其入门实例

就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒,晕车的小伙伴家中常备晕车药,关于远洋面试的一些总结,小编会后续在博客中贴出,希望对有需要的小伙伴一些帮助,通过面试发现面试官大量的提问jquery的相关知识,那时年少,学习jquery的时候,想起来就是一把辛酸泪,于是,小编励志再把JQuery的相关知识复习一遍,把相关的知识点总结到博客中,欢迎不同