随笔分类 -  jQuery

简单的jQuery插件开发
摘要：这两天第一次接触jQuery插件开发，没有想象的复杂，鉴于在做的图片轮播插件和图片弹出小插件还在完善就先写个简单的思路记录下。jQuery插件的开发包括两种： 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。另一种是对象级别的插件开发，即给jQuery对象添加方法。类级别的很好理解，就不多写了。写一写用户可设定参数的对象级别插件开发放个标准的模版(function($){$.fn.pluginName = function(options){}})(jQuery);通过$.fn.pluginName设定插件的名字options接收用户设定的参数下面 阅读全文
posted @ 2014-03-16 15:57 PiLee 阅读(208) 评论(0) 推荐(0)
jQuery学习——DOM 移除与替代
摘要：.detach()描述:从DOM中去掉所有匹配的元素。.detach()方法和.remove()一样, 除了.detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。删除DOM中所有段落 Hello how are you? Attach/detach paragraphs 使用.empty()如果里面包含任何数量的嵌套元素，他们也会被移走。为了避免内存泄漏，jQuery先移除子元素的数据和事件处理函数，然后移除子元素。如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来... 阅读全文
posted @ 2013-12-18 21:50 PiLee 阅读(281) 评论(0) 推荐(0)
jQuery学习——DOM 插入, 外部插入
摘要：.after()描述:在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。添加的版本:1.0.after( content [, content ] )content类型:String, Element, jQuery一个元素，HTML字符串，或者jQuery对象，用来插在每个匹配元素的后面。content类型:String, Element, Array, jQuery添加的一个或多个DOM元素，元素的数组，HTML字符串，或jQuery对象，插在每个匹配元素的后面添加的版本:1.4.after( function(index) )function(index)类型:Func 阅读全文
posted @ 2013-12-17 21:25 PiLee 阅读(298) 评论(0) 推荐(0)
jQuery学习——DOM 插入, 内部插入
摘要：.append()描述:在每个匹配元素里面的末尾处插入参数内容。添加的版本:1.0.append( content [, content ] )content类型:String, Element, jQueryDOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。content类型:String, Element, Array, jQuery一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象插入到每个匹配元素的末尾。添加的版本:1.4.append( function(index, html) )function(index, ht 阅读全文
posted @ 2013-12-17 16:34 PiLee 阅读(856) 评论(0) 推荐(0)
jQuery学习——DOM 插入, 包裹
摘要：.wrap()描述:在每个匹配的元素外层包上一个html元素。.wrap( wrappingElement )wrappingElement类型:String, Selector, Element, jQuery一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。添加的版本:1.4.wrap( function(index) )function(index)类型:Function()回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的this指向集合中的当前元素。.wrap()函数可以 阅读全文
posted @ 2013-12-17 15:12 PiLee 阅读(454) 评论(0) 推荐(0)
jQuery学习——克隆
摘要：.clone()描述:创建一个匹配的元素集合的深度拷贝副本。添加的版本:1.0.clone( [withDataAndEvents ] )withDataAndEvents(默认:false)类型:Boolean一个Boolean值，表示是否会复制元素上的事件处理函数。从jQuery 1.4开始，元素数据也会被复制。添加的版本:1.5.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )withDataAndEvents(默认:false)类型:Boolean一个Boolean值，表示是否会复制元素上的事件处理函数。 默认值是fals 阅读全文
posted @ 2013-12-17 14:56 PiLee 阅读(384) 评论(0) 推荐(0)
jQuery学习——数据
摘要：jQuery.data()存储任意数据到指定的元素并且/或者返回设置的值。Contents:jQuery.data( element, key, value )jQuery.data( element, key, value )jQuery.data( element, key )jQuery.data( element, key )jQuery.data( element )注意：这是一个底层的方法，你应该用.data()代替。jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开 阅读全文
posted @ 2013-12-16 20:26 PiLee 阅读(309) 评论(0) 推荐(0)
jQuery学习——位置
摘要：.offset()在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。Contents:.offset().offset().offset( coordinates ).offset( coordinates ).offset( function(index, coords) )描述:在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于相对于父级元素的位移。当通过全局操作（特别是通过拖拽操作）将一个 阅读全文
posted @ 2013-12-15 21:37 PiLee 阅读(256) 评论(0) 推荐(0)
jQuery学习——尺寸
摘要：.height()获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。Contents:.height().height().height( value ).height( value ).height( function(index, height) ).css('height')和.height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的高度需要数学计算的时候推荐使用.height()方法 。$(window).height(); // returns height 阅读全文
posted @ 2013-12-15 20:44 PiLee 阅读(265) 评论(0) 推荐(0)
jQuery学习——CSS
摘要：.addClass()描述:为每个匹配的元素添加指定的样式类名值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。addClass( function(index, currentClass) )function(index, currentClass)类型: Function()这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样：$("p" 阅读全文
posted @ 2013-12-12 21:17 PiLee 阅读(377) 评论(0) 推荐(0)
jQuery学习——属性
摘要：.attr()获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。Contents:.attr( attributeName ).attr( attributeName ).attr( attributeName, value ).attr( attributeName, value ).attr( attributes ).attr( attributeName, function(index, attr) ).attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的.each()或者.map()方法循环。使用 阅读全文
posted @ 2013-12-12 11:29 PiLee 阅读(349) 评论(0) 推荐(0)
jQuery学习——表单
摘要：//waiting 阅读全文
posted @ 2013-12-11 21:41 PiLee 阅读(133) 评论(0) 推荐(0)
jQuery学习——内容筛选&可见性筛选
摘要：:contains() Selector描述:选择所有包含指定文本的元素。jQuery( ":contains(text)" )text:用来查找的一个文本字符串。这是区分大小写的。匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。正如属性值选择器，:contains()选择器中括号内的文字，可为纯文本，或用引号包围。文本必须有匹配的情况下被选中。查找所有包含“John”的div，并强调他们。$("div:contains('John')").css("text-decoration", &qu 阅读全文
posted @ 2013-12-11 21:28 PiLee 阅读(1122) 评论(0) 推荐(0)
jQuery学习——基本筛选
摘要：:animated Selector描述:选择所有正在执行动画效果的元素.注意:如果您使用一个自定义的jQuery绑定一个没有效果模块，:animated选择器会抛出一个错误。Additional Notes:（其他注意事项：）因为:animated是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分，使用:animated查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。为了当使用:animated的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用.filter(":animated").改变正在执 阅读全文
posted @ 2013-12-11 21:05 PiLee 阅读(319) 评论(0) 推荐(0)
jQuery学习——层级
摘要：Child Selector (“parent > child”)描述:选择所有指定“parent”元素中指定的"child"的直接子元素。parent:任何有效的选择器。child:用来筛选子元素的选择器。作为一个CSS选择器，这个子元素组合器被Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持，但尤其不被Internet Explorer6及以下版本支持。然而在jQuery中，这个选择器（与其他所有选择器）能在所有支持的浏览器中工作，包括IE6。这个子元素组合器(E>F)和( 阅读全文
posted @ 2013-12-11 19:42 PiLee 阅读(184) 评论(0) 推荐(0)
jQuery学习——选择器基本
摘要：All Selector (“*”)警告： 除非被它自己使用，否则 * 选择器或通用选择器，其速度是极其慢的。Class Selector (“.class”)描述:选择给定样式类名的所有元素。对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现。ID Selector (“#id”)描述:选择一个具有给定id属性的单个元素。对于ID选择，jQuery使用JavaScript函数document.getElementById()，这是非常有效的。当另一个选择是附加到ID选择器，比如h2#pageTitle，在确定作为 阅读全文
posted @ 2013-12-11 19:17 PiLee 阅读(206) 评论(0) 推荐(0)