当前位置: 首页 > 编程笔记 >

jQuery选择器基础入门教程

丁安宜
2023-03-14
本文向大家介绍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中选择器的基础使用教程,包括了jQuery中选择器的基础使用教程的使用技巧和注意事项,需要的朋友参考一下 其实选择器就像开罐器一样,会用这个工具的人,自然吃的到甜头,但不会用这个工具的人,不管罐头里面的面筋土豆有多美味,吃不到就是吃不到,就如同jquery再怎么强大,也只能看着荧幕,而不知该如何下手,不过虽然选择器不难,也容易上手,但老实说,我用了一年多下来,还是觉得自己

  • 本教程于2015年7月开始撰写,耗时半年,总共148节,涵盖了Android基础入门的大部分知识,由于当时能力局限,虽已竭尽全力,但对于一些问题的分析难免有所纰漏,敬请读者海涵!IT技术更新换代很快,想想2015年还是Android 5.1横行,如今到了2018年都已经Android 8.0了,开发工具Android Studio也更新到了Android Studio 3.0.1。本系列的教程可能

  • D3 代表 Data-Driven Documents 。D3.js 是一个用于根据数据操作文档的 JavaScript 库。D3.js 是一个动态的,交互式的在线数据可视化框架,用于大量网站。

  • 第一章主要目的是让一个基本没有计算机图形基础的学员快速入门WebGL,建议大家按照顺序去阅读,不要跳过一些小节。其它的章节,大家可以根据个人需要,随意点击学习都可以。

  • 基础 稍微有一定的HTML/CSS/JavaScript基础,就可学习本课程,如果想实战开发Web3D项目,除了Three.js,前端还是需要深入学习。 学习顺序 初学者,按照顺序阅读 0.学前内容 和 1.快速入门 两章,其他章节可以根据需要选择性学习,内容比较多,也可以当成手册使用,用到某个功能的时候查询一下。 学习建议 电子书的知识讲解详细程度很难照顾基础不同的学员,阐述风格也很难兼容每个读

  • 本文向大家介绍Bootstrap零基础入门教程(二),包括了Bootstrap零基础入门教程(二)的使用技巧和注意事项,需要的朋友参考一下 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jac