jQuery基础学习10 简单了解jQuery Mobile及jQuery各个级别版本的变化

Posted 2020-06-13

关于 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中使用兼容性视图也会受影响。