第十三章：第2节jQuery选择器——基本选择器

更新于：2017-12-18 16:27:03

学习jQuery先要学习选择器，什么是选择器？

前面学习DOM时，通常都是先要获取元素节点对象，然后才能对元素做添加属性、添加文本、添加子元素……等操作。

使用jQuery做这些操作时，需要通过选择器匹配到某个元素节点，返回的值是一个对象（以后我们称它为jQuery对象）。使用jQuery对象的方法可以对HTML元素做各种操作。选择器种类有很多，我们先学习最基本的选择器。

基本选择器

$('#id属性值') ----------->document.getElementById()

$('tag标签名称')----------->document.getElementsByTagName();

$('.class属性值') class属性值选择器

$('*') 通配符选择器

$('s1,s2,s3')联合选择器

看演示代码：

详解：

注：css()是jQuery对象的方法，顾名思义，它可以更改HTML元素的style属性。

第11行代码选择器$('#username')可以匹配到37行的[<input type="text" name="username" value="xiaoqiang" id="username" />]，方法css('color','red')等于是给<input>添加了属性style="color:red;"

第14行代码选择器$('input')可以匹配到37行、42行的[<input type="text" name="username" value="xiaoqiang" id="username" />,<input type="button" value="触发" onclick="f1()" />]，方法css('background-color','blue')等于给这两个<input>都添加了属性style="background-color:blue;"

第17行代码选择器$('.apple')可以匹配到39行的[<div class="apple">We are studying jquery</div>]，如果多个标记元素都有属性class="apple"，那就匹配所有的有属性class="apple"的标记元素。

第20、23行更容易理解。$('*')匹配所有的标记元素，很少用到这个选择器。$('p,#username,.apple')等同于$('p')、$('#username')、$('.apple')这三个选择器各自匹配到的标记元素。

这5个选择器前三个经常用到，很好理解，没有什么难度。

“$”符号由来：

JS的变量和函数名可以命名为“$”，在jQuery中$()就是一个函数，它的返回值是jQuery对象。看jQuery源代码：