jQuery and jQuerymobile
2013-10-14 20:03
141 查看
JavaScript里面html元素的需要加” “jQuery 库 - 特性jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性:HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities
--------------------------------------------------------------------------jQuery 效果:淡入淡出。
Query 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。基础语法是:$(selector).action()美元符号定义 jQuery选择符(selector)“查询”和“查找” HTML 元素jQuery 的 action() 执行对元素的操作示例
$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$("p.test").hide() - 隐藏所有 class="test" 的段落$("#test").hide() - 隐藏所有 id="test" 的元素提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:$(document).ready(function(){ --- jQuery functions go here ---- });这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:试图隐藏一个不存在的元素获得未完全加载的图像的大小
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 选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
:empty | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
:input | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。触发实例:$("button#demo").[code]click()上面的例子将触发 id="demo" 的 button 元素的 click 事件。绑定实例:
$("button#demo").[code]click(function(){$("img").hide()})上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
$(selector).fadeToggle(speed,callback); speed=(“quick“or”slow“or number),callback 参数是 fading 完成后所执行的函数名称。jQuery fadeIn() :淡入,jQuery fadeOut():淡出jQuery fadeToggle():淡入淡出切换jQuery fadeTo():渐变到指定透明度(0~1),
$(selector).fadeTo(speed,opacity,callback);必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。---------------------------------------------------------jQuery 效果 - 滑动slideDown() slideUp() slideToggle()
$(selector).slideDown(speed,callback);-------------------------------------------------jQuery效果-动画animate()
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性,可以含有多个属性。可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!------------------------------------------------jQuery 停止动画
$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。---------------------------------------------------------------------jQuery Callback
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });获取某个元素显示状态$("p").css('display')document.getElementById("g").style.display----------------------------------------------------------------------jQuery-Chaining通过jQuery,你可以把动作/方法链接起来,即一条语句中允许多个jQuery方法(在相同的元素上)。---------------------------------------------------------------------jQuery -获得内容和属性三个简单实用的用于 DOM 操作的 jQuery 方法:text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值
$("#btn1").click(function(){ alert("Value: " + $("#test").val()); });
获取属性 - attr()
jQuery attr() 方法用于获取属性值。$("button").click(function(){ alert($("#w3s").attr("href")); });======================================================jQuery设置内容和属性。
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); });=====================================================
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。$("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); });
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });======================================================jQuery-添加元素jQuery append() 方法在被选元素的结尾插入内容。append():
$("p").append("Some appended text.");jQuery prepend() 方法在被选元素的开头插入内容。prepend():
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。function appendText() { var txt1="<p>Text.</p>";// 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text.");// 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3);// 追加新元素 }================================================jQuery after() 方法在被选元素之后插入内容。jQuery before() 方法在被选元素之前插入内容。
$("img").after("Some text after"); $("img").before("Some text before");<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>function afterText(){var txt1="<b>I </b>"; // 以 HTML 创建元素var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建元素var txt3=document.createElement("big"); // 通过 DOM 创建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素}</script></head><body><img src="/i/eg_w3school.gif" alt="W3School Logo" /><br><br><button onclick="afterText()">在图片后面添加文本</button></body></html>========================================================<br>换行。
jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:css("propertyname","value");下面的例子将为所有匹配元素设置 background-color 值:
实例
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:css({"propertyname":"value","propertyname":"value",...});下面的例子将为所有匹配元素设置 background-color 和 font-size:
实例
$("p").css({"background-color":"yellow","font-size":"200%"});返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");实例
$("p").css("background-color");核心页面组件page、header、content、footer
页面:<div data-role="page">标题栏:<div data-role="header">内容:<div data-role="content">注脚:<div data-role="footer">列表:<ul date-role="listview" date-inset="true" data-filter="true">
主题property:data-theme="a-z"Buttondata-iconpos="right"/"notext"ui-icon-name :custom Icondata-inline="true" :make button inlinedata-role="controlgroup" :make group buttonsdata-type="horizontal" :horizontal linecorner:圆角按钮$(".selector").buttonMarkup({"option","propertyname","property");:设置指定属性initSelector:$( document ).on("mobileinit",function(){ $.mobile.button.prototype.options.initSelector =".myButtons"
});button:event create$(".selector").buttonMarkup({create:function(event,ui){}});or bind an event listener to the buttoncreate event:$(".selector").on("buttoncreate",function(event,ui){});
相关文章推荐
- Using JQuery Mobile and JSON to Create Mobile Applications
- Using jQuery Mobile with MVC and Netduino for Home Automation
- HTML5, jQuery Mobile and ASP.NET MVC 4 – Using the ViewModel between the model and controller
- jQuery移动开发 jQuery Mobile Develop and Design 中文pdf扫描版
- jQuery - a fast and concise JavaScript library.
- jquery mobile 中文资料 http://www.lampweb.org/jquerymobile/
- XenApp Mobility Pack And Mobile SDK FAQ
- [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)【转】
- Mapreduce and Mobile Algorithms.
- 热门的技术教程!ASP.NET MVC, JQuery, ASP.NET AJAX and ADO.NET Entity Framework
- Using jquery to abtain and set values
- The Architecture Journal:Test-Driven Development and Continuous Integration for Mobile Applications
- jQuery-mobile事件监听与用法详解
- JQueryMobile + PhoneGap 经验总结
- RequireJS+JQueryMobile
- jquery-mobile学习笔记-把过滤框中提示语提示换成中文
- 博客园的手机版(非官方) MVC+jQuery.Mobile
- jquery_mobile移动端幻灯片效果,滑动切换,点击切换
- JQuery Mobile: Date picker
- jQuery&nbsp;Mobile系列之Checkboxes