随笔分类 - 锋利的jQuery
摘要：编写一个设置和获取元素的color的插件：首先实现第一个功能，设置： ;(function($){ $.fn.extend({ color:function(value){ return this.css...
阅读全文
摘要：$.extend()主要有两个功能：1.扩展jQuery对象jQuery.extend({ min: function(a, b) { return a 22.一个强大的功能，扩展已有的对象：$.extend(target, obj1,...[objN]) : 用一个或多个其他对象来扩展一个对象...
阅读全文
摘要：插件的基本要点：1.命名推荐：jquery.[插件名].js，避免和其他js库插件混淆。2.对象方法附加到：jQuery.fn上，全局函数附加到：jQuery对象本身。3.在插件内部，this指向当前通过选择器获取的jQuery对象，非dom对象。4.如果选择器获取多个元素，可通过this.each...
阅读全文
摘要：一个简单的拖动排序效果，具体请参看jQuery ui官网demo。jquery ui : http://jqueryui.com/sortable例子：http://jqueryui.com/sortable/#portlets效果如图：html代码： 心情 ...
阅读全文
摘要：在通过jQuery ajax提交表单的时候，通常用下边的方法获取表单内容。 var form = 'add-account-form'; //表单id $('#' + form).submit(function() { var account = { ...
阅读全文
摘要：网页换肤原理：通过调用不同的样式表文件来实现不同的皮肤，并且将切换好的皮肤计入cookie。例子：通过点击上边的颜色设置下边显示的背景色。html代码： 灰色 紫色 红色 天蓝色 橙色 淡绿色 ...
阅读全文
摘要：如图，可以通过中间的按钮将左边选中的选项添加到右边，或者全部添加到右边，也可通过双击添加。反之也可以。左边选中加到右边：$("#add").click(function(){ //添加按钮点击事件 var op = $("#select1 option:selected"); //获取选中...
阅读全文
摘要：一个动画切换的效果，如图：分析步骤：1.点击左右的箭头图片滚动，左边的小点变化。2.主要问题是当滚到最后一屏时切换回第一屏，第一屏在向前滚动是切换到最后一屏 ：通过判断图片的总数然后除以每屏显示的数量得到最大屏数，根据当前处于第几屏判断如何滚动。3.左边的小点切换问题 ： 根据当前的屏数，通过eq(...
阅读全文
摘要：1.停止元素的动画：stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列，第二个参数代表是否直接将正在执行的动画跳转到末状态。无参数stop()：立即停止当前的动画，如果接下来还有动画则以当前状态开始接下来的动画。举例：为元素绑定hover事件之后，如果...
阅读全文
摘要：1.一般动画：$("btn").click(function(){ $("div").animate({"left" : "+=300px"}, 300); //需要div设置了元素的position属性，否则不管用});2.多重动画：元素在向右滑动的同时，放大元素的高度。$("btn")....
阅读全文
摘要：可以把为元素绑定的多个事件用命名空间规范起来。$(function(){ $("p").bind("mouseover.plugin", function(){}); //命名空间的mouseover $("p").bind("click.plugin", function()...
阅读全文
摘要：trigger()方法触发事件后，会执行浏览器默认操作。$("input").trigger("focus")以上的代码不仅会执行input绑定的focus事件，也会使input元素本身得到焦点（这是浏览器的默认行为）如果想阻止浏览器的默认行为：$("input").triggerHandler("...
阅读全文
摘要：阻止事件冒泡：如果嵌套元素分别有自己的click事件，当点击内层元素时外层元素的事件也会被触发。$("span").bind("click", function(event){ //代码 event.stopPropagation(); //通过bind创建的事件对象event来执行} )...
阅读全文
摘要：jQuery中的$(document).ready()和JavaScript中的window.onload方法主要有两个方面的不同：1.执行时机：onload : 网页中所有的元素和元素的关联文件(包括图片)等完全加载完毕后才执行。$() : 在dom完全加载完毕后就可调用，此时，网页中的所有元素都...
阅读全文
摘要：$("p").css("height") :获取的高度值与样式的设置有关，可能会得到“auto”, 也可能是字符串“10px”之类的。设置值时如果是数值形式默认单位是px，如果要设置其他单位需要写成字符串格式，"10em"。$("p").height() :获取的高度值是元素在页面中的实际高度，与样...
阅读全文
摘要：$('p').css({"fontSize": "30px", "backgroundColor": "#666"});注意：1.如果值是数字，将被自动转化为像素值。2.如果css的属性带有'-',如果设置这些属性时不加双引号则必须写成驼峰形式，加上引号可以写成'-'形式，但最好都是写成驼峰形式。
阅读全文
摘要：单选的select:$("#single").val("Single2");多选的select:$("#multiple").val(["Multiple2", "Multiple3"]); //注意是数组形式里边checkbox和radio: check1 check2 radio1 radio...
阅读全文
摘要：创建节点可以用jquery的工厂函数，$()$() 会根据传入的html标记字符串，创建一个dom对象，并将这个dom对象包装成一个jquery对象后返回。var li_1 = $("bar1");var li_2 = $("bar2");$('ul').append(li_1).append(li...
阅读全文
摘要：例子：如图，默认不显示全部，点击按钮来回切换，全部显示是一部分推荐的品牌高亮。 $(function(){ //dom加载完再执行 var category = $('ul li:gt(5):not(:last)'); //选中一开始需要隐藏的...
阅读全文