jQuery 基础选择器

#id选择器

jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:

$("#my_id")

其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。

element选择器

jquery能根据元素名查找元素,格式如下

$("element")

其中element就是元素的名称,也就是通过其名称找到该元素。

.class选择器

jquery能根据类别属性查找元素,格式如下

$(".class")

其中.class参数表示元素的CSS类别(类选择器)名称。

* 选择器

它的功能是获取页面中的全部元素,选择器中的参数就一个“*”,既没有“#”号,也没有“.”号。 由于该选择器的特殊性,它常与其他元素组合使用,表示获取其他元素中的全部子元素。(实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。)

$("*")

sele1,sele2,seleN选择器

有时需要精确的选择任意多个指定的元素,就需要调用sele1,sele2,seleN选择器,它的调用格式如下:

$(“sele1,sele2,seleN”)

其中参数sele1、sele2seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

层次性选择器

ance desc选择器

在实际应用开发中,常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素,ance desc选择器就是其中之一,它的调用格式如下:

$("ance desc")

其中ance desc是使用空格隔开的两个参数,ance参数任何有效的选择器,desc参数是寻找元素的选择器,类似于寻找一个家族下的全部子或孙辈,ance参数为家族名称,desc参数为子或孙辈名称。

例如,使用层次选择器,获取<div>元素中的全部<span>元素,并设置它们显示的内容,在如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>ance desc选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <p>
           <span></span>
        </p>
        <span></span>
    </div>
</body>
<script type="text/javascript">
    $("div span").html("ance desc test");
</script>
</html>

parent > child选择器

与上一选择器ance desc选择器相比,parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:

$"parent > child")

child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系。如图所示:

<!DOCTYPE html>
<html>
<head>
    <title>parent > child选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>
<body>
    <div>
        码农家族
        <p>
            <label></label>
        </p>
        <label></label>
        <label></label>
    </div>
    <label></label>
</body>
<script type="text/javascript">
    $("div>label").css("border", "solid 5px red");
</script>
</html>

prev + next选择器

通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:

$("prev + next")

其中参数pre为任何有效的选择器,参数"next" 为另外一个有效的选择器,他们之间"+"表示一种上下的层次关系,也就是说 “prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素

例如:获取<p>元素最近邻的下一个元素,并修改它的背景色。

<!DOCTYPE html>
<html>
<head>
    <title>prev + next选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>
<body>
    <div><label></label>
        <p></p>
        <label></label>
        <label></label>
    </div>
    <label></label>
</body>
<script type="text/javascript">
     $("p+label").css("background-color","red");
</script>
</html>

prev ~ siblings选择器

与选择器prev + next层次选择器相同,prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:

$("prev ~ siblings")

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。

例如,使用prev ~ next选择器,获取<p>元素后面相邻的全部元素,并修改它们的边框色和显示内容。如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>prev ~ siblings选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>
<body>
    <div>
        码农家族
        <label></label>
        <p>p</p>
        <label></label>
        <label></label>
    </div>
    <label></label>
</body>
<script type="text/javascript">
    $("p~label").css("border", "solid 1px red");
    $("p~label").html("我们都是p先生的粉丝");
</script>
</html>
时间: 2024-10-10 13:54:18

jQuery 基础选择器的相关文章

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el

2017-6-2 jQuery 基础 选择器

用代码练习: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

6.20 jquery基础 选择器

===============基本选择器=================    1.获取唯一id:$("#")    $("#myid").css("color","blue");    2.获取所有class:$(".")    $(".class").css("color","yellow");    3.获取所有元素:$("*&q

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

jQuery基础,选择器

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的cs

jQuery 语法-选择器-事件(基础知识)

jQuery 语法 jQuery 语法是通过选取 HTML 元素的,并对元素执行某些操作 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() -

JQuery————基础&amp;&amp;基础选择器

环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库.在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版. 引入jQuery文件库 下载完jQuery框架文件后,并不需要任何的安装,仅需要使用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

基础2.Jquery过滤选择器

                     1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, s