Jquery 使用小结

JQuery API中文档地址：http://www.hemin.cn/jq/index.html

JQuery 中文社区：http://www.jquery.org.cn/

1.siblings()

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

//同辈元素只能设一个样式为selected

$ele.parent().addClass("selected").siblings().removeClass("selected");

2.ajax

$.ajax({
url: "/API/VshopProcess.ashx",
type: 'post', dataType: 'json', timeout: 10000,
data: { action: "Test",testId:testId},
success: function (resultData) {
if (resultData != null) {
if (resultData.Status == "-1") {
alert_h("错误");
}
else {
var strs = "";
}
}
});
//CSharp代码
public voidTest(System.Web.HttpContext context)
{
string testId = context.Request["testId"];
}

3. toggle() 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的. http://www.hemin.cn/jq/toggle.html

closest():从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素. http://www.hemin.cn/jq/closest.html

nextAll():查找当前元素之后所有的同辈元素. http://www.hemin.cn/jq/nextAll.html

//点击更多一次,显示全部，再点击一次，伸缩
function OrderItemsDisplay(ele) {
//debugger;
var $tr = $(ele).closest("tr").nextAll();

$tr.each(function (index, tr) {
if (index > 0) {
$(tr).toggle();
}
})
}

4. var scrolltop = $(window).scrollTop(); 获取滚动条的高度

5. each的使用

<input name="CheckBoxGroup" type="checkbox" value='<%#Eval("OrderId") %>' />
var orderIds = "";
$("input:checked[name='CheckBoxGroup']").each(function () {
orderIds += $(this).val() + ",";
});

function GetProductId() {
var v_str = "";

$("input[type='checkbox'][name='CheckBoxGroup']:checked").each(function (rowIndex, rowItem) {
v_str += $(rowItem).attr("value") + ",";
});

if (v_str.length == 0) {
alert("请选择商品");
return "";
}
return v_str.substring(0, v_str.length - 1);
}

6.写方法能不写在dom里面，就不要写在DOM里面。可以在DOM加载完成时

$(document).ready(function () {
$("#dropBatchOperation").bind("change", function () { SelectOperation(); });
});
或
$(function($) {
$("#dropBatchOperation").bind("change", function () { SelectOperation(); });
});

7.Javascript 设置cookie

(1).设值：setMyCookie("DataCache_SkusHtml", skusHtml);

(2).取值：var skusHtml = setMyCookie("DataCache_SkusHtml");

//保存 cookies
function setMyCookie(key, value) {
if (arguments.length == 1) {
if (window.localStorage) {
return localStorage[key];
} else {
var objValue = null;
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == key) {
objValue = unescape(temp[1]);
break;
}
}
return objValue;
}
} else {
if (window.localStorage) {
if (typeof value != "string") {
value = JSON.stringify(value);
}
localStorage[key] = value;
} else {
var str = key + "=" + escape(value);
var expires = 0;
if (expires > 0) {//为0时不设定过期时间，浏览器关闭时cookie自动消失
var date = new Date();
var ms = expires * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str;
}
}
}

8.delegate 委派，委托,使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）

//id = grdProductSkus 为当前dom的父dom，如果没有，可以写成document, $(document).delegate..

$("#grdProductSkus").delegate(".ck_SkuId", "change", function () {
//至少一个checkbox没选，就去掉全选
if (!$(this)[0].checked) {
$("#chkAll").removeAttr("checked");
}
//如果下面所有的都选择了，那就全选
var chk = 0;
var $eleSkuId = $(".ck_SkuId");
$eleSkuId.each(function (i, elem) {
if ($(elem)[0].checked) {
chk++;
}
});
if ($eleSkuId.length > 0 && $eleSkuId.length == chk) {
$(":checkbox").attr("checked", "checked");
}
});

//全选和反选
$(".backAddOrder_tb").delegate('#chkAll', "change", function ()   {
var flag = $(this)[0].checked;
var $eleSkuId = $(".ck_SkuId");
$eleSkuId.each(function (i, n) {
$(n)[0].checked = flag;
});
});

9. (1) JSON.parse() 将 JSON 字符串转换成对象

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);

// Output: Aaberg, Jesper

(2) JSON.stringify() 将数组转换成 JSON 字符串

下面演示如何使用 JSON.stringify 将数组转换成 JSON 字符串，然后使用 JSON.parse 将该字符串重新转换成数组。

var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");

var newArr = JSON.parse(str);

while (newArr.length > 0) {
document.write(newArr.pop() + "<br/>");
}

// Output:
// ["a","b","c"]
// c
// b
// a

10.IFRAME 窗口之间如何传值，比如A页面打开B页面，需要把B页面的值传给到A页面上，其中A为IFrame嵌套引用的页面。

A页面,定义一个全局变量

window.skusListvalue = [];

B页面，skusStr为B页面取到的值

window.top.frammain.skusListvalue = skusStr;,frammain为IFrame的Id

然后A页面skusListvalue 就可以取到值了。

关闭窗口，可以调用 window.parent.$(".aui_close").click();

window.parent说明 window.parent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身.
可以用这一点特性来判断这个窗口是否是顶层窗口.

11.合并两个数组，并去掉重复项

//合并两个数组，并去掉重复的项
function ConcatArray(arry, orderItemArray) {
var newArray = [];
if (arry == null || arry.length <= 0) {
newArray = orderItemArray;
} else {
for (var i = 0; i < orderItemArray.length; i++) {
for (var j = 0; j < arry.length; j++) {
if (orderItemArray[i].SkuId == arry[j].SkuId) {
orderItemArray.splice(i, 1);//数组移除重复项
newArray = arry.concat(orderItemArray);
}
}
}
newArray = arry.concat(orderItemArray);
}
return newArray;
}

12. 获取url地址后面的参数值：比如http://127.0.0.1/EditPosts.aspx?id=4676602,可以用getParam("id");

function getParam(paramName) {
paramValue = "";
isFound = false;
paramName = paramName.toLowerCase();
if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
if (paramName == "returnurl") {
var retIndex = this.location.search.toLowerCase().indexOf('returnurl=');
if (retIndex > -1) {
var returnUrl = unescape(this.location.search.substring(retIndex + 10, this.location.search.length));
if ((returnUrl.indexOf("http") != 0) && returnUrl != "" && returnUrl.indexOf(location.host.toLowerCase()) == 0) returnUrl = "http://" + returnUrl;
return returnUrl;
}
}
else {
arrSource = this.location.search.substring(1, this.location.search.length).split("&");
}
i = 0;
while (i < arrSource.length && !isFound) {
if (arrSource[i].indexOf("=") > 0) {
if (arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase()) {
paramValue = arrSource[i].toLowerCase().split(paramName + "=")[1];
paramValue = arrSource[i].substr(paramName.length + 1, paramValue.length);
isFound = true;
}
}
i++;
}
}
return paramValue;
}

13.使用jqury 的ajax,调用后台处理文件，在处理文件里面不能跳转页面。需要返回成功之后，在jqury的回调函数里面跳转，但是跳转之后，比如在后面加return false;

Asp.net:
<form runat="server" clientidmode="Static" id="aspnetForm">
<%<asp:TextBox ID="txtCellPhone" name="txtCellPhone" CssClass="input" runat="server" clientidmode="Static" tabindex="3" />%>
</from>

Jquery:
//表单提交验证和服务器请求
$("#aspnetForm").submit(function () {
var flag = validateFunction.FORM_validate(regType);
if (flag) {
$(this).attr({ "disabled": "disabled" });
$.ajax({
type: "POST",
url: "Handler/UserHandler.ashx?action=testUser",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: $("#aspnetForm").serialize(),
async: true,
success: function (result) {
if (result.success) {
window.location.href = decodeURIComponent(result.msg);
} else {
$("#btnTest").removeAttr("disabled");
refreshCode();
alert(result.msg);
}
},
});
return false;
} else {
return false;
}
});

Csharp:
System.Web.HttpContext.Request.Form["btnTest$txtCellPhone"]

14.a 标签的href加入javascript:void(0);可以防止页面刷新，<a class="submit_jia" href="javascript:void(0)"/></a>

15. $(".code-btn").removeAttr("disabled").addClass("code-btnBlue");

$(".code-btn").attr("disabled", "disabled").removeClass("code-btnBlue");

16.jquery 禁止 form提交

$("#aspnetForm").on("submit", function () {
return false;
})

17.判断不为空

var txtTranPassword = $("#txtTranPassword").val();
if (!txtTranPassword) {
alert("密码不能为空");
return false;
}