【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化
2016-02-04 22:42
627 查看
关于 jQuery Mobile
jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目。它应用了HTML5和CSS3。
主要特性
基于jQuery构建。
采用与jQuery一致的核心和语法,还使用了jQuery UI的代码和模式。
兼容绝大部分手机平台
轻量级的库
模块化构建
HTML5标记驱动的配置
渐进增强原则
响应设计
强大的Ajax导航系统
易用性
支持触摸和鼠标事件
统一的UI组件
强大的主题化框架
基本应用
默认情况下,移动浏览器,会像在大屏幕的Web浏览器那样显示你的页面,因此用户在移动设备看到这个页面的字体就比较小,所以要通过Meta元素可视区进行纠正。这个元素会通知浏览器使用移动设备的宽度作为可视区的宽度。
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"文本框|数字框|搜索框
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 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过滤性选择器
- jquery的checkbox
- jQuery插件之validate
- [转]jquery 对 Json 的各种遍历
- jQuery性能优化
- jQuery第九章
- jQuery第十一章
- jQuery 前台注册验证!
- jQuery实现简单弹出窗口
- jQuery实现简单选项卡
- Jquery自定义图片上传插件
- jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
- jQuery.parseJSON() 函数详解
- 基于特定值来推断隐藏显示元素的jQuery插件
- jQuery中return false,e.preventDefault(),e.stopPropagation()的区别
- jQuery插件开发全解析
- jquery中的小图轮播效果
- jquery中的大图轮播还有遮罩效果
- JQuery中的遍历父/子/同胞
- jQuery基础选择器