优雅的jQuery (选择器与链式编程)

jquery做法：

$(function() {

$(‘div’).css(“backgroundColor”,“red”);

})

学完直接一句,jquery真香，连for循环都省了，由于隐式迭代

那隐式迭代到底是什么呢？

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

---

4.jQuery筛选选择器

---

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个i元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素,索引号index从0开始。
:odd	$("li:odd")	t元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的Ii元素中，选择索引号为偶数的元素

---

5.jQuery筛选方法

---

语法	用法	说明
parent()	$("li").parent();	查找父级(最近一级的父亲)
children(selector)	$("ul").children("li")	相当于$("ul>li")，最近一级(亲儿子)
find(selector)	$("ul").find("li");	相当于$("ul li"),后代选择器
siblings(selector)	$(".first").siblings("li");	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$("li").eq(2);	相当于$("li:eq(2)"), index从0开始

---

6.新浪下拉菜单案例

---

示例代码：

• 微博
• 私信
• 评论
• @我

• 微博
• 私信
• 评论
• @我

• 微博
• 私信
• 评论
• @我

• 微博
• 私信
• 评论
• @我

• ---

  7.jQuery的排他做法

  ---

  如果现在有四个黑色div盒子，我们想实现点击哪个盒子哪个盒子就变成红色，应该怎么做呢

  在我们的原生js中是不是应该给每个盒子来个for循环添加个点击事件，然后再来个for循环先把所有样式清除也就是排他，然后再把当前这个盒子颜色变为红色。

  那我们看一下js是怎么做的，通过隐式迭代可以非常简单的实现：

  $(function() {

  // 1. 隐式迭代 给所有的按钮都绑定了点击事件

  $(“div”).click(function() {

  // 2. 当前的元素变化背景颜色

  $(this).css(“background”, “red”);

  // 3. 其余的兄弟去掉背景颜色 隐式迭代

  $(this).siblings(“div”).css(“background”, “”);

  });

  })

  8.淘宝服饰精品案例

  ---

  实现效果：

  

  案例分析：

  • 核心原理:鼠标经过左侧盒子某个小li ,就让内容区盒子相对应图片际,其余的图片隐藏。

  • 需要得到当前小li的索引号,就可以显示对应索引号的图片

  • jQuery得到当前元素索引号**$(this).index()**

  • 中间对应的图片,可以通过eq(index)方法去选择

  • 显元素show() 隐藏元素hide()

  $(function() {

  // 1. 鼠标经过左侧的小li

  $(“#left li”).mouseover(function() {

  // 2. 得到当前小li 的索引号

  var index = $(this).index();

  console.log(index);

  // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了

  $(“#content div”).eq(index).show();

  // 4. 让其余的图片（就是其他的兄弟）隐藏起来

  $(“#content div”).eq(index).siblings().hide();

  })

  })

  ---

  9.jQuery链式编程

  ---

  在我们的第七小节里有这样一段代码:

  $(function() {

  // 1. 隐式迭代 给所有的按钮都绑定了点击事件

  $(“div”).click(function() {