jQuery选择器基础入门教程

 更新时间:2016年05月10日 11:11:49   作者:dingyan954  
这篇文章主要介绍了jQuery选择器基础知识,结合实例分析了jQuery选择器的功能、使用方法与相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:

什么是jQuery选择器

使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。

在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回。

首先来看看什么是选择器。

//根据id获取jQuery对象
var jQueryObject=$("#testDiv");

上例中使用了id选择器,选取id为testDiv的DOM对象并将它放入jQuery对象,最后返回了一个jQuery对象。

现在通过jQueryObject变量就可以操作testDiv图层了,因为jQueryObject是一个jQuery对象,所以可以使用所有的jQuery对象方法。比如修改图层中的HTML内容:

jQueryObject.html("修改后的HTML内容");

通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。

jQuery选择器的强大在于提供了丰富的选择器,如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。

jQuery选择器核心函数

jQuery选择器调用的是jQuery核心函数:

jQuery(EXPRESSION,[econtext]);

这个函数接收一个包含选择器表达式的字符串,然后用这个字符串去匹配一组元素。

jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数,或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式(通常由CSS选择器组成),然后根据这个表达式查找所有匹配的元素。

默认情况下,如果没有指定context参数,$()将在当前的HTML document中查找DOM元素:如果指定了context参数,如一个dom元素集jQuery对象,则会在这个context中查找。在jQuery1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。

参数说明如下:

~Expression:必选参数,选择器表达式。

~Context:可选参数,选择器上下文

~jQuery,选择器返回的jQuery对象,jQuery对象,jQuery对象是一个集合,可以使用链式语法调用各种jQuery函数。

Context参数能够缩小选择器的范围,加快查找速度。

更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结

希望本文所述对大家jquery程序设计有所帮助。

相关文章

  • jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表
    2010-08-08
  • 遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)

    遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)

    实现点击按钮弹出遮罩层,点击按钮可以随意拖动和关闭。接下来,通过本篇文章给大家介绍遮罩层点击按钮弹出并且具有拖动和关闭效果,需要的朋友可以参考下
    2015-08-08
  • jquery实现网页定位导航

    jquery实现网页定位导航

    这篇文章主要为大家详细介绍了jquery实现网页定位导航,具有一定的实用价值和参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jQuery中extend函数简单用法示例

    jQuery中extend函数简单用法示例

    这篇文章主要介绍了jQuery中extend函数简单用法,结合实例形式简单分析了jQuery使用extend函数扩展对象属性的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • validform表单验证的实现方法

    validform表单验证的实现方法

    这篇文章主要介绍了validform表单验证的实现方法,validform插件主要把所有的验证条件和验证提示信息绑定到每个表单元素,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • jquery实现简单的拖拽效果实例兼容所有主流浏览器

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    拖拽效果个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,具体实现如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

    jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

    这篇文章主要介绍了jQuery实现的给图片点赞+1动画效果,并附带在线演示及demo源码下载,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下
    2015-12-12
  • 使用jQuery实现返回顶部

    使用jQuery实现返回顶部

    博客园是程序员们比较喜欢的聚集地,很多人喜欢发发心得,一直都觉着挺好的,但最不满意他的一点是,没有返回到顶部的功能,好吧,我们自己来添。
    2015-01-01
  • jQuery删除节点用法示例(remove方法)

    jQuery删除节点用法示例(remove方法)

    这篇文章主要介绍了jQuery删除节点的方法,结合实例形式分析了remove方法进行页面元素删除的相关使用技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery+PHP实现动态数字展示特效

    jQuery+PHP实现动态数字展示特效

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果。
    2015-03-03

最新评论