首页技术jquery教程实例 jquery的使用

jquery教程实例 jquery的使用

编程之家2026-05-31753次浏览

大家好,今天小编来为大家解答以下的问题,关于jquery教程实例,jquery的使用这个很多人还不知道,现在让我们一起来看看吧!

jquery教程实例 jquery的使用

jQuery基础教程详解的前言

jQuery是一个强大的JavaScript库。无论你具有什么编程背景,都可以通过它来增强自己的网站。

由John Resig创建的jQuery是一个开源项目,其核心团队由富有献身精神的顶尖JavaScript开发人员组成。jQuery在一个紧凑的文件中提供了丰富多样的特性、简单易学的语法和稳健的跨平台兼容性。此外,百余种为扩展jQuery功能而开发的插件,更使得它几乎成为适用于各类客户端脚本编程的必备工具。

本书以通俗易懂的方式介绍了jQuery的基本概念,通过学习本书,即使曾经因编写JavaScript而受过挫折的人,也能够掌握为网页添加交互和动态效果的技术。本书将引导读者跨越AJAX、事件、效果及高级JavaScript语言特性中的各种陷阱。

包含书中各章的在线示例。本书内容

本书的第一部分jQuery简介,用来帮助读者对jQuery有个大概的了解。第1章的内容主要涉及如何下载和设置jQuery库,同时也会指导你使用jQuery编写第一个脚本。

本书的第二部分将深入讨论jQuery库的各个主要方面。第2章讲述如何取得我们想要的一切。通过jQuery中的选择符表达式,你可以在页面中的任何地方找到想要的元素。这一章将使用各种选择符表达式为页面中的不同元素添加样式,其中一些是通过纯CSS方式做不到的。

jquery教程实例 jquery的使用

第3章讲述如何“扣动扳机”。本章介绍如何通过jQuery的事件处理机制,在浏览器发生事件时触发行为。同时,还会介绍jQuery的独家秘笈——以不唐突的方式添加事件(甚至在页面加载完成之前)。

第4章讲述如何增加操作的艺术感。这一章介绍通过jQuery实现动画的技术,从中我们能够体会到隐藏、显示和移动页面元素时那种轻松自如的感觉。

第5章讲述如何通过指令改变页面。本章讲述的是动态修改HTML文档结构的技术。

第6章讲述如何让你的网站跻身主流行列。在学习完本章后,你也可以做到不用像过去那样刷新页面而访问服务器端功能。

本书的第三部分与前两部分不同。这一部分主要以实例为主,即在前几章学习的基础上,创建常见问题的稳健jQuery解决方案。第7章将讲述排序、筛选和为信息添加样式并创建优美实用的数据布局。

第8章以客户端数据验证为主题。届时,将设计一个具有适应能力的表单布局,还会实现基于客户端与服务器通信的交互式表单功能,例如自动完成。

jquery教程实例 jquery的使用

第9章介绍如何在小窗口内显示页面元素来增强它们的美感和实用性。其中,动态显示和隐藏信息的方式既可是自动的,也可是用户控制的。

第10章讲过jQuery令人印象深刻的扩展能力。读者将在理解和掌握3个优秀jQuery插件的基础上,从头开始构建自己的插件。

附录A提供了很多与jQuery、JavaScript以及通常的Web开发有关的内容丰富的网站信息。

附录B推荐了一些有用的第三方程序和实用工具,用于在个人的开发环境中编辑和调试jQuery代码。

附录C讨论JavaScript语言的常见壁垒之一——闭包。学了本附录,你将会依赖闭包的强大威力而不是害怕它的副作用。

本书读者对象

本书适合想在自己的设计中添加交互元素的Web设计者,也适合想在自己的Web应用中创建最佳用户界面的开发者。

读者需要具备基本的HTML和CSS知识,并且应该熟悉JavaScript语法。但是,不需要有jQuery的知识,也不必拥有其他JavaScript库的使用经验。

jQuery开发技术详解的前言

jQuery是一个优秀的开源JavaScript库。它的体积很小,代码风格独特而又优雅,改变了JavaScript程序员编写程序的方式和思路。jQuery库有一条设计理念,那就是“写的少,做的多”(write less, do more)。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的AJAX使其在众多优秀的JavaScript库中脱颖而出,独树一帜,赢得了众多使用者的拥护和信赖。

jQuery的语法简单易学,而且具有很强大的跨平台性,可以兼容多种核心的浏览器。目前,已经有一百多个插件来扩充jQuery的功能,使得jQuery能满足几乎所有客户端的脚本开发。

但是,目前来说专门介绍jQuery的书籍还很少,中文的书籍更是少之又少,这就给国内一些想要学习jQuery的Web开发爱好者制造了不小的障碍。为了方便广大读者学习,本人花费将近一年的时间写作这本书。本书通过理论与实践相结合的方式,由浅入深、循序渐进地介绍jQuery库的使用;同时又辅以大量真实的开发案例,可以让用户很轻松地就能使用jQuery来增强网页的互动性,做出更好的Web前端产品以及各种更炫更酷的效果。

本书的特点

1.循序渐进,由浅入深

阅读本书不需要对jQuery有所了解,甚至对JavaScript也不需要有很深的了解。为了方便读者学习,本书在第一篇首先介绍Web开发的基础知识,如JavaScript的基础语法等,以期读者可以在不参考其他资料的情况下顺利过渡到jQuery的学习和使用。

2.技术全面,内容充实

本书是一本关于jQuery的初级入门读物。书中详细介绍了jQuery 1.3.2几乎所有的特性和属性,并对每个模块均有很翔实的实例讲解。以期读者对jQuery有个很好的整体把握,同时以后需要用到一些特性的时候,可以进行查阅。另外,本书还在开始介绍了Web开发的基础知识,如Web开发中比较常用的工具等,可以让读者从一个完全的门外汉很快变成业内人士。

3.图文结合,理解深刻

讲解技术类的知识,最好的方式就是面对面的讲授,但是图书却不太容易做到这一点。为了弥补这个缺憾,本书在讲解具体实例的时候,除了大量的注释、讲解之外,还辅以一些简洁明了的图片,以期让读者对实例以及jQuery效果有更直观的理解。

4.真实案例,随学随用

本书是一本注重实践的书。因此,有大量的篇幅用在了真实的Web开发案例中。本书第三篇通过若干比较完整的实例来讲解jQuery在具体项目中的使用,如增强用户体验、AJAX跨域操作、与PHP配合构建动态网站、键盘操作以及将数据以可视化形式显示等。读者可以通过这些实例对jQuery的理论知识有更加深刻的理解,同时,这些实例稍作修改,就可以用在读者正在开发的项目中去,来实现各种精彩的效果。

5.配有源代码光盘,加速学习

为了让初学者快速入门,本书配套光盘中附赠了本书中的所有源代码。读者可以参考阅读。但是,笔者依然强烈建议,在学习本书的时候应该边学边练。即便不能不看书直接写代码,最好也要对着书上的代码手工敲入一边,以加深印象以及自己对知识本身的理解。

篇名章名内容介绍

第一篇 jQuery预备基础篇第1章 Web开发的发展与趋势本章主要介绍当前Web开发的现状、Web的标准概念、Web 2.0与Web 1.0的区别与联系,并通过当前的一些使用jQuery构建的大型网站,对jQuery能实现的效果进行简单介绍,以期读者对jQuery的强大有个更加直观的了解。

第2章 JavaScript基础本章主要介绍JavaScript的基础知识,包括JavaScript中的变量、数据类型、操作符的使用、流程控制的方法,以及JavaScript数组以及函数的创建和使用。

第3章文档对象模型(DOM)本章主要介绍DOM的基本概念,如DOM的树结构以及节点的概念等。同时,也将介绍JavaScript中访问以及操作DOM节点的方法,包括获取元素、获取元素内的文本和元素内的HTML内容、创建一个新的DOM节点、插入或者删除一个DOM节点元素等。通过本章的介绍,读者可以对DOM的操作方式有所了解,为后续章节使用jQuery操作DOM元素做好铺垫。

第4章工欲善其事,必先利其器——开发工具本章将介绍网页设计过程中经常使用的工具,如SciTE、Notepad++等代码编辑工具,使用Blackbird、Firebug以及Venkman对JavaScript代码进行调试,以及Web Developer Toolbar工具栏的使用、JavaScript代码的压缩及混淆工具等。这些工具可以有效地提高编写代码及设计网站的效率,有必要熟练掌握其使用方法。

第二篇 jQuery基础篇第5章 jQuery快速上手本章将介绍了jQuery的由来和优势,并对目前几个流行的JavaScript库进行了介绍和对比。另外还将演示一个最简单的jQuery程序,通过这个示例,让读者对jQuery的$(document).ready()函数有一个基本的认识,并对jQuery选择器的使用以及click()函数也有初步的概念。

第6章使用选择器获得要操作的元素本章将介绍jQuery选择器中的基本选择器、层次选择器以及滤镜选择器,滤镜选择器中又对基本滤镜选择器、子元素滤镜选择器、表单滤镜选择器以及属性滤镜选择器分别结合具体实例展开详细的介绍。

第7章操作得到的元素本章介绍jQuery中操作得到的元素以及元素集的方法,包括对属性、样式类、CSS以及内容的操作,对元素集查找以及筛选的函数,以及jQuery中的链式操作等。通过使用这些函数,可以很方便地操作页面上的任意元素。

续表

篇名章名内容介绍

第二篇 jQuery基础篇第8章使用jQuery进行DOM操作本章介绍jQuery中比较常用的对页面上DOM元素的操作方式,包括在元素内部以及外部插入元素,对页面上的DOM元素进行包裹、替换、删除以及克隆等操作。通过熟练使用这些DOM元素操作函数,可以很方便地对页面内容进行操控,再结合其他效果函数的使用,将可以为用户提供更加强大且有很好用户体验的应用。

第9章 jQuery中的事件处理本章介绍jQuery中的事件处理机制。jQuery在JavaScript基本的事件处理机制的基础上,对其进行了增强和扩展,使得jQuery事件处理不但有优雅的语法,而且功能也更加强大。本章首先介绍了$(document).ready()事件的概念、jQuery事件的绑定与反绑定、触发器等,并对jQuery中众多的内置事件类型作了简单的分类和介绍。

第10章 jQuery中的动画与效果本章介绍jQuery中的动画与效果,包括隐藏与显示、滑动效果以及淡入淡出效果等。本章将结合实例讨论这些效果的实现和应用,并将介绍jQuery中使用animate自定义动画的方法,以及jQuery中动画队列的概念及其使用方法。

第11章 jQuery与AJAX本章将介绍jQuery中AJAX的使用方法。首先介绍AJAX的实现原理及其最核心的组成部分XMLHttpRequest对象的概念和使用方式;然后介绍jQuery中用来支持AJAX的几个核心函数,包括load、get、post、getScript以及getJSON等,并对最核心的AJAX函数作了较为详细的介绍;同时,还将介绍jQuery中在使用AJAX时支持的几种服务器端数据类型返回方式,以及jQuery在实现AJAX完整请求过程中的各个步骤以及各个阶段的主要功能。

第12章回头重看jQuery——核心及工具本章将对jQuery的核心方法进行回顾,主要介绍jQuery中对象访问的通用函数、jQuery中的数据缓存机制和插件机制,以及jQuery中的常用工具类。使用这些工具类,可以更方便地完成对浏览器检测、获得及处理数组与对象等操作。

第三篇 jQuery应用篇第13章 jQuery增强用户体验本章将介绍目前在Web设计领域比较流行的网站内容的动态加载技术的jQuery实现,如“高亮菜单”、“加载提示”等,并将通过一个动态切换样式的例子进一步展示如何满足用户多元化、个性化的需求,对jQuery的cookie插件也将有所介绍。

第14章 jQuery中使用AJAX跨域操作本章将介绍使用jQuery中的AJAX技术进行跨域操作的方法,并通过对flickr、delicious以及Google AJAX Search等网站API调用的实例,演示Script方式以及JSONP方式在跨域操作中的应用。使用该特性,可以很容易地做出新颖有趣的混搭应用。

第15章 jQuery+ PHP动态网站实践本章将介绍jQuery在PHP动态网站建站中的使用,通过两个实例来具体讲解:一个是构建网站的标签云功能;一个是构建简单的微博客系统。通过这些实例,读者可以了解,使用jQuery并结合一种动态脚本语言,可以实现很多很丰富的内容。

第16章 jQuery键盘操作本章将介绍使用jQuery实现与键盘操作相关的功能,例如:如何在网页上使用快捷键进行页面内容的切换,或者使用jQuery来实现软键盘的操作等。

续表

篇名章名内容介绍

第三篇 jQuery应用篇第17章 jQuery可视化数据显示本章将介绍数据的可视化显示对用户的理解以及阅读带来的优越性,以及使用jQuery插件对数据进行可视化的方法。在本章的实例中,将使用jQuery为其添加更加丰富的功能,例如Tooltip提示等,进一步增强了用户体验。读者可以在本文基础上对flot插件进行深入研究,实现出更加复杂与实用的图表。

适合的读者

本书是一本注重jQuery理论与Web开发实践相结合的基础教程,章与章之间的内容相对独立,读者可以根据自己的情况选择阅读。适合各层次的Web开发人员阅读和参考,主要适合于:

Web前端开发人员

Web后台设计人员

Web设计爱好者

大中专院校学生

本书作者

本书由季国飞编写,参与编写的人员有昊燃、方振宇、陈冠佐、傅奎、陈勤、梁洋洋、毕梦飞、陈庆、柴相花、陈非凡、陈华、陈嵩、承卓、陈先在,在此表示感谢!

季国飞

2010年1月

如何理解jquery中的构造函数

jQuery是面向对象的js库因此它也具备构造函数的功能,它可通过原型及init()函数构成构造函数,而且jQuery实现的构造函数不需要用new来实例化对象

jquery中的构造函数充分的运用了javascript语言的动态性。由于对行参的类型及个数没有严格的要求,因此一个函数可以实现多种功能的需求。接下来在文章中将为大家详细介绍jQuery中的构造函数,具有一定的参考作用,希望对大家有所帮助。

【推荐教程:jQuery教程】

jQuery是一种面向对象的js库,也含有构造函数。每次调用jQuery方法时就会实例化一个jQeury对象,但是jQuery的写法却更加高明。

在ECMA标准定义JS中的对象:无序属性的集合,其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值,这个值可以是基本值,对象或者是方法

例:JavaScript中的构造函数案例

<script>

function Student(name, age){

this.name= name;

this.age= age;

}

Student.prototype={

constructor: Student,

demo: function(){

document.write(this.name+"今年"+this.age+"岁");

}

}

var stu1= new Student("小明", 20);

stu1.demo();

</script>效果图:

接下来再看看jQuery中构造函数的写法

var jQuery= function(selector, context){

return new jQuery.fn.init(selector, context, rootjQuery);

}

jQuery.fn= jQuery.prototype={

init: function(selector, context, rootjQuery){

//...}

}

jQuery.fn.init.prototype= jQuery.fn;以上代码就是jQuery构造函数中的关键代码,可以看出在jQuery中真正的构造函数是init方法,当我们调用jQuery时会返回new init()的结果而不直接new jQuery()。即在对象实例化的时候就没必要new jQuery()

jQuery.fn= jQuery.prototype={...}

jQuery.fn.init.prototype= jQuery.fn;说明函数是jQuery的原型对象,通过它实现了对象的实例化功能。最后再把jQuery的原型对象复值给init()原型对象,所以init()函数就具备了jQuery中原型的所有方法

关于jquery教程实例到此分享完毕,希望能帮助到您。

java源代码加密 java防止反编译加密血齿狂鱼 魔兽世界血齿狂鱼