60个实用的jQuery代码片段
jq常用方法
jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。
在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。
1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。
- $(".class")：根据class选择元素。
- $("tag")：根据标签名选择元素。
- $("element").find(selector)：在指定元素中查找符合条件的元素。
2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。
常用的事件有：- $(selector).click(function(){})：点击元素触发事件。
- $(selector).mouseover(function(){})：鼠标移上元素触发事件。
- $(selector).submit(function(){})：表单提交触发事件。
- $(selector).focus(function(){})：元素获得焦点触发事件。
3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。
- $(selector).text()：获取或设置元素的文本内容。
- $(selector).attr()：获取或设置元素的属性。
- $(selector).addClass()：为元素添加class。
- $(selector).remove()：删除指定元素。
4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。
50个必备的实用jQuery代码段
50个必备的实用jQuery代码段(1) 本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。
其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。
这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西。
1. 如何创建嵌套的过滤器：1.//允许你减少集合中的匹配元素的过滤器，2.//只剩下那些与给定的选择器匹配的部分。
在这种情况下，3.//查询删除了任何没（:not）有（:has）4.//包含class为“selected”（.selected）的子节点。
5..filter(":not(:has(.selected))")2. 如何重用元素搜索1.var allItems = $("div.item");2.var keepList = $("div#container1 div.item");3.//现在你可以继续使用这些jQuery对象来工作了。
例如，4.//基于复选框裁剪“k eep list”，复选框的名称5.//符合6.< DIV >class names:7.$(formToLookAt + " input:checked").each(function() {8. keepList = keepList.filter("." + $(this).attr("name"));9.});10.< /DIV>3. 任何使用has()来检查某个元素是否包含某个类或是元素：1.//jQuery 1.4.*包含了对这一has方法的支持。
该方法找出2.//某个元素是否包含了其他另一个元素类或是其他任何的3.//你正在查找并要在其之上进行操作的东东。
39个超实用jQuery实例应用特效
39个超实⽤jQuery实例应⽤特效摘要：程序员和Web设计师可以利⽤jQuery的诸多特性开发设计出许多光彩夺⽬的⽹站，当然这也取决于设计师们⾃⼰的创造⼒。
下⾯收集了39个开发者们最爱的jQuery应⽤以及教程，快来试试，让你的页⾯炫起来！1.：上下⽂滑动特效2.：图⽚幻灯⽚特效3.：魔幻盒4.：滚动特效5.：翻转特效,实现4个⽅向旋转6.：智能提⽰7.：幻灯⽚选项卡8.：选项卡式接⼝和菜单9.：可以让⾃定义列表（DTs）轻松⽣成⼀个漂亮光滑的⽔平Accordion插件10.：平移幻灯⽚这是⼀个教⼤家使⽤jQuery实现动画平移幻灯⽚效果的教程，学习该教程需要下载和这两个插件。
Animate Panning Slideshow with jQuery11.：Blockster过渡特效Blockster是JavaScript⾥⾯⼀款⾮常有特⾊展⽰过度效果的应⽤，其核⼼概念就是块与块之间的过渡。
Blockster transition effect12.：定制个性化的YouTube视频播放器Making a Custom YouTube Video Player13.：迷你下拉菜单教程Sexy Drop Down Menu w jQuery14.：构建卷条式图⽚Building a jQuery Image Scroller15.：动画⼴告图教程Custom Animation Banner with jQuery16.：制作页⾯画廊Full Page Image Gallery with jQuery17.：随机数产⽣器Randomizer App w/ jQuery18.：动画下拉菜单Animated Drop Down Menu with jQuery19.：制作交互式图⽚Making an Interactive Picture with jQuery20.：Twitter Ticker教程A jQuery Twitter Ticker21.：可以让⽂字环绕在漂浮图⽚周围的jQuery插件jQSlickWrap22.：制作动画⽂本和图标菜单Animated Text and Icon Menu with jQuery23.：图⽚墙Image Wall with jQuery24.Tim的两个核⼼是简化版的Accordion和悬浮效果。
JQUERY实用大全
本文翻译自：Cats Who Code(后期大量翻译：The Website is very good)1.平滑滚动到页面顶部我们以一个热门，实用的代码片段开始：下面的4行jquery代码，页面访问者通过点击id 为[#top]，滑动到页面的顶部；$("a[href='#top']").click(function() {$("html, body").animate({ scrollTop: 0 }, "slow");return false;});2.克隆表格的表头到表格底部为了使自己的表格可读性更强，将表格的表头克隆到表格底部是个不错的注意。
下面就是这个实用的代码片段。
var $tfoot = $('<tfoot></tfoot>');$($('thead').clone(true, true).children().get().reverse()).each(function(){$tfoot.append($(this));});$tfoot.insertAfter('table thead');3.加载外部内容你需要添加外部内容到div标签么？如果使用jquery，这就变得很简单，具体实例如下：$("#content").load("somefile.html", function(response, status, xhr) {// error handlingif(status == "error") {$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);}});4.相同高度的标签纵列当你的网站是用纵列来显示的内容是，如果所有的模块列都是等高度的将会更好看，更整洁。
javascript实用代码大全
javascript实⽤代码⼤全//取得控件得绝对位置(1)<script language="javascript">function getoffset(e){var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}var rec = new Array(1);rec[0] = t;rec[1] = l;return rec}</script>//获得控件的绝对位置(2)oRect = obj.getBoundingClientRect();oRect.leftoRect.//最⼩化,最⼤化,关闭<object id=min classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"><param name="Command" value="Minimize"></object><object id=max classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"><param name="Command" value="Maximize"></object><OBJECT id=close classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"><PARAM NAME="Command" value="Close"></OBJECT><input type=button value=最⼩化 onclick=min.Click()><input type=button value=最⼤化 onclick=max.Click()><input type=button value=关闭 onclick=close.Click()>//光标停在⽂字最后<script language="javascript">function cc(){var e = event.srcElement;var r =e.createTextRange();r.moveStart('character',e.value.length);r.collapse(true);r.select();}</script><input type=text name=text1 value="123" onfocus="cc()">//页⾯进⼊和退出的特效进⼊页⾯<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">推出页⾯<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">这个是页⾯被载⼊和调出时的⼀些特效。
jquery经典案例
//图片放大效果
$(document).ready(function() {
var move = -15
zoom = 1.1;
$('.item').hover(function() {
width = $('.item = $('.item').height() * zoom;
.suningTabTitle .hover{background:#ffffff;}
.floor .floorHover{width:16px;height:16px;background:url(images/sprite.png) no-repeat -160px -20px;position:absolute;right:8px;top:10px}
$(".j3").jqueryba();
$(".j4").jqueryba();
$(".j5").jqueryba();
$(".j6").jqueryba();
$(".j7").jqueryba();
$(".jqueryClick").text("隐藏信息");
.j4{background:#f5f5f5;width:176px;height:100px;}
.j5{background:#f5f5f5;width:174px;height:100px;}
.j6{background:#f5f5f5;width:174px;height:100px;}
ul,li{list-style: none}
50个实用的jq例子
50个必备的实用jQuery代码段时间：2011-10-18 08:43:24 来源：博客园作者：点击：3350个必备的实用jQuery代码段 (1)1. 如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）： (2)2. 解决jQuery, prototype共存，$全局变量冲突问题： (2)3. jQuery 判断元素上是否绑定了事件 (3)4. 如何使用jQuery来切换样式表 (3)5. 如何限制选择范围（基于优化目的）： (3)6. 如何正确地使用toggleClass： (4)7. 如何设置IE特有的功能： (4)8. 如何使用jQuery来代替一个元素： (4)9. 如何验证某个元素是否为空： (4)10. 如何从一个未排序的集合中找出某个元素的索引号 (5)11. 如何把函数绑定到事件上： (5)12. 如何追加或是添加html到元素中： (5)13. 在创建元素时，如何使用对象字面量（literal）来定义属性 (5)14. 如何使用多个属性来进行过滤 (5)15. 如何使用jQuery来预加载图像： (6)16. 如何为任何与选择器相匹配的元素设置事件处理程序： (6)17. 如何找到一个已经被选中的option元素： (6)18. 如何隐藏一个包含了某个值文本的元素： (7)19. 如何创建嵌套的过滤器： (7)20. 如何检测各种浏览器： (7)21. 任何使用has()来检查某个元素是否包含某个类或是元素： (7)22. 如何禁用右键单击上下文菜单： (7)23. 如何定义一个定制的选择器 (8)24. 如何检查某个元素是否存在 (8)25. 如何使用jQuery来检测右键和左键的鼠标单击两种情况： (8)26. 如何替换串中的词 (9)27. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）： (9)28. 如何把已创建的元素动态地添加到DOM中： (9)29. 如何限制“Text-Area”域中的字符的个数： (9)30. 如何jQuery注册和禁用jQuery全局事件 (10)31. 如何在jQuery中克隆一个元素： (10)32. 在jQuery中如何测试某个元素是否可见 (11)33. 如何把一个元素放在屏幕的中心位置： (11)34. 如何把有着某个特定名称的所有元素的值都放到一个数组中： (11)35. 如何从元素中除去HTML (11)36. 如何使用closest来取得父元素： (12)37. 如何使用Firebug和Firefox来记录jQuery事件日志： (12)38. 如何强制在弹出窗口中打开链接： (12)39. 如何强制在新的选项卡中打开链接： (13)40. 在jQuery中如何使用.siblings()来选择同辈元素 (13)41. 如何切换页面上的所有复选框： (13)42. 如何基于一些输入文本来过滤一个元素列表： (14)43. 如何获得鼠标垫光标位置x和y (14)44. 如何扩展String对象的方法 (14)45. 如何规范化写jQuery插件： (16)46. 如何检查图像是否已经被完全加载进来 (16)47. 如何使用jQuery来为事件指定命名空间： (16)48. 如何检查cookie是否启用 (17)49. 如何让cookie过期： (17)50. 如何使用一个可点击的链接来替换页面中任何的URL (17)本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。
JQ常用代码
1. $("a").click(function(event){event.preventDefault();$(this).hide("slow");}); //隐藏点击后的超链接2.$(document).ready(function(){$("a").click(function(event){alert("As you can see, the link no longer took you to "); event.preventDefault();});}); //阻止超链接内容3. 回调函数的列子$.get('myhtmlpage.html', function(){myCallBack(param1, param2);}); //父方法'myhtmlpage.html' 执行完之后把返回结果传递给子方法（回调方法）function（）中4.可以通过这个网址引入核心库src="/ajax/libs/jquery/1.7.1"5.常用选择器1）jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
参考文献 推几手$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
2）Query 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
60个实用的jQuery代码片段目录
1. 创建一个嵌套的过滤器
2. 重用你的元素查询
3. 使用has()来判断一个元素是否包含特定的class或者元素
4. 使用jQuery切换样式
5. 限制选择的区域
6. 如何正确使用ToggleClass
7. 设置IE指定的功能
8. 使用jQuery来替换一个元素
9. 验证一个元素是否为空
10. 在无序的set中查找一个元素的索引
11. 绑定一个函数到一个事件
12. 添加HTML到一个元素
13. 创建元素时使用对象来定义属性
14. 使用过滤器过滤多属性
15. 使用jQuery预加载图片
16. 设置任何匹配一个选择器的事件处理程序
17. 找到被选择到的选项(option)元素
18. 隐藏包含特定值的元素
19. 自动的滚动到页面特定区域
20. 检测各种浏览器
21. 替换字符串中的单词
22. 关闭右键的菜单
23. 定义一个定制的选择器
24. 判断一个元素是否存在
25. 使用jQuery判断鼠标的左右键点击
26. 显示或者删除输入框的缺省值
27. 指定时间后自动隐藏或者关闭元素(1.4支持）
28. 动态创建元素到DOM
29. 限制textarea的字符数量
30. 为函数创建一个基本测试用例
31. 使用jQuery克隆元素
32. 测试一个元素在jQuery中是否可见
34. 使用特定名字的元素对应的值生成一个数组
35. 剔除元素中的HTML
36. 使用closest来得到父元素
37. 使用firebug来记录jQuery事件
38. 点击链接强制弹出新窗口
39. 点击链接强制打开新标签页
40. 使用siblings()来处理同类元素
41. 选择或者不选页面上全部复选框
42. 基于输入文字过滤页面元素
43. 取得鼠标的X和Y坐标
44. 使得整个列表元素(LI)可点击
45. 使用jQuery来解析XML
46. 判断一个图片是否加载完全
47. 使用jQuery命名事件
48. 判断cookie是否激活或者关闭
49. 强制过期cookie
50. 使用一个可点击的链接替换页面中所有URL
51: 在表单中禁用“回车键”
52: 清除所有的表单数据
53: 将表单中的按钮禁用
54: 输入内容后启用递交按钮
55: 禁止多次递交表单
56: 高亮显示目前聚焦的输入框标示
57: 动态方式添加表单元素
58: 自动将数据导入selectbox中
59: 判断一个复选框是否被选中
60: 使用代码来递交表单
偶然在网上看到这些不错的jQuery代码开发技巧。
原文收集了30个，另外查找的时候发现了还有20个。
加上另外十个实用的jQuery代码片段，共60个代码技巧，收集在一起分享给大家。
60个很实用的jQuery代码开发技巧收集这些jQuery代码实用性比较强，有些忘了的地方可以现学现用。
现在暂时没有用到以后应该会用到，觉得不错可以收藏一下。
当然，觉得还不过瘾的可以去看看：
20款2014年最佳的免费jQuery 插件 分享30个非常精美的jQuery Lightbox 图片效果插件 如何用CSS3和jQuery 创建一个动态的粘性头部(sticky header)
1. 创建一个嵌套的过滤器
2. 重用你的元素查询
3. 使用has()来判断一个元素是否包含特定的class 或者元素
4. 使用jQuery 切换样式
5. 限制选择的区域
1 2 3 4 5 6 7 8 9
6. 如何正确使用ToggleClass
7. 设置IE 指定的功能
8. 使用jQuery 来替换一个元素
9. 验证一个元素是否为空
10. 在无序的set 中查找一个元素的索引
11. 绑定一个函数到一个事件
12. 添加HTML 到一个元素
13. 创建元素时使用对象来定义属性
14. 使用过滤器过滤多属性
15. 使用jQuery 预加载图片
16. 设置任何匹配一个选择器的事件处理程序
1 2 3 4 5 6 7 8 9
17. 找到被选择到的选项(option)元素
18. 隐藏包含特定值的元素
19. 自动的滚动到页面特定区域
20. 检测各种浏览器
21. 替换字符串中的单词
22. 关闭右键的菜单
23. 定义一个定制的选择器
1 2 3 4 5 6 7 8 9
24. 判断一个元素是否存在
25. 使用jQuery 判断鼠标的左右键点击
26. 显示或者删除输入框的缺省值
1 2 3 4 5 6 7 8 9
27.
指定时间后自动隐藏或者关闭元素(1.4支持）
28. 动态创建元素到DOM
29. 限制textarea 的字符数量
1
2
3
4
5
6 7 8 9
30. 为函数创建一个基本测试用例
31. 使用jQuery 克隆元素
32. 测试一个元素在jQuery 中是否可见
33. 元素屏幕居中
34. 使用特定名字的元素对应的值生成一个数组
35. 剔除元素中的HTML
1 2 3 4 5 6 7 8 9
36. 使用closest来得到父元素
37. 使用firebug来记录jQuery事件
38. 点击链接强制弹出新窗口
39. 点击链接强制打开新标签页
1 2 3 4 5 6 7 8 9
41. 选择或者不选页面上全部复选框
42. 基于输入文字过滤页面元素
43. 取得鼠标的X 和Y 坐标
44. 使得整个列表元素(LI)可点击
45. 使用jQuery 来解析XML
46. 判断一个图片是否加载完全
47. 使用jQuery 命名事件
48. 判断cookie 是否激活或者关闭
49. 强制过期cookie
50. 使用一个可点击的链接替换页面中所有URL
1 2 3 4
5 6 7 8 9
51: 在表单中禁用“回车键”
52: 清除所有的表单数据
可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。
1
2 3 4 5 6 7 8 9
53: 将表单中的按钮禁用
下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：禁用按钮：
启动按钮：
可能大家往往会使用.attr(‘disabled',false);，不过这是不正确的调用。
54: 输入内容后启用递交按钮
这个代码和上面类似，都属于帮助用户控制表单递交按钮。
使用这段代码后，递交按钮只有在用户输入指定内容后才可以启动。
55: 禁止多次递交表单
多次递交表单对于web 应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：
1 2 3 4 5 6 7
8 9
56: 高亮显示目前聚焦的输入框标示
有时候你需要提示用户目前操作的输入框，你可以使用下面代码高亮显示标示：
57: 动态方式添加表单元素
这个方法可以帮助你动态的添加表单中的元素，比如，input 等：
58: 自动将数据导入selectbox 中
下面代码能够使用ajax 数据自动生成选择框的内容
1 2 3 4 5 6 7 8 9
59: 判断一个复选框是否被选中
代码很简单，如下：
60: 使用代码来递交表单
代码很简单，如下：。