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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery基础_入门必看知识点

    jQuery事件的因果关系是怎么样的一个格式: $("button").click(function(){ }) [正式接触jQuery] (1)jQuery的书写步骤: 1.引入jQuery文件: 2.新建一对script标签来书写jQuery: 3.用jQuery的方式进行代码分离: 4.按照jQuery用谁就选谁的原则去书写代码: [jQuery的css修改] alert()弹出一个警示框:弹出的信息可以写在小括号里面作为参数: css() 1.单属性获取,格式css("

  • jQuery基础语法实例入门

    本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码 代码如下: $("di

  • jQuery入门基础知识学习指南

    打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document

  • JQuery入门基础小实例(1)

    JQuery入门基础小实例(1)

    先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

  • jquery 指南/入门基础

    指南/基础 这是一个基础指南,旨在帮助你开始使用jquery.jquery给予你常见问题的解决方法.如果你尚未建立你的测试页面,我建议你创建一个含有下列内容的HTML页:  程序代码   复制代码 代码如下: <html>  <head>  <script type="text/javascript"  src="link/to/jquery.js"></script>  <script type="t

  • jquery 常用操作整理 基础入门篇

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, S

  • jQuery入门介绍之基础知识

    jQuery入门介绍之基础知识

    JavaScript 库作用及对比 为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的JavaScript 库有: jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作

  • jQuery选择器基础入门教程

    本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素.但是原始的javascript只元件根据ID或者TagName获取DOM对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回. 首先来看看什么是选择器. //根据id获取jQuery对象 var jQueryObject=$("#testDiv

  • JavaScript与JQuery框架基础入门教程

    目录 一,JS对象 二,DOM –1,作用 –2,测试 三,Jquery –1,概述 –2,使用步骤 –3,入门案例 –4,jQuery的文档就绪 四,JQuery的语法 –1,选择器 –2,常用函数 –3,常用事件 –4,练习 总结 一,JS对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js的创建对象</title> <s

  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

  • jQuery Easyui快速入门教程

    jQuery Easyui快速入门教程

    1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu

  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • 一看就懂的ReactJs基础入门教程-精华版

    一看就懂的ReactJs基础入门教程-精华版

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/re

  • Android 基础入门教程——开发环境搭建

    Android 基础入门教程——开发环境搭建

    现在主流的Android开发环境有: Eclipse + ADT + SDK Android Studio + SDK IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的Eclipse,而谷歌宣布不再更新ADT后,并且官网也去掉了集成Android开发环境的Eclipse下载链接,各种现象都表示开发者最后都终将过渡到Android Studio,当然这段过渡时间会很长,但如果你是刚学Android的话建议直接冲Android Studio着手:而且很多优秀的开源项目都是基于

  • MySQL基础入门教程之事务

    MySQL基础入门教程之事务

    目录 引言 1.事务操作 1.1 未控制事务 1.2 控制事务一 1.3 控制事务二 2.事务的四大特性 3.并发事务问题 4.事务隔离级别 总结 引言 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败. 就比如: 张三给李四转账1000块钱,张三银行账户的钱减少1000,而李四银行账户的钱要增加1000. 这一组操作就必须在一个事务的范围内,要么都成功,要么都失败. 正常情况: 转账这个操作, 需

  • Leaflet 基础入门教程示例

    目录 什么是Webgis? 什么是Leaflet? 在Vue中安装Leaflet,与其他依赖 在App.vue中使用 初始化地图 chinaProvider地图瓦片 addControls使用工具集 attribution创建自定义版权 Marker创建点 创建线 Polygon创建三角形 Popup弹窗&Tooltip提示 Geojson区域描边 总结 什么是Webgis? webGis又称之为网络地理信息系统,GIS的全名是Geographic Information System,它是在计

  • jQuery 白痴级入门教程

    会JS的请绕行,本文对你太白痴:不会HTML和CSS的请绕行,你可能会看不懂下面的内容.(英文最好也会一点,不然会很麻烦) 什么是jQuery? jQuery是一个JavaScript库,白痴解释就是一个JavaScript工具箱,很多现成的工具,想用什么就拿什么.省去了自己重新编写代码的烦恼,对于像我一样的JS白痴,更是容易上手. jQuery能做什么? 他能让你的页面产生很多让人惊喜的动态效果,简单的说就是让你的网站更加漂亮,这里有很多不同的效果,点击查看>>> 怎么用jQuery?

随机推荐