关于 jQuery Mobile

jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目。它应用了HTML5和CSS3。

主要特性

  • 基于jQuery构建。

    • 采用与jQuery一致的核心和语法,还使用了jQuery UI的代码和模式。
  • 兼容绝大部分手机平台
  • 轻量级的库
  • 模块化构建
  • HTML5标记驱动的配置
  • 渐进增强原则
  • 响应设计
  • 强大的Ajax导航系统
  • 易用性
  • 支持触摸和鼠标事件
  • 统一的UI组件
  • 强大的主题化框架

基本应用

  • 默认情况下,移动浏览器,会像在大屏幕的Web浏览器那样显示你的页面,因此用户在移动设备看到这个页面的字体就比较小,所以要通过Meta元素可视区进行纠正。这个元素会通知浏览器使用移动设备的宽度作为可视区的宽度。

    <meta  name="viewport" content="width=device-width,intial-scale=1,user-scalable=no" />
    <!--这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小--> 另加载顺序应该为:
    <link rel="stylesheet" href="jquery.mobile.css"/>
    <script src="jquery.js"></script>
    <!--此处加入项目中其它js-->
    <script src="jquery.mobile.js"></script>
  • data-role帮助jQuery mobile知道哪些元素要处理。data-属性这个用法是HTML5推出的一个特性,它可以让开发人员添加任意属性到html标签中,只要添加的属性名有"data-"前缀。
    • data-role="button"按钮
    • data-role="collapsible"一个包含标题和内容的容器
    • data-role="collapsible-set"一个包含collapsible的容器
    • data-role="content"一个内容容器
    • data-role="dialog"一个对话框
    • data-role="fieldcontain"一个区域包裹容器
    • data-role="slider"一个翻转切换元素
    • data-role="footer"页面页脚容器
    • data-role="header"页面标题容器
    • data-role="listview"列表视图
    • data-role="navbar"导航栏
    • data-role="page"页面容器
    • data-role="slider"一个有范围值的文本框
    • type="checkbox"复选框
    • type="radio"单选框
    • <select></select>下拉框
    • type="text|number|search"文本框|数字框|搜索框
      //简单列表示例
      <ul data-role="listview" data-inset="true">
      <li><a href="#">123</a></li>
      <li><a href="#">123</a></li>
      <li><a href="#">123</a></li>
      </ul>
      //data-inset设置后列表的宽度就不会是100%,没设置就是100%的宽度
  • data-theme属性表示应用怎样的主题,值为a,b,c,d,e。

好吧就这么多了,作者这章也写得比较简单。

关于版本变化

本章主要讲了一下jQuery各个版本的变化,以及加入的新的变化。

我就捡1.6以后的,重要的,并且前面没有提到过的讲。

  • 1.6

    • 增加了prop方法,获取checked属性的时候会返回true,而之前的attr获取checked的时候只返回空。
    • 更新data方法,可以将元素上的数据属性转化为json形式的值,以驼峰形式展示。
  • 1.7
    • 新的事件API:on()和off()取代了之前版本中的bind(),delegate(),live()和unbind(),undelegate(),die().
    • isNumeric()判断传入的参数是否为数字

作者只写了1.7以前的版本变化,1.7以后的没写。

我在网上也看了一下,后面的版本大多都是修复BUG,另外提一下2系列的版本貌似是不再兼容低版本IE6/7/8,并且IE9/10中使用兼容性视图也会受影响。

【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化的更多相关文章

  1. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  2. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  3. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  4. 【总结整理】JQuery基础学习---样式篇

    进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...

  5. jQuery基础学习

    一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write ...

  6. jQuery基础学习(一)—jQuery初识

    一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...

  7. 【jQuery基础学习】01 jQuery选择器

    关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...

  8. jQuery基础学习3——jQuery库冲突

    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...

  9. jQuery基础学习2——DOM和jQuery对象

    <body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> < ...

随机推荐

  1. android桌面快捷方式跳转到指定activity

    AndroidManifest.xml 应用主入口配置: <activity android:name="com.*.cust.contacts.MainActivity" ...

  2. 关于Unity程序在IOS和Android上显示内嵌网页的方式

    近期因为有须要在Unity程序执行在ios或android手机上显示内嵌网页.所以遍从网上搜集了一下相关的资料.整理例如以下: UnityWebCore 从搜索中先看到了这个.下载下来了以后发现这个的 ...

  3. How to create an anonymous IDA PRO database (.IDB)

    Source: http://www.0xebfe.net/blog/2013/01/13/how-to-create-an-anonymous-ida-pro-database-dot-idb/ P ...

  4. Swift 3 新特性

    原文:What's New in Swift 3? ,作者:Ben Morrow,译者:kmyhy Swift 3将于今年下半年推出,为Swift开发者们带来了很多核心代码的改变.如果你没有关注过 S ...

  5. 关于fork的一道经典面试题

    这是一道面试题,问程序最终输出几个“-”: #include<stdio.h> #include<sys/types.h> #include<unistd.h> i ...

  6. 当在ECLIPSE中import现存项目时,如遇到版本不符

    当在ECLIPSE中import现存项目时,如遇到版本不符,可选Run-->Run Configurations,进入'Run Configurations'界面,选左边的Android App ...

  7. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

  8. EFW框架问题收集与答疑

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  9. 爆料喽!!!开源日志库Logger的使用秘籍

    日志对于开发来说是非常重要的,不管是调试数据查看.bug问题追踪定位.数据信息收集统计,日常工作运行维护等等,都大量的使用到.今天介绍著名开源日志库Logger的使用,库的地址:https://git ...

  10. HTML5开发手机项目—个人总结

    让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>   1)html上加 ...