码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 使用小结

时间:2015-07-25 22:52:17      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

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引用的是它本身.
 可以用这一点特性来判断这个窗口是否是顶层窗口

Jquery 使用小结

标签:

原文地址:http://www.cnblogs.com/allenhua/p/4676602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!