jquery从零开始-1.2 使用 jQuery

接上一节 jQuery从零开始-1.1 认识 jQuery
jQuery 项目 主要包括 jQuery Core (核心库)、 jQuery UI (界面库〉、 Sizzle ( CSS 选择器)、 jQuery Mobile CjQuery 移动版〉和 QUnit C 测试套件) 5 个部分。

jQuery 2.1.1 版本之后, 全部升级为 jQuery 3.0。第三个版本兼容更广泛的浏览器,提供更优化的代 码。虽然 jQuery 3 将是jQuery 的未来,但是与 jQuery UI 和jQuery Mobile 还存在兼容性问题。如果需 要支持 IE6-8 浏览器,或者兼容已经开发的项目,建议继续使用最新版本 1.12。

安装 jQuery

jQuery 库不需要复杂的安装,只需要把下载的库文件放到站点中,然后导入到页面中即可。
【示例 1 】 导入 jQuery 库文件可以使用相对路径,也可以使用绝对路径,具体情况根据存放jQuery 库文件的位置而定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>
 
</script>
</body>
</html>

测试 jQuery

引入 jQuery 库文件之后, 就可以在页面中进行 jQuery 开发了。开发的步骤很简单,在导入 jQuery 库文件的<script>标签行下面,重新使用<script>标签定义一个 JavaScript 代码段,然后就可以在<script> 标签内调用 jQuery 方法,编写 JavaScript 脚本。
【示例 2】 本示例设计在页面初始化完毕后,调用 JavaScript 的 alert()方法与浏览者打个招呼.

//在这里用户就可以使用 jQuery 编程了!

 $(function(){
 
 alert("HELLO,WORLD")

})

在jQuery 代码中,是 jQuery 的别名,如()等效于 jQuery ()。 jQuery ()函数是 jQuery 库文件的接口 函数,所有 jQuery 操作都必须从该接口函数切入。jQuery ()函数相当于页面初始化事件处理函数, 当页 面加载完毕,会执行jQuery ()函数包含的函数, 所以当浏览该页面时, 会执行 alert("您好"),看到弹出的信息提示对话框。

如果使用jQuery操作DOM文挡,则必须确保在DOM载入完毕后开始执行,应该使用ready事件作为处理HTML文挡的开始。

 $(document).ready(function(){
 
//JavaScript 或者 jQuery 代码

}) ;

上面代码的语义是匹配文档中的 document 节点,然后为该节点绑定 ready 事件处理函数。它类似于 JavaScript 的 事件处理函数,不过jQuery 的 ready 事件要先于onload事件被激活。

为了方便开发, jQuery 框架进一步简化了(document).ready()方法的写法,直接使用()方法来表示。

$(function() {

 //JavaScript 或者 jQuery 代码

})

考虑到页面加载需要一个过程,所有 jQuery代码建议都包含在()函数中 , 当然也可以不被包含在() 函数中,这与 JavaScript 代码应该放在 事件处理函数中的道理是一样的。


今天本节结束,下一节jQuery实战案例

顺便推荐一下自己的博客,http://www.htmlfuns.cn,里面有知识体系适合从没接触过html的童鞋使用,不管是html5还是javascript,又或者是最新的vue都可以先从最基础的开始学起。看完整套体系后你就可以写出自己的网页啦。并且有很规范的分类,程序员之间可以分享学习笔记、技术进行交流。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,142评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,358评论 0 44
  • PNG 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,...
    hudaren阅读 1,510评论 0 0
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 652评论 0 3
  • 均等分問題 核心原因: 分辨率不同,安卓手机底部普遍含有虚拟导航栏解决办法: 外框flex布局,flex:1可以自...
    太阳mob阅读 302评论 0 2