JAVASCRIPT 框架>>
jQuery
jQuery
jQuery 是目前最受欢迎的 JavaScript 框架 jQuery 是为处理 HTML 事件而特别设计的
<script type="text/javascript" src="jquery.js"></script>
特性
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
操作
基础语法是:$(selector).action()
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
$("p").css("background-color","red");
jQuery 其他 选择器
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
jQuery 事件函数
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<button>Click me</button>
原则
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突,则重命名 jQuery 库
jQuery 事件 更多http://www.w3school.com.cn/jquery/jquery_ref_events.asp
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
...
jQuery Mobile
jQuery Mobile
案例
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
<p>欢迎!</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
//-------------------------
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
data-role="footer" 创建页面底部的工具栏
在 jQuery Mobile 中内部页面跳转
<a href="#pagetwo">转到页面二</a>
<a href="#pageone">转到页面一</a>
将页面用作对话框
<a href="#pagetwo" data-rel="dialog">转到页面二</a> ///这一句让页面2成为了对话框
jQuery Mobile 过渡效果
<a href="#anylink" data-transition="slide">滑动到页面二</a>
data-transition="slide"支持以下几种
fade 默认。淡入淡出到下一页。 测试
flip 从后向前翻动到下一页。 测试
flow 抛出当前页面,引入下一页。 测试
pop 像弹出窗口那样转到下一页。 测试
slide 从右向左滑动到下一页。 测试
slidefade 从右向左滑动并淡入到下一页。 测试
slideup 从下到上滑动到下一页。 测试
slidedown 从上到下滑动到下一页。 测试
turn 转向下一页。 测试
none 无过渡效果。
在 jQuery Mobile 中创建按钮
使用 <button> 元素 <button>按钮</button>
使用 <input> 元素 <input type="button" value="按钮">
使用 data-role="button" 的 <a> 元素 <a href="#" data-role="button">按钮</a>
data-inline="true" 两个或多个按钮并排显示
<div data-role="controlgroup" data-type="horizontal">
<p>水平分组:</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div><br>
<div data-role="controlgroup" data-type="vertical">
<p>垂直分组(默认):</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div>
后退按钮data-rel="back"
data-corners true | false 规定按钮是否有圆角。
data-mini true | false 规定是否是小型按钮。
data-shadow true | false 规定按钮是否有阴影。
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
图标
<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>
data-icon="refresh"
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="arrow-u" 上箭头
data-icon="arrow-d" 下箭头
data-icon="plus" 加
data-icon="minus" 减
data-icon="delete" 删除
data-icon="check" 检查
data-icon="home" 首页
data-icon="info" 信息
data-icon="grid" 网格
data-icon="gear" 齿轮
data-icon="search" 搜索
data-icon="back" 后退
data-icon="forward" 向前
data-icon="refresh" 刷新
data-icon="star" 星
data-icon="alert" 提醒
定位图标上、右、下或左。
data-iconpos="top"
data-iconpos="right"
data-iconpos="bottom"
data-iconpos="left"
只显示图标
data-iconpos="notext"
标题栏
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>
页脚栏
<div data-role="footer" class="ui-btn">
<a href="#" data-role="button">转播到新浪微博</a>
<a href="#" data-role="button">转播到腾讯微博</a>
<a href="#" data-role="button">转播到 QQ 空间</a>
</div>
data-type="horizontal" 组里面的垂直对齐
data-position="inline" 内嵌式
data-position="fixed" 点一下变成内嵌
data-position="fixed" data-fullscreen="true" 点一下 上下标题都没有了
导航栏
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">首页</a></li>
<li><a href="#" data-icon="arrow-r">页面二</a></li>
<li><a href="#" data-icon="search">搜索</a></li>
</ul>
</div>
活动按钮
class="ui-btn-active"
class="ui-btn-active ui-state-persist"
可折叠的内容块
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>
data-collapsed="false"如需在页面加载时扩展内容
嵌套的可折叠块
<div data-role="collapsible">
<div data-role="collapsible">
……
可折叠集合
<div data-role="collapsible-set">
<div data-role="collapsible">…………
[更新中……。http://www.w3school.com.cn/jquerymobile/jquerymobile_list_views.asp]
HTML DOM
AJAX
JSON
JAVASCRIPT 框架>>的更多相关文章
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- 顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...
- JavaScript框架设计(三) push兼容性和选择器上下文
JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...
- JavaScript框架设计(四) 字符串选择器(选择器模块结束)
JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...
- 偶的《javascript框架设计》终于出版
#cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有 ...
- JS读书心得:《JavaScript框架设计》——第12章 异步处理
一.何为异步 执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...
- 15款加速 Web 开发的 JavaScript 框架
JavaScript 可以通过多种方式来创建交互式的网站和 Web 应用程序.利用 JavaScript,可以让你移动 HTML 元素,创建各种各样的自定义动画,给你的访问者更好的终端用户体验. 对于 ...
- T3 - 构建大型 Web 应用的 JavaScript 框架
T3 是一个用于构建大型 Web 应用程序的客户端 JavaScript 框架.T3 和大多数的 JavaScript 框架不同.它的意思是一小部分的整体架构,它允许你建立可扩展的客户端代码.T3 应 ...
- 【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...
- 8款超实用JavaScript框架
下面盘点了8款实用的JavaScript框架: 1. Hammer.js Hammer.js是被广泛使用的轻量级JavaScript框架,它提供了常用触摸操作的规范,比如收缩.拖放.双击和删除等等.它 ...
随机推荐
- 利用VR技术,走进白宫,走进奥巴马
奥马巴卸任演讲由诺基亚OZO全程360° VR直播,并不是每个人都能去白宫拜访,一窥白宫内部的模样,更不可能有多少人有机会在奥马巴面前听他讲讲他的家. 现在前任总统巴拉克奥巴马以及其夫人米歇尔奥巴 ...
- 面试题-Java基础-Applet部分
java applet是能够被包含在HTML页面中并且能被启用了java的客户端浏览器执行的程序.Applet主要用来创建动态交互的web应用程序.
- CODE[VS]-蛇形矩阵-模拟-天梯白银
题目描述 Description 小明玩一个数字游戏,取个n行n列数字矩阵(其中n为不超过100的奇数),数字的填补方法为:在矩阵中心从1开始以逆时针方向绕行,逐圈扩大,直到n行n列填满数字,请输出该 ...
- Qt 打开指定的文件
最近项目用到使用本地的office打开指定的文件,记录一下代码: QString fileName = QFileDialog::getOpenFileName(this, tr("Open ...
- win7安装iis及web配置教程
下面iis教程只适用win7或win8系统的服务器配置,如果您使用的是xp系统或win2003系统请看:xp或2003安装iis及web配置教程 .注:新手如果嫌iis安装配置麻烦建议下载PageAd ...
- 五大科技巨头VR/AR专利报告,Magic Leap以22.6%领跑
在十月份发布的<VR/AR专利技术深度分析报告>指出,VR.AR行业的专利多被佳能.索尼.微软.谷歌等科技巨头"包养",但是并没有对这部分进行详细分析.近日,风投公司C ...
- URLEncode编码和URLDecode解码
String text1 = java.net.URLEncoder.encode("中国" ,"utf-8" ); String text2 = java.n ...
- C# ExcelHelper
using System; using System.IO; using System.Data; using System.Collections; using System.Data.OleDb; ...
- 学习任务在继续...css...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- many bugs report when test bcm bt/wifi chip
after change aerial , many bugs diappear .