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插件easyUi实现表单验证示例

    Jquery插件easyUi实现表单验证示例

    这篇文章主要介绍了Jquery插件easyUi实现表单验证示例,需要的朋友可以参考下
    2015-12-12
  • JQuery实现的按钮倒计时效果

    JQuery实现的按钮倒计时效果

    这篇文章主要介绍了JQuery实现的按钮倒计时效果,涉及jQuery结合时间函数动态修改按钮属性的相关技巧,需要的朋友可以参考下
    2015-12-12
  • jQuery实现遮罩层登录对话框

    jQuery实现遮罩层登录对话框

    用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框。本文将推荐一个带二维码的登录弹出层,可拖动、关闭,有需要的朋友可以参考一下。
    2016-12-12
  • jquery checkbox 勾选的bug问题解决方案与分析

    jquery checkbox 勾选的bug问题解决方案与分析

    本文首先由一个在项目中遇到的jquery checkbox 勾选的bug的解决方案,引申出jQuery中attr()和prop()的差异分析,非常的实用,需要的小伙伴快来研究下吧
    2014-11-11
  • 在myeclipse中如何加入jquery代码提示功能

    在myeclipse中如何加入jquery代码提示功能

    这篇文章主要介绍了在myeclipse中如何加入jquery代码提示功能,需要的朋友可以参考下
    2014-06-06
  • jquery实现的V字形显示效果代码

    jquery实现的V字形显示效果代码

    这篇文章主要介绍了jquery实现的V字形显示效果代码,涉及jQuery数学运算及样式操作的相关技巧,需要的朋友可以参考下
    2015-10-10
  • jQuery中:checked选择器用法实例

    jQuery中:checked选择器用法实例

    这篇文章主要介绍了jQuery中:checked选择器用法,实例分析了:checked选择器的功能、定义及选取选中的复选框或单选按钮时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery中extend函数简单用法示例

    jQuery中extend函数简单用法示例

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

    dreamweaver 8实现Jquery自动提示

    这篇文章主要介绍了dreamweaver 8实现Jquery自动提示的方法,需要的朋友可以参考下
    2014-12-12
  • jQuery实现下滑菜单导航效果代码

    jQuery实现下滑菜单导航效果代码

    这篇文章主要介绍了jQuery实现下滑菜单导航效果代码,通过jquery操作鼠标事件及页面样式动态操作实现下滑菜单导航功能,非常具有实用价值,需要的朋友可以参考下
    2015-08-08

最新评论