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(){ //程序段 }) ...
随机推荐
- cookie 作用域
在http://xiaoyou-game.com/user/login方法中设置cookie: setcookie('username',$username,time()+3600,'/user/', ...
- IDataReader转换成list通用方法
public static IList<T> ReaderToList<T>(this IDataReader dr) { //DateTime dt = DateTime.N ...
- Tranparent/cutout/diffuse
Shader "Tranparent/cutout/diffuse" { Properties { // _Color ("Main Color", Co ...
- Android 常用的常量
常用的Android常量 1.Activity Action 字符串常量("android.intent.action."+) 描述ALL_APPS ...
- 《MORE EFFECTIVE C++》条款27 要求或者禁止对象分配在堆上
1. 要求对象分配在堆上 临时对象一般是存在于栈中的,或者是静态对象存在于常量存储区的.那么当创建一个这样的对象的时候,一般是需要隐式或显式地调用构造函数,在销毁的时候调用析构函数的.可以从这方面入手 ...
- JavaScript数据结构——集合、字典和散列表
集合.字典和散列表都可以存储不重复的值. 在集合中,我们感兴趣的是每个值本身,并把它当作主要元素.在字典和散列表中,我们用 [键,值] 的形式来存储数据. 集合(Set 类):[值,值]对,是一组由无 ...
- javascript(脚本语言)
javascript(脚本语言)一.注释语法:1.单行注释 //注释内容2.多行注释 /*注释内容*/二.输出语法js语言格式,尽量靠下写,属双标签<script type=”text/java ...
- PostgresSQL 学习资料记录处
PostgresSQL 学习资料记录处 博客:http://francs3.blog.163.com PostgreSQL9.4 中文手册:http://www.postgres.cn/docs/9 ...
- 关于 System.IO.FileAttributes 的 Reparse Points
关于Reparse Points找到下面的解释,要是能有更进一步的解释说明就更好了 Reparse Points其实是一个用户自定义的数据集合,它可以包含在一个文件或目录中.这种格式的数据能够被特定的 ...
- 如何在ALV_Grid的函数中定义下拉列表
转自 http://www.cnblogs.com/VerySky/articles/2392262.htmlABAP--如何在ALV_Grid的函数中定义下拉列表 REPORT. ********* ...