jQuery技术

移动Web开发之jQuery Mobile.pptx

字号+ 作者:H5之家 来源:H5之家 2017-05-25 10:01 我要评论( )

第 10 章 jQuery Mobile 基础目录 jQuery Mobile 简介实例 10-1 :搭建 jQuery Mobile 开发环境综合实例:网上订餐系统实例 10-2 :搭建测试环境实例 10-3 :动态滑

文档介绍:
第 10 章 jQuery Mobile 基础目录 jQuery Mobile 简介实例 10-1 :搭建 jQuery Mobile 开发环境综合实例:网上订餐系统实例 10-2 :搭建测试环境实例 10-3 :动态滑动条实例 10-4 :使用选择菜单第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 10.1.1 什么是 jQuery jQuery 是一款优秀的 JavaScript 框架,是一个轻量级的 js库,核心理念是“ write less,do more ”(写得更少,做得更多)。它是一个兼容多浏览器的 JavaScript 库, 2006 年1月由美国人 John Resig 在纽约的 Barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。如今, jQuery 已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55% 在使用 jQuery 。在网页制作领域中, jQuery 的主要功能和优势如下: jQuery 不但兼容 CSS 3 ,而且还兼容各种浏览器( IE 6.0 +, FF 1.5 +, Safari 2.0 +, Opera 9.0 +), jQuery 2.0 及后续版本将不再支持 IE 6/7/8 浏览器。 jQuery 使用户能够更加方便地处理 HTMLdocuments 、 events 、实现动画效果, 并且方便地为网站提供 Ajax 交互。第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 jQuery 为使用者提供了健全的文档说明,各种应用也讲解得十分详细。 jQuery 为开发人员提供了许多成熟的插件,通过这些插件可以设计出动感的页面。 jQuery 能够使用户的 HTML 页面保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆 js来调用命令了,只需定义 id即可。 1. jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。可以通过下面的标记将 jQuery 添加到网页中: <head> <script type="text/ javascript " src ="jquery.js"></script> </head> 第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 2. jQuery 基础语法使用 jQuery 的基础语法如下: $(selector).action () 美元符号$定义 jQuery ; 选择符(selector) “查询”和“查找” HTML 元素; action() 执行对元素的操作。例如: $(this).hide() // 隐藏当前元素$("p").hide() // 隐藏所有段落$(".test").hide() //隐藏所有 class="test" 的所有元素$("#test").hide() //隐藏所有 id="test" 的元素第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 10.1.2 jQuery Mobile 基础 1.什么是 jQuery Mobile ? jQuery Mobile 是 jQuery 在手机上和平板设备上的版本,随着智能手机系统的普及,现在主流移动平台上的浏览器功能已经赶上了桌面浏览器,因此 jQuery 团队引入了 jQuery Mobile (简称为 JQM )。 JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 上的内容更加丰富。与 jQuery 一样, JQM 是一个在 上直接托管、免费可用的开源代码基础。 jQuery Mobile 是一个为触控优化的框架,用于创建移动 Web 应用程序; jQuery 适用于所有流行的智能手机和平板电脑; jQuery Mobile 构建于 jQuery 库之上,如果通晓 jQuery 会更易学习; 它使用 HTML5 、 CSS3 、 JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 2.为什么使用 jQuery Mobile ? jQuery Mobile 将“ write less,do more ”这一理念提升到了新的层次:它自动为网页设计交互的易用外观,并在所有移动设计上保持一致。开发者不需要为每种移动设备或 OS 编写一个应用程序,例如: Android 和 Blackberry 用 Java 编写, iOS 用 Objective C 编写, Windows Phone 用 C# 和.net 编写。 jQuery Mobile 只用 HTML 、 CSS 和 JavaScript ,这些技术是所有移动 Web 浏览器的标准。第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简介 3.如何获取 jQuery Mobile ? 常用以下两种方式获取 jQuery Mobile : 从 CDN 引用 jQuery Mobile (推荐); 从 下载 jQuery Mobile 库。获取和使用方法将在实例 10-1 中进行讲解。为了更好地在 PC 端浏览 jQuery Mobile 页面在移动终端的执行效果,可以下载 Opera 公司的移动模拟器 Opera Mobile Emulator 进行演示。具体使用方法在实例 10-2 中进行讲解。与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种*. js和*. css 文件直接包含到您的 Web 页面中即可。这样, JQM 的功能就好像被放到了您的指尖,供大家随时使用。第 10 章 jQuery Mobile 基础 1 J Qu ery Mo bIle简

12>

内容来自淘豆网转载请标明出处.

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用jQuery Mobile框架开发移动端Web App的入门教程

    使用jQuery Mobile框架开发移动端Web App的入门教程

    2017-05-21 18:02

  • 通过第三方插件实现移动端微信分享功能

    通过第三方插件实现移动端微信分享功能

    2017-05-07 09:08

  • Web前端面试题:jQuery 库中的 $() 是什么

    Web前端面试题:jQuery 库中的 $() 是什么

    2017-05-01 11:02

  • 学习web前端必备的jQuery11个技巧.doc

    学习web前端必备的jQuery11个技巧.doc

    2017-04-26 13:01

网友点评
a