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;
}
Jquery 使用小结的更多相关文章
- Jquery Mobile 小结
第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...
- jQuery用法小结
jQuery加载1.$(document).ready()2.添加css样式:单个:$("p").css("color","red"); 多 ...
- jQuery学习小结3——AJAX
一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...
- jQuery学习小结2——动画
一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- jquery 应用小结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 学习小结
1,jQuery是一个简单的JavaScript库,提供了一系列辅助函数:以下简称jq; 使用jq时,通常将jq代码放到head部分的事件处理方法中,也可以将其单独写出 .js 文件,引入:但无论哪种 ...
- jQuery使用小结
$(document).ready( function(){} ); 选择器 $("p:first") 第一个元素 $("p.intro" ...
- jquery技巧小结
由于主要还是负责后端,所以前端很多东西都不熟悉,jQuery作为web开发必备技能,有很多知识点,老是记不清楚,所以在这边整理一下. 1.加载页面后执行 $(function(){ //程序段 }) ...
随机推荐
- dat文件中如何编写DOS的多行命令
dat文件中如何编写DOS的多行命令 2012-10-15 11:29 四海柔情108 分享到: 2012-10-16 23:36 提问者采纳 你问的应该是BAT文件吧?BAT是DOS命令的批 ...
- JS获取年月日
<script language="javascript"> var myDate = new Date(); myDate.getYear(); //获取当前年份(2 ...
- 常用的php字符串处理函数
php常用的字符串处理函数 1.trim():从字符串的两端删除空白字符和其他预定义字符 ltrim():从字符串的左端删除空格和其他预定义字符 rtrim():从字符串的末端开始删除空白字符和其他预 ...
- Golang 交叉编译
各平台的GOOS和GOARCH参考 OS ARCH OS version linux 386 / amd64 / arm >= Linux 2.6 darwin 386 / amd64 OS X ...
- MySQL表名、列名区分大小写详解
前言:出现的问题 在本地数据库上执行修改银行卡没有报错 但线上执行报错 发现是表找不到,发现表名不对应该是card_cardinfo,但本地上没有问题,能正常修改,然后在数据库里测试,发现本地库(wi ...
- JAVA 打印指定月份日历
package learnExercise; import java.util.Scanner; public class PrintCalender { /** * @param args */ p ...
- Sqlserver 还原那些事
由于想总结的东西比较杂乱,就起了这么一个题目 1.当还原数据库,没有选择结尾日志备份时,会出现下图异常: 这是因为,对于使用完全恢复模式或大容量日志恢复模式的数据库,在大多数情况下,您必须在还原数据库 ...
- HDU 5775 树状数组
Bubble Sort Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- hdu 1548 (dijkstra解法)(一次AC就是爽)
恭喜福州大学杨楠获得[BestCoder Round #4]冠军(iPad Mini一部) <BestCoder用户手册>下载 A strange lift Time Limit: 200 ...
- 将Excel生成实体类
package com.excel.test; import java.util.List; public class createUtil { public static String append ...