jQuery的基本选择器

JQuery的基本选择器

jQuery是JavaScript的框架，也是目前大多数程序员在使用的框架之一，jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。使用jQuery必须先了解它的选择器，它可以准确地获取你想要的应用效果元素，，而它的选择器有9个，分别是：

基本选择器、层级选择器、基本筛选选择器、内容选择器、可见性选择器、属性选择器

子元素选择器、表单选择器和表单对象属性选择器；

在网页中使用jQuery需要添加jQuery的库，而添加的方法有两种，

1、 从jQuery的官网中下载jQuery库，（jQuery官网：http://jquery.com）

< script type=“text/javascript” src="./js/jquery1.12.4/jquery1.12.4.js"></ script>

2、 在CDN中直接载入jQuery库

< script src=“https://cdn.bootcss.com/jquery/1.12.4/jquery.js”>

（它有两种版本：生产版本和开发版本，生产版本用于实际网站里，它是已经被精简和压缩的，文件名称(.min.js)；开发版本用于测试和开发，没有压缩，是可读代码，，文件名称(.js)，而我们平时使用是生产版本，）

我们从最简单的也是最常用的开始学起:今天我们来简单的了解一下jQuery的基本选择器，

它主要有4个，分别是：
1、#id 选择器：它是根据在HTML代码中给定的id来进行匹配元素，用一个#符号来拼接id，具体了解我们来演示一下；
我先设置两个div，分别给他们添加一个id，当然每一个元素标签，都可以给他们添加id， （一个id选择器只可以选择一个id，id是唯一的）

   HTML代码：<div id="a">我是(id)a</div>
           000 <div id="b">我是(id)b</div>
   jQuery代码：$(document).ready(function () {
			$("#a").css(‘color’,’pink’);
              });

效果图：

获取到的就是第一个div里的id，之后就去设置文字颜色为粉色；

注意：在jQuery里面，它的定义符号是美元符号:$，而$和jquery是jQuery的变量，在之后写代码中，给变量命名不要使用这两个名称，更不要给它们赋值，不然的话会覆盖掉jQuery，导致它失效。

2、.class类选择器：根据选定的元素名匹配去所有元素，通过标签名、属性名或内容对 HTML 元素进行选择。相对id选择器来说，效率相对会低一点，但是优势就是可以多选，一个元素可以有多个类，只要有一个符合就能被匹配到。

HTML代码：<div>
            <p class=”a”>我想变成粉色</p>
         </div>
jQuery代码：$(document).ready(function () {
		$(".a").css('color', 'pink');//设置p标签里的字体颜色为粉色；
	     });

效果图：

通过类选择器选择到p标签中的类“a”，将它的字体改为粉色

3、element元素选择器：它是可以根据给定的元素（HTML）标签名去匹
配所有元素，或者说是一个用来搜索元素用的。

    HTML代码：<div>
                  <p>红色</p>
                  <p>橙色</p>
                  <p>黄色</p>
              </div>
   jQuery代码：
            $(document).ready(function () {
              $("p").css('background', 'pink');
 });

效果图：

通过元素选择器选择到放置在div元素里的所有p元素，再去更改它的背景颜色为粉色

4、* 通配符选择器/全选选择器：它可以匹配所有元素，大多用于结合上下文搜索，找到每一个元素。