jQuery and jQuerymobile
来源:互联网 发布:python多进程编程 编辑:程序博客网 时间:2024/05/18 03:41
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
Query 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
您也许已经注意到在我们的实例中的所有 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 值不等于 "#" 的元素。
jQuery 选择器
jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
$(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 参数是该函数完成后所执行的函数名称。
$(selector).slideDown(speed,callback);
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性,可以含有多个属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
$("p").hide(1000,function(){alert("The paragraph is now hidden");});
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){ alert("Value: " + $("#test").val());});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
$("button").click(function(){ alert($("#w3s").attr("href"));});
$("#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() 的回调函数
$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; });});
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
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");
<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>
jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery 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("propertyname");
$("p").css("background-color");
页面:<div data-role="page">
主题property:data-theme="a-z"
});
- jQuery and jQuerymobile
- jquerymobile
- jqueryMobile
- jQueryMobile
- jQuery Mobile (一)hello jquerymobile
- jquery和jqueryMobile的js文件引入
- sea.js+jQuery+jQueryMobile的模块化开发
- jQuery和jquerymobile 实现火车票查询
- jQuery Mobile基础01----jQuery Mobile-使用jQueryMobile
- jquery mobile 中文资料 http://www.lampweb.org/jquerymobile/
- 手机使用jqueryMobile,提示jquery mobile: Object [object Object] has no method 'jqmData'
- Jquery/jqueryMobile接收数据,并将其添加到table中且覆盖掉重复行
- jqueryMobile+phoneGap
- jquerymobile 研究
- jquerymobile 基础教程
- jquerymobile实例
- jqueryMobile+backbone
- JQueryMobile 基础
- Jump Game
- Struts2里ActionContext及获得HttpServletRequest对象
- 对C语言内存对齐的初步了解
- HDU 1498 坐标轴二分匹配
- Head First设计模式-工厂模式
- jQuery and jQuerymobile
- ios开发-适配图片大小
- c笔试题2
- unicode转utf-8
- Windows启动关闭Oracle监听和服务
- Java 面试题问与答:编译时与运行时
- bzoj 1901 动态区间第K大 树状数组套可持久化数据结构
- 斯坦福大学公开课《编程方法学》之笔记二——任务三:Karel与Java
- Unable to get view server protocol version from device