文档在完全加载之后才运行,jquery在元素上A绑定事件时,首先会在docment中查找该元素A,如果没有找到则绑定失败。
$(function(){}); //$ <==> JQuery() //$() <==> $( document ).ready()
//左右折叠展开:
$("#mapOp").animate({width:'toggle'},350);
$(selector).animate({params},speed,callback);//Callback 函数在当前动画 100% 完成之后执行。
$(selector).stop(stopAll,goToEnd);//jQuery stop() 方法用于停止动画或效果,在它们完成之前
$('.msg').find('.msg-content').css({
});
$("click", function(){ alert("Hello World!"); });//事件类型,回调函数
//设置属性
$("#foldmMapOp").attr({ 'title': '展开')
//获取属性
$("#test").attr("value") //<==>$("#test").val()
//设置样式
$('#mapCon').css({
"position": "absolute",
"height": "calc(100% - 51px)",
"width": "calc(100% + 230px)",
'background':'url(img/webmap.png) 148px -76px white'
})
$.post(url,data,function(data,status){}) //$(selector).post(URL,data,function(data,status,xhr),dataType返回类型)
//$.post(地址,数据,请求成功后所执行的函数名 );
$.get() //方法通过 HTTP GET 请求从服务器上请求数据。
//$.get(URL,function(data,status){});
//load() 方法是简单但强大的 AJAX 方法
$(selector).load(URL,data可空,callback);
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。// 从服务器加载数据,并把返回的数据放置到指定的元素中
//所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
$.ajax({
headers: { Accept: "application/json; charset=utf-8" },
type: "get",
success: function (data) { },
complete:function( jqXHR, textStatus ){ if(jqXHR.status==201){} }
//jqXHR包含responseText和responseXML属性,以及getResponseHeader()方法
//textStatus:("success","notmodified","nocontent","error","timeout","abort",或"parsererror")
});
取高度:
width() height() innerWidth() innerHeight() #padding
outerWidth() outerHeight() #border
outerWidth(true) outerHeight(true) #margin
阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)
return false;
//当你每次调用”return false“的时候,它实际上做了3件事情:
//1 event.preventDefault();
//2 event.stopPropagation();
//3 停止回调函数执行并立即返回。
$("p.test").hide()
$(this).hide(); //$(this)选取当前 HTML 元素 ,hide(”效果“,函数) 隐藏类为test的p元素,使其style的display:none;
toggle()//切换显示
toggleClass(className) //add or delete ,no effect to otherclassName
switchClass(removeClassName,addClassName [,duration] [,easing] [,complete])
设置内容
$("#test").text("Hello world!"); //获得内容 - text()、html() 以及
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
//attr() 方法设置或返回被选元素的属性和值
$("img").attr("width","500");
val() 方法返回或设置被选元素的 value 属性。
jQuery UI 工作原理 //$("#elem" ).progressbar(); //此代码把 元素 转化为一个进度条控件
Bootstrap 工作原理 //通过属性标签 或 css类(80%) 或 类似jQuery UI 把 元素 转换为好看的样式 或 控件
//绑定事件:
$("p").bind("click", {msg: "你刚点击了!"}, handlerName)
function handlerName(e) { alert(e.data.msg);}
//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素:
$("p").siblings(".selected")
jQuery = new jQuery.fn.init( selector, context ) //返回的还是jQuery
jQuery.fn = jQuery.prototype = {键值对集} //jquery的属性集
jQuery.fn.extend = jQuery.extend
$.extend( target [, object1 ] [, objectN ] ) //合并目标,被合并对象1,被合并对象n
$.Deferred() 构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传递任何同步或异步功能成功或失败的状态。 它是jQuery对Promises接口的实现
$.Deferred() 生成一个deferred对象。
deferred.done() 指定操作成功时的回调函数
deferred.fail() 指定操作失败时的回调函数
deferred.promise() 只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变
deferred.resolve() 手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法
deferred.reject() 调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法
$.when() 为多个操作指定回调函数
eferred.then()有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。
JQuery Mobile
HBuilder的内置服务器有问题,get不报错,post就报错,草。。
<a href="#第二页" data-transition="slide" data-direction="reverse">切换</a>
反向滑动效果到第二页
<a href="#第二页" data-role="button">按钮</a>
把超链接改为按钮,变好看了666
<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>
内联:被紧紧包裹着
返回按钮<a href="#" data-role="button" data-rel="back">返回</a>
表单元素必须有一个标签设置 for 属性 来匹配
jquery mobile页面默认采用ajax方式进行交互,而ajax方式下是不支持f://的,也就是本地文件,所以有两种解决办法:
<a data-ajax="false"或者 rel="external"
<form data-ajax="false">
id不要重复
500错误:1.服务器问题,换个服务器
用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可以在onsubmit中验证.但是从事件触发顺序上来说,onclick更早.顺序是:
用户点击按钮->onclick->如果onclick返回有效或未处理onclick则提交表单->onsubmit->如果onsubmit未处理或返回true,则提交,否则取消提交.
onsubmit中返回false会引起取消表单提交;
onclick中返回false则会引起此次点击操作被判断为无效,则也就不会引起表单
表单提交跳转不了,显示内部服务器错误 :form的data-ajax被关闭,原页面会被整体刷新
$.mobile.changePage("content/first.html","slidedown", true, true);
DOJO
// dojo 1.7(AMD)//加载dojo / fx.js:
require([ “dojo / fx” ], function (fx ){
//写下你的代码
});
// Dojo <1.7 //加载dojo / fx.js:
dojo.require(“dojo.fx” );
//注意require的顺序,和回调函数的参数顺序要一致!!!!!!,不然会出现未定义错误!
//Dojo 中 djConfig="parseOnLoad: true" 的用途:启用Dojo的解析模块对Dojo标签进行解析
|