jQuery中的“$”及相关知识点

在jQuery中，jQuery === $，两者是完全等效的，只不过”$“是一种更常用的简写方式。”$”实际上表示的是一个函数名，函数$()随着括号内的参数不同，功能也不同。以下是常见的几种情况：

（一）参数是function，作为入口函数

1
2
3

$(function(){
    // 表示调用入口函数
});

1
2
3

$(document).ready(function(){
    // 另一种入口函数的写法
});

JavaScript的入口函数window.onload = function(){}与jQuery入口函数的区别是：js要等页面中的所有资源加载完毕才执行，包括加载图片，文件等；而jQuery入口函数等待文档树加载完成就执行，不会等待图片，文件的加载。

（二）参数是DOM对象，将其转化为jQuery对象

例如第一部分介绍的$(document).ready(function(){ }); 将DOM对象用”$”符号包裹，就将其转化成了jQuery对象，因此可以直接调用jQuery对象的ready()方法。

在此回顾一下jQuery对象和DOM对象之间的区别。DOM对象是指使用JavaScript中的方法获取到的页面元素对象，DOM对象只能够使用DOM对象的方法和属性；jQuery对象是使用jQuery方法获取到的元素对象，也只能够使用jQuery对象的方法。实际上，jQuery对象是包装了DOM对象的集合（伪数组)，两者可以相互转换。将DOM对象作为参数传入$()就转化成了jQuery对象；因为jQuery对象是伪数组，直接以数组的方式取出来就转化成了DOM对象。

// 以jQuery方式获取到的jQuery对象
var flower = $("li");

// 以数组索引的方式取出，就转化成了DOM对象，可以直接使用DOM对象方法
flower[1].style.backgroundColor = "red";

// 也可以用get()方式取出，但一般用上面一种，更为简单易懂
flower.get(2).style.backgroundColor = "yellow";

（三）参数是一个字符串，用来获取对象

例如$("#sun").css("backgroundColor", "red"); 获取到了id为sun的jQuery对象。除了获取id之外，jQuery基本兼容了css1到css3的选择器，并增加了更多。下面简单总结一下常用的jQuery选择器。

基本选择器		（与css选择器用法相同）
ID选择器	$(“#id”)	获得指定ID的元素
类选择器	$(“.class”)	获得指定类的元素
标签选择器	$(“div”)	获得指定标签的元素
交集选择器	$(“div.flower”)	获得div中的类为flower的元素，中间无空格
并集选择器	$(“.flower, .grass, #moon”）	逗号分隔，满足一个即可
层级选择器		(与css选择器用法相同)
子代选择器	$(“ul>li”)	获取子代元素，第一后代
后代选择器	$(“ul li”)	获取ul下所有li，不仅是子代，还可以是子代的子代等
过滤选择器
:eq(index)	$(“li:eq(3)”)	获取li中索引为3的元素
:even	$(“li:even”)	获取li中索引为偶数的元素（索引从0开始，所以视觉效果是获取了奇数号的元素）
:odd	$(“li:odd”)	获取li中索引为奇数的元素
筛选选择器
children(selector)	$(“ul”).children(“li”)	相当于子代选择器 $(“ul>li”)
find(selector)	$(“ul”).find(“li”)	相当于后代选择器 $(“ul li”)
siblings(selector)	$(“#flower”).siblings(“li”)	获取兄弟节点，不包括自己
parent()	$(“#flower”).parent()	获取父节点
eq(index)	$(“li”).eq(3)	相当于$(“li:eq(3)”)
next()	$(“#flower”).next()	获取上一个兄弟元素
prev()	$(“#flower”).prev()	获取下一个兄弟元素