Jquery 扩展方法

2016-02-19 13:05 2 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的Jquery 扩展方法,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

于是翻出了前年的Jquery中文文档。 大致浏览了下Jquery的方法。发现Jquery如此之强大,怎么以前就没有发现呢?于是就亲手写了基于Jquery的扩展函数,代码如下:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
jQuery.fn.__toggleCheck = function (idPrefix) {
var c = false;
$(this).click(function () {
if (c) c = false;
else c = true;
$("input[type=checkbox][id^=" + idPrefix + "]").each(
function () {
this.checked = c;
}
);
});
};
jQuery.fn.__setRepeaterStyle = function (itemTag, evenStyle, hoverStyle) {
$("#" + this.attr("id") + " " + itemTag + ":odd").addClass(evenStyle);
var cssOriginal = "";
$("#" + this.attr("id") + " " + itemTag + "").mouseover(function () {
cssOriginal = $(this).attr("class");
$(this).addClass(hoverStyle);
});
$("#" + this.attr("id") + " " + itemTag + "").mouseout(function () {
$(this).removeClass();
if (cssOriginal.length 0) {
$(this).addClass(cssOriginal);
}
});
};

以上函数调用如下:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
div
input type="checkbox" /1
input type="checkbox" /2
input type="checkbox" /3
input type="checkbox" /4
input type="checkbox" /5
input type="checkbox" /6
input type="checkbox" /All/div
divCheck/div
/div
style type="text/css"
table tr {}
table .rowStyle { background:#dedede;}
table .hoverStyle {font-weight:bold; color:Red; background-color:Gray;}
/style
table
tr
td1/td
/tr
tr
td1/td
/tr
tr
td1/td
/tr
/table
script type="text/javascript"
$("#a_All").__toggleCheck("a_");
$("#a_All1").__toggleCheck("a_");
$("#tb").__setRepeaterStyle("tr", "rowStyle", "hoverStyle");
/script

来源:https://www.tulaoshi.com/n/20160219/1602954.html

延伸阅读
标签: Web开发
操作下拉列表 添加选项列表 $(this).get(0).options.add(new Option(text,value)); 清空列表 $(this).get(0).options.length=0; 删除指定索引的选项 $(this).get(0).remove(index); 设定需要选中项的值 $(this).get(0).value=value; 获取当前选中选项的文本 $(this).get(0).options[index].text; 批量修改CSS $(this).c...
标签: Web开发
注意:$.get()和$.post()方法是jQuery中的全局函数。前面讲到的load()方式是对jQuery对象进行操作的。 1、 $.get()方法 $.get()方法使用GET方式来进行异步请求。 它的语法结构为: $.get( url [, data] [, callback] [, type] ) $.get()方法参数解释如下表: 参数名称 类 型 说 明 urlString请求的HTML页的URL...
标签: Web开发
需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可。 //遍历option和添加、移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(t...
标签: Web开发
jQuery事件处理 ready(fn) 代码: $(document).ready(function(){ // Your code here... }); 作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。 bind(type,[data],fn) 代码: $("...
标签: Web开发
这是以前整理的一些代码,与JQer分享,希望对大家能有些帮助。 话说功能愈发强大的JQuery体积也不再小巧,55k(Minified)的大小虽然不能说很大,但如果用在一些小型项目或网站上,也不算小,那么我们何不根据自己项目特点,简化或改写JQuery呢,Follow me! 首先是JQuery的核心代码:代码: //不完全一致,但实现手段大致如此 (function(){ &n...

经验教程

373

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部