`
ps329795485
  • 浏览: 53530 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

12招jQuery常用技巧

 
阅读更多
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

1、关于页面元素的引用

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。
如:$(document.getElementById(”msg”))则为jQuery对象,可以使用jQuery的方法。
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。如:$(”#msg”)[0],$(”div”).eq(1)[0],$(”div”).get()[1],$(”td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用jQuery的方法。

以下几种写法都是正确的:

3、如何获取jQuery集合的某一项

对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jQuery对象,而get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:

4、同一函数实现set和get

jQuery中的很多方法都是如此,主要包括如下几个:


同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jQuery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jQuery已经为我们提供的很方便的方法进行集合的处理。包括两种形式:

6、扩展我们需要的功能


使用扩展的方法(通过“$.方法名”调用):

7、支持方法的连写

所谓连写,即可以对一个jQuery对象连续调用各种不同的方法。例如:

8、操作元素的样式
主要包括以下几种方式:

9、完善的事件处理功能

jQuery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jQuery获取的对象添加事件。如:

jQuery中几个自定义的事件:

(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。


(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。


(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。例如:

(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中(添加)删除绑定的事件。例如


10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。如

等同于:

也可以处理json数据,如

结果为:

可以有多个参数(合并多项并返回)$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。如:

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 如:

$.trim(str):删除字符串两端的空白字符。如:


12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,jQuery对此专门提供了方法用于解决此问题。
使用jQuery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用jQuery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。如:
















  


  
分享到:
评论

相关推荐

    jQuery常用技巧大放送

    在本文中,我们将深入探讨一些jQuery的常用技巧,这些技巧能够帮助开发者更高效地利用jQuery的功能。 1. 引用页面元素: jQuery通过`$()`选择器来引用页面元素,支持通过ID、类名、元素名以及DOM层级关系和XPath...

    jQuery Mobile十大常用技巧

    以下是对标题和描述中提到的jQuery Mobile十大常用技巧的详细解释: 1. **禁止截断列表和按钮内容**: 当jQuery Mobile中的列表项或按钮文本过长时,默认会自动截断。你可以通过添加CSS样式来阻止这种行为。例如,...

    jQuery常见开发技巧详细整理

    在jQuery的开发过程中,掌握一些常见技巧能显著提升开发效率和代码质量。下面是一些详细的jQuery开发技巧: 1. **引用页面元素**:jQuery通过`$()`选择器引用元素,支持ID、类名、元素类型以及层级关系和DOM或XPath...

    jQuery常用代码片段

    分析这两个文件的内容可以帮助我们学习到更多的jQuery实战技巧和最佳实践。 例如,`function.js`可能包含了一些封装好的功能函数,如`showNotification()`用于显示通知,`toggleVisibility()`切换元素的可见性,...

    最新jQuery常用技巧 超赞!

    ### 最新jQuery常用技巧解析 #### 一、页面元素的引用 在网页开发过程中,我们需要对页面中的元素进行各种操作,比如改变样式、获取或设置属性等。利用jQuery这一流行的JavaScript库,我们可以更加便捷地完成这些...

    jQuery常用插件大全pdf

    ### jQuery常用插件详解 #### 1. Horizontal Accordion: jQuery **知识点**: 水平方向折叠控件,基于jQuery开发,设计简洁,适用于快速实现网页中的菜单或信息展示板块。 #### 2. jQuery-HorizontalAccordion **...

    jQuery 常用版本大全

    本资源集合了jQuery的常用版本,帮助开发者在不同项目需求中找到合适的版本。 首先,我们要理解jQuery的核心概念。jQuery通过一种简化的语法,使得操作DOM(Document Object Model)变得简单。例如,通过`$()`选择...

    jquery常用插件包

    这个“jquery常用插件包”包含了几个重要的jQuery插件的源代码,包括dialog对话框插件、menu菜单插件以及tabs选项卡插件,这些都是网页交互设计中常用的组件。 首先,让我们详细探讨一下jQuery库的基础知识。jQuery...

    jquery使用技巧总结

    《jQuery使用技巧深度解析》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。本文将深入探讨jQuery的使用技巧,帮助开发者提升效率,更好地...

    jQuery常用技巧大放送(技巧加实例)

    本篇文章将深入探讨jQuery的常用技巧,通过实例帮助您更好地理解和运用这些技巧。 1. 引用页面元素 在jQuery中,我们可以使用 `$()` 函数来选择和引用页面上的元素。例如,通过ID、类名、元素类型或层级关系,甚至...

    jQuery常用经典技巧大放送

    资源名称:jQuery常用经典技巧大放送资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQuery常用技巧

    jQuery 是一个广泛使用的...以上就是jQuery的一些常用技巧,它们大大提高了JavaScript编程的效率,使得开发者能够更加专注于功能实现而不是DOM操作的细节。jQuery的灵活性和易用性使其成为许多开发者的首选工具。

    JQuery常用组件

    jQuery 常用组件打包下载! 内含有: jquery.1.1.4.core.zip --jQuery最新核心代码 jquery.calendar.zip --日历组件 jquery.menu.zip --菜单组件 jquery.tablesorter.zip --表格排序组件 jquery....

    jQuery Mobile开发常用技巧

    ### jQuery Mobile 开发常用技巧详解 #### 一、概述 jQuery Mobile 是一款基于 HTML5 的前端框架,用于构建响应式的移动应用。它以其强大的功能、灵活性及易用性深受开发者喜爱。本文将深入探讨 jQuery Mobile 开发...

    jQuery常用插件介绍/收集

    **jQuery常用插件介绍/收集** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。本文将详细介绍一些常用的jQuery插件,并探讨它们在实际项目中的应用...

    jQuery常用功能大全

    ### jQuery常用功能详解 #### 一、页面元素的引用 在使用jQuery时,最基础的操作之一就是选择页面上的元素。这通常通过`$()`符号来完成。jQuery的强大之处在于它支持多种选择器语法,比如: - **ID选择器**:通过...

    Jquery演示 jquerydemo jquery常用

    **jQuery 演示:深入理解与应用** jQuery 是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本篇文章将围绕"jQuery演示"这一主题,深入探讨jQuery的...

Global site tag (gtag.js) - Google Analytics