[JS] jquery控件基本要点备份

(1)CDN

Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Microsoft CDN:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

(2)$(function(){});
$(document).ready(function(){
--- jQuery functions go here ----
});

这句代码是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
例子:试图隐藏一个不存在的元素。获得未完全加载的图像的大小.
特别注意:当页面加载时，使用ajax从服务器取得页面初始化数据时，需要将查找放在ajax的success回调中执行。

(3)选择器

1)jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2)jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3)jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[type]") 选取所有带有 type 属性的元素。
$("[type='hidden']") 选取所有带有 type 值等于 "hidden" 的元素。
$("[type!='hidden']") 选取所有带有 type 值不等于 "hidden" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

4)jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");

5)更多的选择器实例
$(this) 当前 HTML 元素
$("ul li:first") 每个<ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

(4)jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

(5)ajax异步请求相关方法和操作
$.ajax();
$.post(URL,data,callback);
$.get(URL,callback);

//ajax请求
$.ajax({
type: "POST",
url: "/project/XXX.action",
data: {
username:$("#username").val(),
content:$("#content").val()
},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容

var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});

$('#resText').html(html);
}
});

//post、get请求
var url = "/project/XXX.action";
var args = {
参数名1 : 参数值1,
参数名2 : 参数值2,
参数名3 : 参数值3
};

$.post(url, args, function(data){
console.log(data);
return false;
});

$.get(url, function(data){
console.log(data);
return false;
});

(6) 获取屏幕高度、宽度——常用在手机页面自适应中

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

// 获取页面的高度、宽度
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}

// 滚动条
document.body.scrollTop;
$(document).scrollTop();

(7) 长按3秒触发某事件
var timeout = undefined;

$("#mydiv").bind("mousedown", function() {
timeout = setTimeout(function() {
//某事件
}, 3000);
});

$("#mydiv").bind("mouseup", function() {
clearTimeout(timeout);
});

(8) 判断checkbox（复选框）是否被选中

<input type="checkbox" name="check" id="checkbox"/>

$("#checkbox").click(function() {
if (!!$("#checkbox").attr("checked")) {
alert("已选中");
}
});

(9) 判断radio选中值
<script type="text/javascript" language="javascript">
/*------判断radio是否有选中，获取选中的值--------*/
$(function(){
$("#btnSubmit").click(function(){
var val=$('input:radio[name="sex"]:checked').val();
//或者 var val=$('input:radio[name="sex"]').is(":checked");
if(val==null){
alert("什么也没选中!");
return false;
}
else{
alert(val);
}
var list= $('input:radio[name="list"]:checked').val();
//或者 var list=$('input:radio[name="sex"]').is(":checked");
if(list==null){
alert("请选中一个!");
return false;
}
else{
alert(list);
}
});
});
</script>
<body>
<form id="form1" >
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br />
<input type="radio" name="list" value="十分满意" />十分满意
<input type="radio" name="list" value="满意" />满意
<input type="radio" name="list" value="不满意" />不满意
<input type="radio" name="list" value="非常差" />非常差
<br />
<input type="submit" value="submit" id="btnSubmit" />
</form>
</body>

(10) select相关取值

获取：
获取select选中的 text : $(".selector").find("option:selected").text();
获取select选中的 value: $(".selector").val();
获取select选中的 索引: $(".selector").get(0).selectedindex;

设置：
设置value为pxx的项选中: $(".selector").val("pxx");
设置text为pxx的项选中: $(".selector").find("option[text='pxx']").attr("selected",true);

级联操作：
很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。
如：
$(".selector1").change(function(){
$(".selector2").empty();// 先清空第二个
var option = "循环生成的多个option代码";
$(".selector2").append(option);
});

先到这里，以后用到什么的时候再继续补充。

附录：
① ajax详细参数解析：
url: 要求为String类型的参数，发送请求的地址。（默认为当前页地址）

type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住 浏览器，用户其他操作必须等待请求完成才可以执行。

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。对于经常变 化的数据，请把cache设置为false;以免读取旧数据。

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。
get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，
例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组，JQuery将自动为不同值对应同一个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。
如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。
注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。
在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错
误信息、捕获的错误对象(可选)。
ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}

contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认
为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。
提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的
dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}

global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局
ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。
服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。
该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如
{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度
来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM
树信息或者其他不希望转换的信息，请设置为false。

scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时
才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。