jQuery的基本选择器

	选择器的分类

	<!--1.基本选择器
2.层级选择器
3.过滤选择器
3.1 基本过滤选择器
3.2 内容过滤选择器
3.3 可见性过滤选择器
3.4 子元素过滤选择器
3.5 表单对象属性过滤选择器
4.表单选择器

1. 基本选择器

			#id
element 根据给定的元素名匹配所有元素 .class
* 改变所有元素的背景色
selector, 将每一个选择器匹配到的元素合并后一起返回。 --> </title> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

#id HTML的代码如下:

	<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

#id 用于搜索的,通过元素的 id 属性中给定的值

jQuery 代码如下;

<script type="text/javascript">
$("#myDiv").css("color","red");
</script>

结果: id=“myDiv”字体变为红色

   [ <div id="myDiv">id="myDiv"</div> ]

element HTML的代码如下:

	<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

element 一个用于搜索的元素。指向 DOM 节点的标签名。

jQuery 代码如下;

<script type="text/javascript">
$("div").css({"font-size":"3em"});
</script>

结果:显示所有div,且字体为3em;

  [ <div>DIV1</div>, <div>DIV2</div> ]

.class HTML的代码如下:

	<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

.class 根据给定的类匹配元素。

jQuery 代码如下;

     $(".myClass").css("background","blue");

结果:显示所有,myClass背景为蓝色;

	[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* HTML 代码如下:

	<div>DIV</div>
<span>SPAN</span>
<p>P</p>

* 匹配所有元素

jQuery 代码如下;

    $("*").css("background","yellow");

结果: body 背景为黄色

jQuery 代码

    [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector HTML 的代码如下:

	<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

selector 将每一个选择器匹配到的元素合并后一起返回。

jQuery 代码如下;

	$("div,span,p.myClass")

结果:注意元素合并用 , 表示;

    [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

jQuery选择器分类的更多相关文章

  1. Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器。

    基本选择器 说明:通过元素id.class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test& ...

  2. jQuery选择器的分类之过滤选择器

    jQuery选择器的分类之过滤选择器 上一篇文章为大家简单呢的介绍了jQuery选择器中的基本选择器,层级选择器,表单选择器,接下来就带大家了解一下过滤选择器... 过滤选择器都分为哪些??? 1.基 ...

  3. jQuery选择器的分类

    jQuery选择器的分类 jQuery中有很多分类,大类分为四类,四类里面又分为很多小类,下面就为大家一一介绍,这些选择器的使用和好处,Me用的是jQuery1.8.3的版本 选择器都有哪四类?? 1 ...

  4. JQuery选择器的使用和分类

    jQuery选择器 id选择器格式 $("#box") //获取标签里的id是box的标签 类选择器格式 $(".a") //获取标签里的类名是a的标签 标签选 ...

  5. 二、jquery选择器

    在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...

  6. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  7. JQuery选择器使用

    问题描述:         JQuery选择器使用   问题说明:       1.在页面中创建一个导航条,单击标题时,可以伸缩导航条的内容,标题中的提示图片也随之改变       2.单击" ...

  8. 浅谈jquery选择器

    首先来说说jquery选择器的优势: 1.简洁的写法  2.支持css1.0到3.0选择器 3.完善的处理机制. 再来说说分类: jquery选择器分为基本选择器.层次选择器.属性选择器.基本过滤选择 ...

  9. JavaScript/jQuery选择器简介

    DOM提供的选择器 选择器是帮助我们选择页面元素的工具,在网站制作中常常会涉及到某个元素的改变,通过选择器提取这些元素可以很轻易的实现(DOM术语把所说的“元素”称作是“节点”).JavaScript ...

随机推荐

  1. set集合(一)

    set 叫做集合  作用:  去重(去除重复) 举例-- >>> name_list = ['alben','nichole','lucy','andy','tom','alben' ...

  2. 每R一点:各种画地图,全是知识点,90%人不知道!(转)

    R语言绘制地图,在数据分析中经常能够用到,并且会达到非常好的展示效果,本节以例子形式,介绍如何使用R语言工具,画出理想的地图. 本节例子在 R version 2.15.3版本下运行顺畅,其他版本待定 ...

  3. zookeeper的安装与配置

    本文将通过三个zookeeper的节点去配置 1.首先去官网下载zookeeper的包 zookeeper-3.4.10.tar.gz 2.用FTP文上传到/usr/local下 3.解压文件tar ...

  4. Docker - docker machine

    前言 之前在使用docker的时候,对于docker-machine的理解有一些误解(之前一直以为docker-machine和docker-engine等价的,只不过是在window或者mac平台上 ...

  5. 【Python3之常用模块】

    一.time 1.三种表达方式 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.命令如下 ...

  6. LinkedList集合

    LinkedList集合特点: 1,有序,允许重复(有序指与添加顺序一致) 2,有下标,可以通过下标获取元素,以及将元素插入指定位置 3,底层使用的数据结构是链表以及堆栈结构,线程不安全 4,链表内存 ...

  7. Implement a Linked List

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Lin ...

  8. 实验:Oracle数据泵导出导入之序列问题

    今天同事提出了一个问题: 使用数据泵expdp导出1个schema,有个表主键是触发器自增的id,导入测试库测试时,发现表里的数据比自增序列的值要大.导致插入数据报错. 最终结论是: 由于数据库先进行 ...

  9. Android控件的使用

    1. RadioButton (单选按钮) 嵌入到RadioGroup中实现单选效果 android:checkedButton="radio的id值" int getchecke ...

  10. ASP.NET MVC + ECharts图表案例

    废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...