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(){ //程序段 }) ...
随机推荐
- 1、SQL基础整理(基本查询)
分离.附加.备份.还原 --去重 select distinct 列名from表名 --更新 update fenshu set name = ‘李四’where code = 9 --更改表名 sp ...
- 转载:CancellationToken
http://www.cnblogs.com/Abbey/archive/2011/09/12/2174208.html 最近在学习.NET中的线程同步.其中一个重要的技术叫线程的取消(中止),涉及的 ...
- Autoresizing和AutoLayout
1 使用Autoresizing的方式进行界面布局 1.1 问题 Autoresizing是IOS旧版的自动布局技术,现在仍然被很多企业使用.本案例将学习如何使用Autoresizing完成界面的布局 ...
- msp430 问题及解决记录
----------------------------- 2015.4.28 问题:开发板串口显示的内容为乱码 解决:使用的是原先产品主板的15200的波特率设置,但看来或者是开发板不支持11520 ...
- VS2010 安装使用STLPort
VS2010 安装使用STLport 1.本机环境 win7 64位 visual studio 2010 中文旗舰版 STLport-5.2.1.tar.bz2 2.下载STLport http:/ ...
- TCP三次握手连接与四次握手断开
http://blog.csdn.net/whuslei/article/details/6667471(三次握手与四次握手) 1. TCP的三次握手最主要是防止已过期的连接再次传到被连接的主机. 如 ...
- Spring学习笔记--spring+mybatis集成
前言: 技术的发展, 真的是日新月异. 作为javaer, 都不约而同地抛弃裸写jdbc代码, 而用各种持久化框架. 从hibernate, Spring的JDBCTemplate, 到ibatis, ...
- ZOJ 1241 Geometry Made Simple
/*Mathematics can be so easy when you have a computer. Consider the following example. You probably ...
- 关于Ajax知识点小节
URL:统一资源定位符 网络的七层协议:网卡 驱动 网络层(ip) 传输层(tcp udp) 会话层( ) 应用层(http.) restful表征状态转移(一种表征架构) CURD 增删改查 ...
- 【转】Entity Framework技术导游系列开篇与热身
转自:http://blog.csdn.net/bitfan/article/details/12779517 Entity Framework走马观花 之 把握全局 ================ ...