一、jQuery中的 $

1. 顶级对象

可以使用$(‘DOM对象’)将 DOM 对象转换成一个jQuery对象，使其具备jQuery对象的方法。比如下文的入口函数，将 document 对象转换成了 jQuery 对象，调用了 ready 方法。

2.入口函数

$(function(){// DOMContentLoaded之后需要执行的代码
});

等价于

$(document).ready(function(){
// DOMContentLoaded之后需要执行的代码
});

其作用都等价于：

document.addEventListener("DOMContentLoaded", function(){
// DOMContentLoaded之后需要执行的代码});

3. jQuery对象和DOM对象的转换

jQuery 对象和 DOM 对象相互独立，各自有各自的方法和属性，不能混用，但是可以转换。

jQuery对象的本质是通过选择器进行筛选获取DOM对象后，对其进行伪数组形式的封装，让其具备jQuery对象的方法，观察下面的打印结果：

// html
<div class="first"></div>
<div></div>
// js
var divs = $('div');
console.dir(divs);
var domDiv = document.querySelector('div');
console.dir(domDiv);

结果：

展开 __proto__ 就可以看到很多方法，比如 hide,也就是说，这个对象包含 2 个 DOM 中的 div 对象，额外添加了许多方法和属性。当调用这些方法时，默认会对 jQuery 对象中的伪数组中的所有元素生效，也就是隐式迭代，而伪数组中的元素就是 DOM 对象。

用图表示就是这样：

因为是伪数组的形式，那么 jQuery 和 DOM 的转换就简单了，取出 jQuery 伪数组中的元素即可：

jQuery 对象转 DOM 对象：

// 直接取数组中的元素
divs[1].style.display = "none";
// 使用get方法获取数组中的元素
divs.get(1).style.display = "none";

DOM 对象转 jQuery 对象，使用 $ 符号所得到的对象就是 jQuery 对象：

// 标签选择器
var divs = $('div');
// 类型选择器
$('.first').hide();

注意：get 和 eq 含义不同。 get 是转换对象，eq 是取出 jQuery 对象

二、选择器

使用方法：

$("选择器")

1. 基础选择器：

2. 层级选择器

3. 筛选选择器

使用：

$(function(){$(function(){// 获取结果中的第一个元素$("ul li:first").css("color", "red");// 奇数$("ul li:odd").css("color", "red");// 索引值$("ul li:eq(4)").css("color", "red");});
})

4. 筛选方法

prevAll()：之前的所有的符合选择器的元素，默认无选择器表达式
prev()：前一个符合选择器的元素，默认无选择器表达式

如下代码就不会改变，因为ul .item 的前一个不符合选择器要求：

$("ul .item").prev(".first").css("color", "red");<li class="first">哈哈啊</li>
<li class="second">哈哈啊</li>
<li class="item">哈哈啊</li>
<!-- <li class="item">哈哈啊</li> -->

另外，siblings的执行对象中的元素不止一个的话，会出现问题，使用时最好确保调用对象只有一个：

<script>
$(function() {$("ul .item").siblings("li").css("color", "red");
})
</script><ul><li class="first">哈哈啊</li><li class="second">哈哈啊</li><li class="item">哈哈啊</li><li class="item">哈哈啊</li><li>哈哈啊</li><li>哈哈啊</li><li>哈哈啊</li><li>哈哈啊</li><li>哈哈啊</li><li>哈哈啊</li><li>哈哈啊</li>
</ul>

结果就是所有的