50个高级jQuery代码开发技巧

合集下载

jquery使用方法

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

jquery用法

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。

以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。

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)：显示元素，可以设置速度和回调函数。

菜鸟教程jquery语法

菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。

本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。

以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。

以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。

以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。

以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。

jq 语法

jq 语法在现代web开发中，前端框架和库越来越多，其中最广泛使用的就是jQuery。

而jQuery的核心语法就是jq语法。

jq语法是一种简单、直观的语法，使得前端开发者可以更轻松地操作HTML文档，完成复杂的交互效果。

下面我们将分步骤阐述jq语法。

1.选择器操作jq语法以选择器为基础，选择器通常会从文档中选取一个或多个HTML元素，然后对它们进行操作。

通过写选择器代码，我们可以实现诸如元素的增删改查等各种操作。

常见的选择器语法包括 $(select)、element、.class、#id 等。

比如想通过属性名选择到对应的元素，则可以用$("element[attribute='value']")的方式进行选择。

2.操作DOM元素DOM是文档对象模型，通过DOM，我们可以访问网页中的任何元素，并且变态和交互etc。

在jq语法中，我们可以用$()函数将一个DOM元素包裹起来，之后可以对这个对象进行操作。

比如，我们可以用.addClass()、.removeClass()、.toggleClass()等方法来操作元素的样式、大小等属性。

3.事件绑定事件绑定也是jq语法中不可或缺的一部分。

我们可以通过让某个事件与某个操作（如单击某个元素）关联起来，从而触发一些动作。

在jq语法中，我们可以通过.on()或者.click()、.dblclick()等方法来进行绑定。

例如，我们可以写 $(selector).click(function(){）来让某个元素被点击时触发某个动作。

4.ajax请求通过ajax请求，我们可以异步地向后端请求数据，并将其集成到前端。

这样做的好处是可以实现无需刷新网页即可更新页面内容的功能。

在jq语法中，可以通过$.ajax()方法来处理异步请求，同时也可以通过.ajaxSuccess()、.ajaxError()、.ajaxComplete()等来处理请求成功、失败等的情况。

jq常用方法

jq常用方法1.选择器：使用$()函数选择HTML文档中的元素，例如$('#id')、$('.class')、$('element')等。

2.事件处理：使用on()函数添加事件处理程序，例如$('element').on('click',function(){...})。

3.属性操作：使用attr()函数获取或设置元素的属性，例如$('element').attr('name','value')。

4.CSS操作：使用css()函数获取或设置元素的CSS属性，例如$('element').css('color','red')。

5.DOM操作：使用append()、prepend()、after()、before()等函数插入或移动HTML元素，例如$('element').append('<div>...</div>')。

6.遍历：使用each()函数遍历匹配的元素，例如$('element').each(function(){...})。

7. AJAX操作：使用$.ajax()函数向服务器发送请求，例如$.ajax({type:'POST',url:'url',data:{...},success:function() {...},error:function(){...}})。

8. 动画效果：使用animate()函数实现元素的动画效果，例如$('element').animate({property:value},speed,function(){...} )。

9. 数据缓存：使用data()函数在元素上存储数据，例如$('element').data('name','value')。

使用jQuer的技巧总结

jquery使用技巧总结本文来源于网站建设：/一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM 框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

jQuery是继prototype之后的又一个优秀的Javascript框架。

它是由John Resig 于2006 年初创建的，它有助于简化JavaScript? 以及Ajax 编程。

有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：1、代码简练、语义易懂、学习快速、文档丰富。

2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。

3、jQuery支持CSS1-CSS3,以及基本的xPath。

4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

5、可以很容易的为jQuery扩展其他功能。

6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。

7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。

jQuery方法总结表

.blur()
表格形式的事件,
绑定事件处理器来“模糊”JavaScript事件,或触发事件在一个元素。
.change()
表格形式的事件,
绑定事件处理器来“变更”JavaScript事件,或触发事件在一个元素。
.children()
树遍历
让孩子们的每一个元素在匹配的元素集合中任意选择器,经过。
deferred.resolveWith()
递延对象
解决一个递延对象和调用任何给定的doneCallbacks语境和参数。
deferred.then()
递延对象
添加处理器称为当递延对象是解决或拒绝。
ห้องสมุดไป่ตู้
.delay()
习俗
设定一个计时器,延迟执行的后续项目在队列中。
.delegate()
jQuery.inArray()
公用事业
寻找一个指定的值在一个数组和回归它的指数(或如果没有找到)。
jQuery.isArray()
公用事业
确定参数是一个数组。
jQuery.isEmptyObject()
公用事业
看看一个对象为空(不含性质)。
jQuery.isFunction()
执行一些JavaScript代码全球。
jQuery.grep()
公用事业
发现一个数组的元素,从而满足一个过滤功能。原数组是不受影响。
jQuery.hasData()
数据
决定是否有任何jQuery数据元素与它联合起来。
jQuery.holdReady()
核心
持有、释放jQuery已经执行的事件。

15个值得开发人员关注的jQuery开发技巧和心得

15个值得开发人员关注的jQuery开发技巧和心得在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢！1. 尽量使用最新版本的jQuery类库jQuery项目中使用了大量的创新。

最好的方法来提高性能就是使用最新版本的jQuery。

每一个新的版本都包含了优化的bug修复。

对我们来说唯一要干的就是修改tag，何乐而不为呢？我们也可以使用免费的CDN服务，例如，Google来存放jQuery类库。

<script src="/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script src="/ajax/libs/jquery/1.6/jquery.min.js"></script>2. 使用简单的选择器直到最近，返回DOM元素的方式都是解析选择器字符串，javascript循环和内建的javascript API，例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三种方式的整合使用。

但是现代浏览器都开始支持querySelectorAll()，这个方法能够理解CSS查询器，而且能带来显著的性能提升。

然而，我们应该避免使用复杂的选择器返回元素。

更不用说很多用户使用老版本的浏览器，强迫jQuery去处理DOM 树。

这个方式非常慢。

$('li[data-selected="true"] a') // Fancy, but slow$('li.selected a') // Better$('#elem') // Best选择id是最快速的方式。

jquery 定义方法

jquery 定义方法摘要：1.jQuery 简介2.jQuery 的方法2.1 内置方法2.2 自定义方法正文：【jQuery 简介】jQuery 是一个流行的JavaScript 库，它简化了HTML 文档的遍历、操作、事件处理和动画。

jQuery 的目标是提供一组API，使得开发者能够更加简单地处理网页上的DOM 元素，从而提高开发效率。

【jQuery 的方法】jQuery 提供了大量的方法，可以方便地对HTML 文档进行操作。

这些方法主要分为两类：内置方法和自定义方法。

【内置方法】jQuery 内置了很多实用的方法，例如：1.选择元素：使用$("selector") 选择页面上匹配selector 的元素。

2.添加元素：使用append() 方法向指定元素内部添加一个或多个元素。

3.删除元素：使用remove() 方法从指定元素内部删除一个或多个元素。

4.修改元素内容：使用html() 方法设置或获取指定元素的HTML 内容。

5.修改元素属性：使用attr() 方法设置或获取指定元素的属性值。

6.事件处理：使用on() 方法绑定事件处理器到指定元素。

7.动画效果：使用animate() 方法实现元素的动画效果。

等等。

这些内置方法大大简化了开发者对HTML 文档的操作。

【自定义方法】除了内置方法，jQuery 还允许开发者自定义方法。

自定义方法的实现方式如下：1.在jQuery 对象中定义方法：使用jQuery.fn.methodName = function() {...}。

2.在jQuery 实例中定义方法：使用instance.methodName = function() {...}。

例如，我们可以自定义一个方法，用于判断一个元素是否是可见的：```javascriptjQuery.fn.isVisible = function() {return this.css("display")!== "none";};```然后，我们可以像使用内置方法一样使用自定义方法：```javascript$("element").isVisible()```【总结】jQuery 通过提供大量实用的内置方法和支持自定义方法，极大地简化了HTML 文档的操作和处理。

jquery的使用方法

jquery的使用方法jQuery作为一种常用的JavaScript库，其强大的功能和简化代码的方便性让其成为前端开发者中的首选。

以下是在项目中常见的jQuery使用方法的分步骤阐述：1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库，通常我们是从官网下载一个jquery-x.x.x.js文件，在引用时需要写正确的路径。

2. jQuery对象的创建要使用jQuery对象，首先需要用jQuery构造函数来创建一个jQuery对象。

这可以使用两种方式创建：1）通过$或jQuery函数创建：例如：$("选择器")或者jQuery("选择器")；2）通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。

3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器，也支持自定义选择器。

与CSS选择器类似，jQuery选择器是用于选择HTML元素的字符串。

例如：选择id为“content”的元素：$("#content")；选择class为“box”的元素：$(".box")；选择label元素中“for”属性值为“id”的元素：$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件，例如：$(selector).bind(event,function)绑定事件。

事件可以是click、dblclick、mouseenter等等，函数可以是已定义的函数名，也可以是匿名函数。

5. 样式的操作通过jQuery对象的css()方法设置样式。

例如：$(selector).css('color','#fff')设置字体颜色为白色，$(selector).addClass('className')增加类名为'className'的样式。

jquery用法大全

:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
jQuery 效果函数
方法描述
animate() 对被选元素应用“自定义”的动画
clearQueue() 对被选元素移除所有排队的函数（仍未运行的）
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素

jQuery开发技术笔记

jQuery开发技术笔记HTML DOM 加载步骤1、解析 HTML 结构2、加载外部脚本和样式表⽂件3、解析并执⾏脚本代码4、构造 HTML DOM 模型5、加载图⽚等外部⽂件6、页⾯加载⼀、总体架构1.1：jQuery 的核⼼特征：兼容主流浏览器：⽀持 IE 6.0+、Chrome、Firefox 3.6+、Safari 5.0+、Opera等。

具有的特的链式语法和短⼩清晰的多功能接⼝。

具有⾼效灵活的 CSS 选择器，并且可对 CSS 选择器进⾏扩展。

拥有便捷的插件扩展机制和丰富的插件。

1.2：总体架构jQuery 的模块可以分为 3 个部分：⼊⼝模块、底层模块、功能模块。

在底层⽀持模块中，回调函数列表模块⽤于增强对回调函数的管理，⽀持添加、移除、触发、锁定、禁⽤回调函数等功能；异步队列模块⽤于解耦异步任务和回调函数，它在回调函数刘表的基础上为回调函数增加了状态，并提供了多个回调函数列表，⽀持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块⽤于为 DOM 元素和 JavaScript 对象附加任意类型的数据；队列模块⽤于管理⼀组函数，⽀持函数的⼊队和出队操作，并确保函数按顺序执⾏，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统⼀的时间绑定、响应、⼿动触发和移除机制，它并没有将事件直接绑定到 DOM 元素上，⽽是基于数据缓存模块来管理事件；ajax 模块允许从服务器上加载数据，⽽不⽤刷新页⾯，它基于异步队列模块来管理和触发回调函数；动画模块⽤于向⽹页中添加动画效果，它基于队列模块来管理和执⾏动画函数；属性操作模块⽤于对 HTML 属性和 DOM 属性惊醒读取、设置和移除操作；DOM 遍历模块⽤于在 DOM 树中遍历⽗元素、⼦元素和兄弟元素；DOM 操作模块⽤于插⼊、移除、复制和替换 DOM元素；样式操作模块⽤于获取计算样式或设置内联样式；坐标模块⽤于读取或设置 DOM 元素的⽂档坐标；尺⼨模块⽤于获取 DOM 元素的⾼度和宽度。

jq命令用法总结

jq命令用法总结摘要：一、jq命令简介二、jq命令的基本用法1.过滤数据2.映射数据3.变换数据类型4.添加和删除数据5.访问和修改数据三、jq命令的进阶用法1.函数定义与调用2.模块化编程3.事件处理4.插件扩展四、jq命令实战案例1.解析JSON数据2.处理XML数据3.操作Web API五、jq命令的优缺点与应用场景1.优点2.缺点3.应用场景六、总结与建议正文：一、jq命令简介jq是一款强大的JSON解析和生成工具，命令行界面操作，易于上手。

它可以对JSON数据进行各种操作，使得JSON数据更易于阅读和处理。

二、jq命令的基本用法1.过滤数据jq命令可以通过过滤器对JSON数据进行筛选。

例如，筛选出JSON数组中的某个元素，可以使用如下命令：```jq ".| select(.)" input.json```2.映射数据jq命令支持对JSON数据进行映射操作，可以将数据映射到指定的key或值。

例如，将所有元素的值乘以2：```jq ".| map(select(.) | .* 2)" input.json```3.变换数据类型jq命令可以对JSON数据进行类型转换。

例如，将所有字符串类型的值转换为大写：```jq ".| map(select(.) | .tolupper())" input.json```4.添加和删除数据jq命令可以对JSON数据进行添加和删除操作。

例如，在数组末尾添加一个元素：```jq ".| append(["new_element"])" input.json```5.访问和修改数据jq命令可以方便地访问和修改JSON数据。

例如，修改指定元素的值：```jq ".| assoc(.) "new_key" 10" input.json```三、jq命令的进阶用法1.函数定义与调用jq命令支持自定义函数，可以方便地进行复杂的数据处理。

jquery项目中一些常用方法

jquery项⽬中⼀些常⽤⽅法1、获取url中的参数function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //构造⼀个含有⽬标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配⽬标参数以及解析中⽂乱码问题if (r != null) return decodeURI(r[2]); return null; //返回参数值}调⽤：getUrlParam(参数名称) 注意：参数名称是⼀个字符串2、封装ajax加移动端当数据没出现出现加载图标//封装ajax请求、function ajax_datatypeByXml(type, url, Xml_data, func) {//data数据可以为空$.ajax({type: type,url: url,async: false,dataType: "json",timeout: 30000, //超时时间：30秒data: Xml_data,beforeSend: function () {mui.showLoading("正在加载..", "div"); //加载⽂字和类型，plus环境中类型为div时强制以div⽅式显⽰ },complete: function () {mui.hideLoading(function () {});//隐藏后的回调函数},success: function (data) {if (data) {func(data);} else {mui.alert("数据加载失败");}},error: function() {mui.alert('服务器连接超时，请稍后再试');}});}//扩展mui.showLoading(function ($, window) {//显⽰加载框$.showLoading = function (message, type) {if ($.os.plus && type !== 'div') {$.plusReady(function () {plus.nativeUI.showWaiting(message);});} else {var html = '';html += '<i class="mui-spinner mui-spinner-white"></i>';html += '<p class="text">' + (message || "数据加载中") + '</p>';//遮罩层var mask = document.getElementsByClassName("mui-show-loading-mask");if (mask.length == 0) {mask = document.createElement('div');mask.classList.add("mui-show-loading-mask");document.body.appendChild(mask);mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });} else {mask[0].classList.remove("mui-show-loading-mask-hidden");}//加载框var toast = document.getElementsByClassName("mui-show-loading");if (toast.length == 0) {toast = document.createElement('div');toast.classList.add("mui-show-loading");toast.classList.add('loading-visible');document.body.appendChild(toast);toast.innerHTML = html;toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); }); } else {toast[0].innerHTML = html;toast[0].classList.add("loading-visible");}}};//隐藏加载框$.hideLoading = function (callback) {if ($.os.plus) {$.plusReady(function () {plus.nativeUI.closeWaiting();});}var mask = document.getElementsByClassName("mui-show-loading-mask");var toast = document.getElementsByClassName("mui-show-loading");if (mask.length > 0) {mask[0].classList.add("mui-show-loading-mask-hidden");}if (toast.length > 0) {toast[0].classList.remove("loading-visible");callback && callback();}}})(mui, window);3、初始化移动端根节点字体⼤⼩⽤作rem值window.addEventListener("resize", setSize, false);window.addEventListener("orientationchange", setSize, false);function setSize() {var oHtml = document.getElementsByTagName("html")[0];var iWidth = oHtml.getBoundingClientRect().width;$("html").css("fontSize", iWidth / 15)}4、根据年⽉获得当⽉天数的实现代码function getDaysInMonth(year, month) {month = parseInt(month, 10);var temp = new Date(year, month, 0);return temp.getDate();}5、屏蔽打印consoleconsole.log=function(){}6、当动态⽣成li时点击事件有时可能会触发两次解决办法$('body').off('click').on('click','selector',function(){});使⽤之前要清理掉body上绑定的click事件，利⽤了jQuery⾥⾯off()⽅法7、选择input框的选中状态操作<div class="desc"><input type="checkbox" id="selectAll" onclick="checkAll()">全选</div><script>function checkAll(){var checkedOfAll=$("#selectAll").prop("checked");$("input[name='procheck']").prop("checked", checkedOfAll);alert(checkedOfAll);}</script>8、⿏标移⼊移出事件并在移⼊时操作$(".contactus-wrap").mouseover( function () {clearTimeout(time);$(".contactus").css({"opacity": 1,"left":"12px"})});$(".contactus-wrap").mouseout(function () {time = setTimeout(function () {$(".contactus").css({"opacity": 0,"left": "-206px"})}, 500)});$(".contactus").mouseover(function () {clearTimeout(time); $(".contactus").css({"opacity": 1,"left": "12px"})});$(".contactus").mouseout(function () {time = setTimeout(function () {$(".contactus").css({"opacity": 0,"left": "-206px"})}, 500);});9、jquery中获取⽗级iframe中的dom元素$(parent.window.document).find("iframe").contents().find("#F_HTNO")；10、textarea⾃动换⾏，且⽂本框根据输⼊内容⾃适应⾼度<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输⼊框⾃适应</title><script src="jquery.min.js"></script><script>// textare⾃动换⾏/*** ⽂本框根据输⼊内容⾃适应⾼度* @param {HTMLElement} 输⼊框元素* @param {Number} 设置光标与输⼊框保持的距离(默认0)* @param {Number} 设置最⼤⾼度(可选)*/var autoTextarea = function (elem, extra, maxHeight) {extra = extra || 0;var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),addEvent = function (type, callback) {elem.addEventListener ?elem.addEventListener(type, callback, false) :elem.attachEvent('on' + type, callback);},getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name];if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();return rect.bottom - rect.top -parseFloat(getStyle('paddingTop')) -parseFloat(getStyle('paddingBottom')) + 'px';};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFloat(getStyle('height'));elem.style.resize = 'none';var change = function () {var scrollTop, height,padding = 0,style = elem.style;if (elem._length === elem.value.length) return;elem._length = elem.value.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.style.height = minHeight + 'px';if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight;style.overflowY = 'auto';} else {height = elem.scrollHeight;style.overflowY = 'hidden';};style.height = height + extra + 'px';// scrollTop += parseInt(style.height) - elem.currHeight;// document.body.scrollTop = scrollTop;// document.documentElement.scrollTop = scrollTop;elem.currHeight = parseInt(style.height);};};addEvent('propertychange', change);addEvent('input', change);addEvent('focus', change);change();};$(document).ready(function() {$("table td").each(function() {if ($(this).find("[datatype='required']").length > 0||$(this).find("[datatype='number']").length > 0) {$(this).css("position", "relative");}})})</script></head><body><table><tr><td><textarea datatype="required" id="grxygzjh"isheightauto="true" maxlength="1000"msg="必填项" name="grxygzjh" onfocus="autoTextarea(this)"placeholder="*请输⼊个⼈下⽉⼯作计划"style="width:99%; font-size: 15px; border-style: none none solid; border-color: rgb(255,255, 255) rgb(255, 255, 255) rgb(119, 119, 119); border-bottom-width: 1px;height: 39px; background: transparent; text-align:left"type="text"></textarea></td></tr></table></body></html>11、移动端悬浮按钮可拖动touchImg: function () {var flag = 0; //标记是拖曳还是点击var oDiv = document.getElementsByClassName('add-btn')[0];var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;oDiv.addEventListener('touchstart',function(e){flag = 0;e.preventDefault();//阻⽌触摸时页⾯的滚动，缩放disX = e.touches[0].clientX - this.offsetLeft;disY = e.touches[0].clientY - this.offsetTop;//⼿指按下时的坐标starX = e.touches[0].clientX;starY = e.touches[0].clientY;//console.log(disX);});oDiv.addEventListener('touchmove',function(e){flag = 1;L = e.touches[0].clientX - disX ;T = e.touches[0].clientY - disY ;//移动时当前位置与起始位置之间的差值starXEnd = e.touches[0].clientX - starX;starYEnd = e.touches[0].clientY - starY;//console.log(L);if(L<0){//限制拖拽的X范围，不能拖出屏幕L = 0;}else if(L > document.documentElement.clientWidth - this.offsetWidth){L=document.documentElement.clientWidth - this.offsetWidth;}if(T<0){//限制拖拽的Y范围，不能拖出屏幕T=0;}else if(T>document.documentElement.clientHeight - this.offsetHeight){T = document.documentElement.clientHeight - this.offsetHeight;console.log(T)}moveX = L + 'px';moveY = T + 'px';//console.log(moveX);this.style.left = moveX;this.style.top = moveY;});window.addEventListener('touchend',function(e){//alert(parseInt(moveX))//判断滑动⽅向if(flag === 0) {//点击}});}}12、监听input中value改变//监听input中value改变var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容var config = { attributes: true, childList: true }//配置对象$("input").each(function () {var _this = $(this);var observer = new MutationObserver(function (mutations) {//构造函数回调mutations.forEach(function (record) {if (record.type == "attributes") {//监听属性window.location.reload();}if (record.type == 'childList') {//监听结构发⽣变化//do any code}});});observer.observe(_this[0], config);});13、监听多张图⽚加载完成$.when.apply(null, $(".ccc").map(function(i, e) {var dfd = $.Deferred();if (plete) {console.log(`${i}`)dfd.resolve()} else {e.onload = function() {console.log(`${i}`)dfd.resolve()}}return dfd;}).toArray()).done(function() {console.log("图⽚加载完成");//要执⾏的⽅法loop();});console.log("图⽚开始加载");14、在不屏蔽F12的情况下禁⽌⽤户修改⽹页var submitBtn = parent.document.getElementById("lbtnPrint");var blackLbtnPrint = parent.document.getElementById("blacklbtnPrint"); if ($(submitBtn).length > 0 || $(blackLbtnPrint).length > 0) {var ConsoleManager = {onOpen() {$(submitBtn).hide();$(blackLbtnPrint).hide();// alert("Console is opened")},onClose() {window.parent.location.reload();$(submitBtn).show();$(blackLbtnPrint).show();// alert("Console is closed")},init() {var self = this;var x = document.createElement('div');var isOpening = false, isOpened = false;Object.defineProperty(x, 'id', {get() {if (!isOpening) {self.onOpen();isOpening = true;}isOpened = true;}});setInterval(function () {isOpened = false;(x);console.clear();if (!isOpened && isOpening) {self.onClose();isOpening = false;}}, 200)}}////如果f12打开就隐藏打印按钮ConsoleManager.onOpen = function () {$(submitBtn).hide();$(blackLbtnPrint).hide();// alert("Console is opened")}ConsoleManager.onClose = function () {window.parent.location.reload();$(submitBtn).show();$(blackLbtnPrint).show();// alert("Console is closed")}ConsoleManager.init();}15、iframe在移动端的缩放的⽰例代码//缩放ifrmae页⾯var Width = document.body.scrollWidth;var Height = document.body.scrollHeight;var zoomScale = Width / 640;setTimeout(function () {console.log($("#ifr"))$("#ifr").css({"transform": "scale(" + zoomScale + ")","width": (Width / zoomScale),"height": (Height / zoomScale),"transform-origin": "0 top 0"});}, 1000)。

基于jQuery实现列表循环滚动小技巧（超简单）

基于jQuery实现列表循环滚动⼩技巧（超简单）看到⼀个很好的思路，记录⼀下之前使⽤jQuery做滚动效果，在这两篇⽂章⾥有写：、，分别使⽤了scrollLeft()与scrollTop()、scroll()来实现后来看到⼀个demo，觉得思路很妙，想着可以⽤来做列表内容项的滚动，效果⼤概是这样的：思路是这样的：只要能够不停地把第⼀个item移动到末尾，其余的⾃会往上填补空缺，填补的过程⽤动画放慢些，就能有不断滚动的视觉效果了（数组删了第⼀个元素，再在末尾加上这个元素，等于把第⼀个元素移动到末尾；元素总量没有改变，但位置全发⽣了改变）代码：// 要填充的数据var data = {infoItem : ["<strong>第1⾏：</strong>安之安之安之安之安之安之安之安之安之安之安","<strong>第2⾏：</strong>阳光彩虹⼩⽩马阳光彩虹⼩⽩马阳光彩虹⼩⽩马","<strong>第3⾏：</strong>天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"]}// 将数据动态填充到页⾯种var infoList = []for (let i = 0; i < Item.length; i++){let infoStr = `<div class="item">${Item[i]}</div>`infoList.push(infoStr);}$(".info-wrapper").html(infoList.join(""))// 设置计时器，每隔2秒执⾏⼀次（变换⼀次）var timer = null;timer = setInterval(function () {// 将第⼀⾏item移到最后⼀⾏，其他的往上挪填补空缺位var infoItemTmp = infoList.shift();$(".info-wrapper").append(infoItemTmp );$(".item:first").remove();infoList.push(infoItemTmp)}, 2000)html和样式部分：<div class="container"><div class="wrapper"><div class="info"><div class="info-wrapper"></div></div></div></div>.constainer {width: 900px;height: 400px;border: 2px solid #eee;display: flex;justify-content: center;align-items: center;}.wrapper {width: 500px;height: 300px;border: 1px solid #ccc;display: flex;justify-content: center;align-content: center;}.info {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between; align-content: center;}.info-wrapper {width: 100%;height: 100%;overflow: hidden;}.item {border: 2px solid #ccc;border-left: 4px solid orange; height: 80px;width: 100%;display: flex;justify-content: center;align-items: center;box-sizing: border-box;border-radius: 8px;margin-top: 20px;}⽬前效果是这样的：再加上滑动效果的动画：.item:first-child {animation: move 2s linear;}@keyframes move {100% {margin-top: -80px;}}不断滑动，到达可以加⼊新item的位置时，触发新item的加⼊：// 设置计时器，每隔2秒执⾏⼀次（变换⼀次）--与animation动画时设置时间⼀致var timer = null;timer = setInterval(function () {if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {// 将第⼀⾏item移到最后⼀⾏，其他的往上挪填补空缺位var infoItemTmp = infoList.shift();$(".info-wrapper").append(infoItemTmp);$(".item:first").remove();infoList.push(infoItemTmp)}}, 2000)就可以得到开头的效果了到此这篇关于基于jQuery实现列表循环滚动⼩技巧(超简单)的⽂章就介绍到这了,更多相关jQuery列表循环滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

jq方法大全-jQuery

jQuery -JQ方法大全－jQueryJQuery:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值$("元素名称").html(); 获得该元素内的内容（元素，文本等）$("元素名称").html("new stuff"); 给某元素设置内容$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值$("元素名称").removeClass("class") 给某元素删除指定的样式$("元素名称").text(); 获得该元素的文本$("元素名称").text(value); 设置该元素的文本值为value$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值$("input元素名称").val(value); 设置input元素的值为valueManipulation：$("元素名称").after(content); 在匹配元素后面添加内容$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面$("元素名称").appendTo(content); 在content后接元素$("元素名称").before(content); 与after方法相反$("元素名称").clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）$("元素名称").empty() 将该元素的内容设置为空$("元素名称").insertAfter(content); 将该元素插入到content之后$("元素名称").insertBefore(content); 将该元素插入到content之前$("元素").prepend(content); 将content作为该元素的一部分，放到该元素的最前面$("元素").prependTo(content); 将该元素作为content的一部分，放content的最前面$("元素").remove(); 删除所有的指定元素$("元素").remove("exp"); 删除所有含有exp的元素$("元素").wrap("html"); 用html来包围该元素$("元素").wrap(element); 用element来包围该元素Traversing：add(expr)add(html)add(elements)children(expr)contains(str)end()filter(expression)filter(filter)find(expr)is(expr)next(expr)not(el)not(expr)not(elems)parent(expr)parents(expr)prev(expr)siblings(expr)Core：$(html).appendTo("body") 相当于在body中写了一段html代码$(elems) 获得DOM上的某个元素$(function(){……..}); 执行一个函数$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p，添加样式$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮$.extend(prop) prop是一个jQuery对象，举例：jQuery.extend({min: function(a, b) { return a b ? a : b; }});jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下，$()查询的是当前HTML文档中的DOM元素。

jQuery完全手册

jQuery完全手册jQuery是一种流行的JavaScript库，它允许开发者以更简单的方式对HTML文档进行操作。

jQuery提供了许多有用的功能，比如DOM操作、事件处理、动画效果等等。

本文将介绍jQuery的完整手册，包括其语法、文档对象模型、事件和效果。

一、语法jQuery语法非常简单，并且易学易用。

它是基于CSS选择器的，可以通过选中所有类似文本的元素来实现功能。

例如：$(document).ready(function(){$(\"button\").click(function(){$(\"p\").hide();});});上面的代码意思是，当文档加载完毕时执行一个函数，然后当按钮被点击时隐藏所有段落元素。

几个重要的jQuery语法如下：1. $(selector).action()：这是最基本的语句，它为jQuery选择器选择元素，并对它们执行某个操作。

2. $(document).ready(function(){})：这个语句表示文档已经加载完毕，可以执行代码了。

3. $(this)：这个语句用于获取当前元素。

4. $(selector).each(function(){})：这个语句用于迭代一个选择器匹配的元素集合，并为每个元素执行一个函数。

二、文档对象模型jQuery有一个强大的文档对象模型，可以使您轻松地遍历和操作HTML元素和属性。

在jQuery中，文档对象模型由以下内容组成：1. 选择器：通过选择器可以选择文档中的元素，其语法类似于CSS选择器。

2. 属性操作：设置和获取元素的属性值。

3. 样式操作：设置和获取元素的样式。

4. HTML操作：可以操作元素的HTML内容。

5. 文本操作：可以操作元素的文本内容。

三、事件jQuery还提供了一系列用于处理事件的方法。

借助事件处理程序，可以在元素上定义事件，比如点击事件、鼠标悬停事件等。

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

50个高级jQuery代码开发技巧1. 创建一个嵌套的过滤器.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素2. 重用你的元素查询var allItems = $("div.item");var keepList = $("div#container1 div.item");<div>class names:$(formToLookAt + " input:checked").each(function() { keepListkeepList = keepList.filter("." + $(this).attr("name")); });</div>3. 使用has()来判断一个元素是否包含特定的class或者元素//jQuery 1.4.* includes support for the has method. This method will find//if a an element contains a certain other element class or whatever it is//you are looking for and do anything you want to them.$("input").has(".email").addClass("email_icon");4. 使用jQuery切换样式//Look for the media-type you wish to switch then set the href to your new style sheet$('link[media='screen']').attr('href', 'Alternative.css');5. 限制选择的区域//Where possible, pre-fix your class names with a tag name//so that jQuery doesn't have to spend more time searching//for the element you're after. Also remember that anything//you can do to be more specific about where the element is//on your page will cut down on execution/search timesvar in_stock = $('#shopping_cart_items input.is_in_stock');<ul id="shopping_cart_items"><li><input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li><li><input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li><li><input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li></ul>6. 如何正确使用ToggleClass//Toggle class allows you to add or remove a class//from an element depending on the presence of that//class. Where some developers would use:a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass allows you to easily do this usinga.toggleClass('blueButton');7. 设置IE指定的功能if ($.browser.msie) { // Internet Explorer is a sadist. }8. 使用jQuery来替换一个元素$('#thatdiv').replaceWith('fnuh');9. 验证一个元素是否为空if ($('#keks').html()) { //Nothing found ;}10. 在无序的set中查找一个元素的索引$("ul > li").click(function () {var index = $(this).prevAll().length;});11. 绑定一个函数到一个事件$('#foo').bind('click', function() {alert('User clicked on "foo."');});12. 添加HTML到一个元素$('#lal').append('sometext');13. 创建元素时使用对象来定义属性var e = $("", { href: "#", class: "a-class another-class", title: "..." });14. 使用过滤器过滤多属性//This precision-based approached can be useful when you use//lots of similar input elements which have different typesvar elements = $('#someid input[type=sometype][value=somevalue]').get();15. 使用jQuery预加载图片jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');16. 设置任何匹配一个选择器的事件处理程序$('button.someClass').live('click', someFunction);//Note that in jQuery 1.4.2, the delegate and undelegate options have been//introduced to replace live as they offer better support for context//For example, in terms of a table where before you would use..// .live()$("table").each(function(){$("td", this).live("hover", function(){$(this).toggleClass("hover");});});//Now use..$("table").delegate("td", "hover", function(){$(this).toggleClass("hover");});17. 找到被选择到的选项(option)元素$('#someElement').find('option:selected');18. 隐藏包含特定值的元素$("p.value:contains('thetextvalue')").hide();19. 自动的滚动到页面特定区域jQuery.fn.autoscroll = function(selector) {$('html,body').animate({scrollTop: $(selector).offset().top},500);}//Then to scroll to the class/area you wish to get to like this:$('.area_name').autoscroll();20. 检测各种浏览器Detect Safari (if( $.browser.safari)),Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' ))21. 替换字符串中的单词var el = $('#id');el.html(el.html().replace(/word/ig, ''));22. 关闭右键的菜单$(document).bind('contextmenu',function(e){ return false; });23. 定义一个定制的选择器$.expr[':'].mycustomselector = function(element, index, meta, stack){// element- is a DOM element// index - the current loop index in stack// meta - meta data about your selector// stack - stack of all elements to loop// Return true to include current element// Return false to explude current element};// Custom Selector usage:$('.someClasses:test').doSomething();24. 判断一个元素是否存在if ($('#someDiv').length) {//hooray!!! it exists...}25. 使用jQuery判断鼠标的左右键点击$("#someelement").live('click', function(e) {if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {alert("Left Mouse Button Clicked");}else if(e.button == 2)alert("Right Mouse Button Clicked");});26. 显示或者删除输入框的缺省值//This snippet will show you how to keep a default value//in a text input field for when a user hasn't entered in//a value to replace itswap_val = [];$(".swap").each(function(i){swap_val[i] = $(this).val();$(this).focusin(function(){if ($(this).val() == swap_val[i]) {$(this).val("");}}).focusout(function(){if ($.trim($(this).val()) == "") {$(this).val(swap_val[i]);}});});<INPUT class=swap value="Enter Username here.." type=text>27. 指定时间后自动隐藏或者关闭元素(1.4支持)//Here's how we used to do it in 1.3.2 using setTimeoutsetTimeout(function() {$('.mydiv').hide('blind', {}, 500)}, 5000);//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep) $(".mydiv").delay(5000).hide('blind', {}, 500);28. 动态创建元素到DOMvar newgbin1Div = $('');newgbin1Div.attr('id','').appendTo('body');29. 限制textarea的字符数量jQuery.fn.maxLength = function(max){this.each(function(){var type = this.tagName.toLowerCase();var inputType = this.type? this.type.toLowerCase() : null;if(type == "input" && inputType == "text" || inputType == "password"){//Apply the standard maxLengththis.maxLength = max;}else if(type == "textarea"){this.onkeypress = function(e){var ob = e || event;var keyCode = ob.keyCode;var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);};this.onkeyup = function(){if(this.value.length > max){this.value = this.value.substring(0,max);}};}});};//Usage:$('#gbin1textarea').maxLength(500);30. 为函数创建一个基本测试用例//Separate tests into modules.module("Module B");test("some other test", function() {//Specify how many assertions are expected to run within a test.expect(2);//A comparison assertion, equivalent to JUnit's assertEquals.equals( true, false, "failing test" );equals( true, true, "passing test" );});31. 使用jQuery克隆元素var cloned = $('#gbin1div').clone();32. 测试一个元素在jQuery中是否可见if($(element).is(':visible') == 'true') { //The element is Visible }33. 元素屏幕居中jQuery.fn.center = function () {this.css('position','absolute');this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this; }//Use the above function as: $('#gbin1div').center();34. 使用特定名字的元素对应的值生成一个数组var arrInputValues = new Array();$("input[name='table[]']").each(function(){arrInputValues.push($(this).val());});35. 剔除元素中的HTML(function($) {$.fn.stripHtml = function() {var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;this.each(function() {$(this).html($(this).html().replace(regexp,""));});return $(this);}})(jQuery);//usage:$('p').stripHtml();36. 使用closest来得到父元素$('#searchBox').closest('div');37. 使用firebug来记录jQuery事件// Allows chainable logging// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) {if (console){console.log("%s: %o", msg, this);}return this;};38. 点击链接强制弹出新窗口jQuery('a.popup').live('click', function(){newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()}return false;});39. 点击链接强制打开新标签页jQuery('a.newTab').live('click', function(){newwindow=window.open($(this).href);jQuery(this).target = "_blank";return false;});40. 使用siblings()来处理同类元素// Rather than doing this$('#nav li').click(function(){$('#nav li').removeClass('active');$(this).addClass('active');});// Do this instead$('#nav li').click(function(){$(this).addClass('active').siblings().removeClass('active');});41. 选择或者不选页面上全部复选框var tog = false; // or true if they are checked on load$('a').click(function() {$("input[type=checkbox]").attr("checked",!tog);tog = !tog;});42. 基于输入文字过滤页面元素//If the value of the element matches that of the entered text//it will be returned$('.gbin1Class').filter(function() {return $(this).attr('value') == $('input#gbin1Id').val() ;})43. 取得鼠标的X和Y坐标$(document).mousemove(function(e){$(document).ready(function() {$().mousemove(function(e){$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY); });});44. 使得整个列表元素(LI)可点击$("ul li").click(function(){window.location=$(this).find("a").attr("href"); return false;});<UL><LI><A href="#">GBin1 Link 1</A></LI><LI><A href="#">GBin1 Link 2</A></LI><LI><A href="#">GBin1 Link 3</A></LI><LI><A href="#">GBin1 Link 4</A></LI></UL>45. 使用jQuery来解析XMLfunction parseXml(xml) {//find every Tutorial and print the author$(xml).find("Tutorial").each(function(){$("#output").append($(this).attr("author") + "");});}46. 判断一个图片是否加载完全$('#theGBin1Image').attr('src', 'image.jpg').load(function() {alert('This Image Has Been Loaded');});47. 使用jQuery命名事件//Events can be namespaced like this$('input').bind('blur.validation', function(e){// ...});//The data method also accept namespaces$('input').data('validation.isValid', true);48. 判断cookie是否激活或者关闭var dt = new Date();dt.setSeconds(dt.getSeconds() + 60);document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled){//cookies have not been enabled}49. 强制过期cookievar date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie('example', 'foo', { expires: date });50. 使用一个可点击的链接替换页面中所有URL$.fn.replaceUrl = function() {var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;this.each(function() {$(this).html($(this).html().replace(regexp,'<A href="$1">$1</A>'));});return $(this);}//usage$('#GBin1div').replaceUrl();。