JQuery基础教程:入门
JQuery能做什么
JQuery在线手册
1、取得文档中的元素
如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中某个特殊的部分,必须编写很多行代码。jQuery为准确地获取需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制。$('div.content').find('p');
2、修改页面的外观
CSS虽然为影响文档呈现的方式提供了一种强大的手段,但当所有浏览器不完全支持相同的标准时,单纯使用CSS就会显得力不从心。jQuery可以弥补这一不足,它提供了跨浏览器的标准解决方案。而且,即使在页面已经呈现之后,jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。$('ul > li:first').addClass('active');
3、改变文档的内容
jQuery能够影响的范围并不局限于简单的外观变化,使用少量的代码,jQuery就能改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序,甚至对HTML文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API。$('#container').append('<a href="more.html">more</a>');
4、响应用户的交互操作
即使是最强大和最精心设计的行为,如果我们无法控制它何时发生,那它也毫无用处。jQuery提供了截获形形色色的页面事件(比如用户单击某个链接)的适当方式,而不需要使用事件处理程序拆散HTML代码。此外,它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。
$('button.show-details').click(function() {
$('div.details').show();
});
5、为页面添加动态效果
为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈。jQuery中内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利。$('div.details').slideDown();
6、无需刷新页面从服务器获取信息
这种编程模式就是众所周知的Ajax(AsynchronousJavaScript and XML,异步JavaScript和XML),它是一系列在客户端和服务器之间传输数据的强大技术。jQuery通过消除这一过程中的浏览器特定的复杂性,使开发人员得以专注于服务器端的功能设计,从而得以创建出反应灵敏、功能丰富的网站。$('div.details').load('more.html #content');
7、简化常见的JavaScript任务
除了这些完全针对文档的特性之外,jQuery也改进了对基本的JavaScript数据结构的操作(例如迭代和数组操作等)。
$.each(obj, function(key, value) {
total += value;
});
jQuery为什么如此出色
1、利用CSS的优势
通过将查找页面元素的机制构建于CSS选择符之上,jQuery继承了简明清晰地表达文档结构的方式。由于进行专业Web开发的一个必要条件是掌握CSS语法,因而jQuery成为希望向页面中添加行为的设计者们的切入点。
2、支持拓展
为了避免特性蠕变,jQuery将特殊情况下使用的工具归入插件当中。创建新插件的方法很简单,而且拥有完备的文档说明,这促进了大量有创意且有实用价值的模块的开发。甚至在下载的基本jQuery库文件当中,多数特性在内部都是通过插件架构实现的。而且,如有必要,可以移除这些内部插件,从而生成更小的库文件。
3、抽象浏览器不一致性
Web开发领域中一个令人遗憾的事实是,每种浏览器对颁布的标准都有自己的一套不太一致的实现方案。任何Web应用程序中都会包含一个用于处理这些平台间特性差异的重要组成部分。虽然不断发展的浏览器前景,使得为某些高级特性提供浏览器中立的完美的基础代码(code base)变得不大可能,但jQuery添加一个抽象层来标准化常见的任务,从而有效地减少了代码量,同时,也极大地简化了这些任务。
4、总是面向集合
当我们指示jQuery找到带有collapsible类的全部元素,然后隐藏它们时,不需要循环遍历每一个返回的元素。相反,.hide()之类的方法被设计成自动操作对象集合,而不是单独的对象。利用这种称作隐式迭代(implicit iteration)的技术,就可以抛弃那些臃肿的循环结构,从而大幅地减少代码量。
5、将多重操作集于一行
为了避免过度使用临时变量或不必要的代码重复,jQuery在其多数方法中采用了一种称作连缀(chaining)的编程模式。这种模式意味着基于一个对象进行的多数操作的结果,都会返回这个对象自身,以便为该对象应用下一次操作。
第一个jQuery驱动的页面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="Scripts/jquery-1.8.2.js"></script><script src="Scripts/jquery-1.8.2.min.js"></script> <style type="text/css">body {background-color: #fff;color: #000;font-family: Helvetica, Arial, sans-serif;}h1, h2, h3 {margin-bottom: .2em;}.poem {margin: 0 2em;}.highlight {background-color: #ccc;border: 1px solid #888;font-style: italic;margin: 0.5em 0;padding: 0.5em;} </style><script type="text/javascript">$(document).ready(function () {var item = $('div.poem-stanza');item.addClass("highlight");});</script> </head> <body><h1>Through the Looking-Glass</h1><div class="author">by Lewis Carroll</div><div class="chapter" id="chapter-1"><h2 class="chapter-title">1. Looking-Glass House</h2><p>There was a book lying near Alice on the table,and while she sat watching the White King (for shewas still a little anxious about him, and had theink all ready to throw over him, in case he faintedagain), she turned over the leaves, to find somepart that she could read, <span class="spoken">"— for it's all in some language I don't know,"</span> she said to herself.</p><p>It was like this.</p><div class="poem"><h3 class="poem-title">YKCOWREBBAJ</h3><div class="poem-stanza"><div>sevot yhtils eht dna ,gillirb sawT'</div><div>;ebaw eht ni elbmig dna eryg diD</div><div>,sevogorob eht erew ysmim llA</div><div>.ebargtuo shtar emom eht dnA</div></div></div><p>She puzzled over this for some time, but at lasta bright thought struck her. <span class="spoken">"Why, it's a Looking-glass book, of course! And ifI hold it up to a glass, the words will all go theright way again."</span></p><p>This was the poem that Alice read.</p><div class="poem"><h3 class="poem-title">JABBERWOCKY</h3><div class="poem-stanza"><div>'Twas brillig, and the slithy toves</div><div>Did gyre and gimble in the wabe;</div><div>All mimsy were the borogoves,</div><div>And the mome raths outgrabe.</div></div></div></div> </body> </html>
View Code
接下来我们来分析这几行代码
1、查找诗歌文本
jQuery中基本的操作就是选择文档中的某一部分,这是通过$()函数来完成的。通常,该函数需要一个字符串参数,参数中可以包含任何CSS选择符表达式。在这个例子中,我们想要找到带有poem-stanza类的所有<div>元素,因此选择符非常简单。这里用到的$()函数会返回一个新的jQuery对象实例,它是我们从现在开始就要打交道的基本的构建块。jQuery对象中会封装零个或多个DOM元素,并允许我们以多种不同的方式与这些DOM元素进行交互。
2、加入新类
本例中,.addClass()方法的作用是不言而喻的,这个方法唯一的参数就是要添加的类名。现在,这个例子只是简单地添加了highlight类,而我们的样式表中为这个类定义的是带边框和灰色背景的斜体文本样式。我们注意到,无需迭代操作就能为所有诗歌中的节添加这个类。前面我们提到过,jQuery在.addClass()等方法中使用了隐式迭代机制,因此一次函数调用就可以完成对所有选择的文档部分的修改。
3、执行代码
综合起来,$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是,如果将这行代码单独插入文档的头部,不会有任何效果。通常,JavaScript代码在浏览器初次遇到它们时就会执行,而在浏览器处理头部时,HTML还不会呈现样式。因此,我们需要将代码延迟到DOM可用时再执行。通过使用$(document).ready()方法,jQuery支持我们预定在DOM加载完毕后调用某个函数,而不必等待页面中的图像加载。尽管不使用jQuery,也可以做到这种预定,但$(document). ready()为我们提供了很好的跨浏览器解决方案,涉及如下功能:
尽可能使用浏览器原生的DOM就绪实现,并以window.onload事件处理程序作为后备;
可以多次调用$(document).ready()并按照调用它们的顺序执行;
即便是在浏览器事件发生之后把函数传给$(document).ready(),这些函数也会执行;
异步处理事件的预定,必要时脚本可以延迟执行;
通过重复检查一个几乎与DOM同时可用的方法,在较早版本的浏览器中模拟DOM就绪
事件。
.ready()方法的参数可以是一个已经定义好的函数的引用,如下所示:
function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
转载于:https://www.cnblogs.com/SamFlynn/p/4305133.html
JQuery基础教程:入门相关推荐
- (转)jquery基础教程八 load方法及小技巧
首先我们看看手册上的描述 load(url, params, callback) 装入一个远程HTML内容到一个DOM结点. 注意:避免用装入的scripts脚本,装入脚本改用$.getScript. ...
- JavaScript基础教程——入门必看篇
JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. ...
- JQuery基础快速入门(超级详细)
JQuery基础学习 JQuery概念 快速入门 JQuery对象和JS对象区别与转换 选择器 1.基本操作的学习 2.分类 2.1基本选择器 2.2 层级选择器 2.3属性选择器 2.4过滤选择器 ...
- python3基础教程入门学习
本博文将会对python的基础教程进行全面的讲解, 本部分的博文根据菜鸟教程等网站作为参考完成. 一.python常见的四种数据结构 1.1.定义 列表是一个有序的序列.列表用一对 [] 生成, ...
- jQuery基础教程
调试环境:webstorm 版本11.0.1 Chrome 版本54.0.2840.99 声明:本博客借鉴了w3school在线教程,如果需要详细的教程可以访问http://www.w3school. ...
- jQuery 基础教程 (四)之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一 种与浏览器, 平台, 语言无关的接口, 使用该接口可以 轻松地访问页面中所有的标准组 ...
- jQuery 基础教程 (五)之使用jQuery创建动画效果
一.jQuery 中的动画: 隐藏和显示 (1)hide() 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功 能同 css(&qu ...
- jQuery 基础教程 (一)之jQuery的由来及简介
一.RIA技术 (1)RIA(Rich Internet Applications) 富互联网应用,具有高度互动性.丰富用户体验以及功能强大的客户端. (2)常见的RIA技术 Ajax Flex Sl ...
- jQuery 基础教程 (二)之jQuery对象与DOM对象
一.jQuery 对象 (1)jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 (2)Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以 ...
最新文章
- 无向图——双连通分量
- linux中在vi编辑器中执行存盘退出命令是?
- 最懂中文的H5前端框架amazeUI
- 【SSH系列】Hibernate映射 -- 一对多关联映射
- 使用try_catch_finally处理流中的异常
- java $1参数_jmap命令详解----查看JVM内存使用详情
- 解决迭代器调用next方法时报错:StopIteration
- Android基于TCP的局域网聊天通信
- SLAM学习笔记-------------(二)初识SLAM
- 向jre中添加安全证书
- 软件测试主要流程分享
- 反向题在测试问卷信效度_问卷一定要做信度效度检验吗?如果含有多选题怎样做信度分析,请各位高手帮帮忙。...
- Windows蓝屏代码及解决方案最全合集
- Android Studio开发手机APP(二)-利用MQTT通信开发物联网程序
- 两个60后大叔的新能源战争:王传福与曾毓群的万亿赌局
- 99 Bottles Of Beer
- Android 开发常用性能优化工具总结
- DIY电工维修如何拆卸和安装开关面板插座
- 数字三角形 计算最大路径 动态规划
- 什么是keep-alive
热门文章
- MySQL测试工具之-TPCC(业界通用的压测工具)
- 暗示的力量如此可怕!父母请永远不要对孩子说的“三个字”
- 计算机电源输出电压 电流,开关电源的输出电流如何决定_跟什么有关?
- vue系列:vue的常用属性和方法
- 武大博士后出站后应聘在社区做社工引热议,内卷还是人各有志?
- C\C++ Qt开发的动态桌面壁纸程序
- 多edittext监听变化的优化
- java留言板_java实现留言板功能实例
- fβ,fα,fT,fmax之间的关系
- 电脑字体突然变细了:macOS Mojave 在非Retina屏幕下字体太细了怎么办