jQuery选择器基础

原创 2012年03月27日 19:46:25

什么是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过滤选择器详解

基本过滤选择器选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first...
  • csujiangyu
  • csujiangyu
  • 2015年08月19日 10:19
  • 5553

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1126

JQuery中的基本筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范,而是jQuery自己为了开...
  • LHJBK
  • LHJBK
  • 2016年05月30日 17:08
  • 1796

jQuery选择器基础知识

  • 2014年01月10日 12:07
  • 66KB
  • 下载

JQuery节点,表单选择器基础文档

  • 2015年08月01日 11:39
  • 744KB
  • 下载

jquery基础 选择器 事件

  • 2010年06月22日 18:07
  • 182KB
  • 下载

jQuery基础第二天:选择器 事件处理函数

宁徽说事 2017-06-01 16:00 属性过滤 1. 内容过滤: 根据内容查找元素 包括: 4个 :contains(text) 查找内容中包含指定文本的元素 比如: span...
  • u011277123
  • u011277123
  • 2017年06月02日 09:54
  • 194

jQuery快速入门基础教程之选择器(一)

问题:我怎么才能收到你们公众号平台的推送文章呢? 答案:只需要点击标题下面的蓝色字【web前端开发】关注即可。 01、jQuery元素选择器 jQuery的基本设...
  • snsHL9db69ccu1aIKl9r
  • snsHL9db69ccu1aIKl9r
  • 2017年12月07日 00:00
  • 77

jQuery基础知识之选择器

前面的博客中,我简单的介绍了一些jQuery中的选择器,现在我介绍更多的选择器给大家。 一、基础选择器 一个有很多格子的盒子里装满不同颜色的球,且有几种不同的大小,相同大小的球放在同一个格子里,且每...
  • qq_28568283
  • qq_28568283
  • 2016年02月26日 17:35
  • 199

从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)

jQuery语法   (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, productio...
  • qq20004604
  • qq20004604
  • 2016年03月31日 17:38
  • 1630
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery选择器基础
举报原因:
原因补充:

(最多只允许输入30个字)