查看插件效果 本插件的作用是为了支持table鼠标经过变色和选中效果，原始版本是只能单列或者单行选取。 修改了后的版本只是单个表格选取，配置参数如下： options = { ltColor: ‘#fbfbfb’, // 行背景交互色。默认为 ‘#ECF6FC’， 设置为 ‘none’ 则不使用背景交互色。 bgColor: ‘#fff’, // 背景色（默认背景色为白色）。 hoverColor: ‘#eff6ff’, // 当鼠标在行上悬停时的背景色。默认为 ‘#BCD4EC’。 hoverClass:”, // mouseover样式类；hoverColor属性优先。 hiliteColor: ‘#ffffe5′, // 行高亮色。默认为 ‘yellow’，设置为 ‘none’ 时关闭高亮。 hiliteClass:”, // 行或列高亮时使用的样式类，当设置了hiliteColor时被优先使用。 oneClick: false, // 每次只允许一行或一列高亮，当点击新行/新列时取消当前高亮。默认为false。 hover:’row’, // 设置mouseover特性，可使用如下值：’row’、’column’、’cross’ 。默认值为 ‘row’。 click:’row’, // 设置鼠标点击时的高亮选项，可用值：’row’、’column’、 ‘cross’。当设置为 ‘row’，点击时行高亮；当设置为 ‘column’，点击时列高亮；当设置为 ‘cross’，点击时行和列同时高亮。默认值为 ‘row’。 banColumns: [], [...]
今天心血来潮，就研究了一下JQ自定义动画的一些简单用法。点击这里查看效果 下面是JS代码. $(function(){ //定义easing jQuery.easing.def = ‘easeInQuad’; var sel1 = $(“<select>”).appendTo(‘#controls’); for (x in jQuery.easing) { if (x != ‘linear’ && x != ‘swing’) sel1.append($(‘<option>’).attr(‘value’, x).text(x)); } sel2 = sel1.clone().appendTo(‘#controls’); sel3 = sel1.clone().appendTo(‘#controls’); sel4 = sel1.clone().appendTo(‘#controls’); sel1.val(‘easeInOutCirc’); sel2.val(‘easeOutBounce’); sel3.val(‘easeInCubic’); sel4.val(‘easeInElastic’); //第一个动画 单向运动 $(“.inline_box:eq(0)”).bind(‘click’, function(){ var _this = $(this), _width = _this.width() – _this.find(‘span’).width(); _this.find(‘span’).animate({left: ‘+’+ [...]
1.通过方法返回Jquery对象实例 //用 var someDiv = $(‘#someDiv’).hide(); //代替 var someDiv = $(‘#someDiv’); someDiv.hide(); 2.使用find来查找 //用 $(‘#someDiv’).find(‘p.someClass’).hide(); //代替 $(‘#someDiv p.someClass’).hide(); 因为可以不必触发Jquery的Sizzle引擎，同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符 3.不要滥用$(this) //用 $(‘#someAnchor’).click(function() { alert( this.id ); }); //代替 $(‘#someAnchor’).click(function() { alert($(this).attr(‘id’)); }); 4.ready的简写形式 //用 $(function() { }); //代替 $(document).ready(function() {}); 5.让你的代码安全 //方法1（使用noConflict） var j = jQuery.noConflict(); j(‘#someDiv’).hide(); // The line below will reference some other [...]
最近在做一个相册功能过的时候，需要动态改变img的src地址，并且在图片加载完成后再加载对应的相片评论。需要用到的一个小功能，如下: var objImagePreloader = new Image(); objImagePreloader.onload = function() { $(‘#lightbox-image’).attr(‘src’,'/demo.jpg’); //do something objImagePreloader.onload=function(){}; }; objImagePreloader.src = ‘/demo.jpg’;
今天在做项目的时候发现的，例子如下 $(function(){ var temp_test = “hello”; $(“#button”).click(function(){ $.ajax({ type: “post”, url: “http://parazzi.me/”, dataType: “html”, cache: false, success: function(msg){ temp_test = “Hi”; } //你们认为现在temp_test=？呢 alert(temp_test); }); //end the ajax }); //end the click }) 很纳闷，temp_test的值并没有改变，还是”hello”。想不通是什么原因。 后来换了一个方法,如下 $(function(){ var temp_test = {}; temp_test.yes = “hello”; $(“#button”).click(function(){ $.ajax({ type: “post”, url: “http://parazzi.me/”, dataType: “html”, cache: false, success: function(msg){ [...]
看例子： 1 2 3 为上面的分别加上一个click事件。相信大家随手拈来都能写出 $(“li a”).click(function(){ //to do some thing }) 但是我们今天不是讨论这个。今天的问题是，假如我们要获取上面的第二个a的href属性的时候(a并无id)，该如何办? 可能会很自然的想到： var a_arr = $(“li a”); alert(a_arr.lenght); //有长度，说明返回的是一个数组 var href = a_arr[1].attr(“href”); 这样的方式来获取指定a的href属性，实际上这样是错误的。a_arr中存储的实际上这样的一个数组: { ’1′, ’2′, ’3′ } 而并非是a这个对象。所以获取的方法是: var href = a_arr[1].href; 反之，修改或者添加一个不存在的属性也很简单。例如： a_arr[1].href = “http://x.com”; a_arr[0].rel = “hello world”;
