正心全栈编程-文档站

Appearance

jQuery 选择器 ​

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

基础选择器 ​

js
$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号
名称用法描述
ID选择器$("#id")获取指定ID的元素
全选选择器$("*")匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,i")选取多个元素
交集选择器$("li.current")交集元素

层级选择器 ​

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称.用法描述
子代选择器.$("ul>li");使用 > 号,获取亲儿子层级的元素 ; 注意,并不会获取孙子层级的元素
后代选择器$("ul li");使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

基础选择器和层级选择器案例代码

html
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
  <li>我是ol 的</li>
  <li>我是ol 的</li>
  <li>我是ol 的</li>
  <li>我是ol 的</li>
</ol>
<ul>
  <li>我是ul 的</li>
  <li>我是ul 的</li>
  <li>我是ul 的</li>
  <li>我是ul 的</li>
</ul>
javascript
$(function () {
  console.log($(".nav"));
  console.log($("ul li"));
});

伪类选择器 ​

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

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

案例代码

html
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>
javascript
$(function () {
  $("ul li:first").css("color", "red");
  $("ul li:eq(2)").css("color", "blue");
  $("ol li:odd").css("color", "skyblue");
  $("ol li:even").css("color", "pink");
});

另: jQuery 中还有一些筛选方法，类似 DOM 中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

筛选方法 ​

语法用法.说明
parent()$("li").parent()查找父级
children(selector)$("ul").children("li")相当于$("ul>li")，最近一级(亲儿子)
find(selector)$("u1").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 开始

筛选方法示例1

html
<div class="yeye">
  <span>爷爷</span>
  <div class="father">
    <span>爸爸</span>
    <div class="son"><span>儿子</span></div>
  </div>
</div>
javascript
// 注意一下都是方法 带括号
$(function () {
  // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
  console.log($(".son").parent().text());

  // 2. 子
  // (1) 亲儿子 children()  类似子代选择器  ul>li
  $(".yeye").children("span").css("color", "red");

  // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
  $(".yeye").find("span").css("color", "red");
});

筛选方法示例 2

html
<ol>
  <li>赵</li>
  <li>钱</li>
  <li class="item">孙</li>
  <li>李</li>
  <li>周</li>
  <li>吴</li>
</ol>
<ul>
  <li>我是 ol 的 li</li>
  <li>我是 ol 的 li</li>
  <li>我是 ol 的 li</li>
  <li>我是 ol 的 li</li>
  <li>我是 ol 的 li</li>
  <li>我是 ol 的 li</li>
</ul>
<div class="current">俺有current</div>
<div>俺木有current</div>
javascript
// 注意一下都是方法 带括号
$(function () {
  // 1. 兄弟元素 siblings 除了自身元素之外的所有亲兄弟
  $("ol .item").siblings("li").css("color", "red");

  // 2. 第 n 个元素
  var index = 2;
  // (1) 我们可以利用选择器的方式选择
  // $("ul li:eq(2)").css("color", "blue");
  $("ul li:eq(" + index + ")").css("color", "blue");

  // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
  // $("ul li").eq(2).css("color", "blue");
  // $("ul li").eq(index).css("color", "blue");

  // 3. 判断是否有某个类名
  console.log($("div:first").hasClass("current"));
  console.log($("div:last").hasClass("current"));
});

隐式迭代 ​

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

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

html
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
  <li>相同的操作</li>
  <li>相同的操作</li>
  <li>相同的操作</li>
</ul>
js
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");

案例：新浪下拉菜单 ​

参照实现 新浪的下拉菜单

html
<ul class="nav">
  <li>
    <a href="#">博客</a>
    <ul>
      <li><a href="">私信</a></li>
      <li><a href="">评论</a></li>
      <li><a href="">@我</a></li>
    </ul>
  </li>
  <li>
    <a href="#">博客</a>
    <ul>
      <li><a href="">博客评论</a></li>
      <li><a href="">未读提醒</a></li>
    </ul>
  </li>
  <li>
    <a href="#">邮箱</a>
    <ul>
      <li><a href="">免费邮箱</a></li>
      <li><a href="">VIP邮箱</a></li>
      <li><a href="">企业邮箱</a></li>
    </ul>
  </li>
</ul>
html
<style>
    * {margin: 0;padding: 0;}
    li {list-style-type: none;}
    a {text-decoration: none;font-size: 14px;}
    .nav > li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}
    .nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}
    .nav > li > a:hover {background-color: #eee;}
    .nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;}
    .nav ul li {border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;border-bottom: 1px solid #FECC5B;}
    .nav ul li a:hover {background-color: #FFF5DA;}
</style>
javascript
$(function () {
  // 鼠标经过
  $(".nav>li").mouseover(function () {
    // $(this) jQuery 当前元素  this不要加引号
    // show() 显示元素  hide() 隐藏元素
    $(this).children("ul").show();
  });

  // 鼠标离开
  $(".nav>li").mouseout(function () {
    $(this).children("ul").hide();
  });
});

排他思想 ​

当鼠标点击指定的按钮上面时，设置元素背景为粉色

html
<button>按钮 1</button>
<button>按钮 2</button>
<button>按钮 3</button>
<button>按钮 4</button>
<button>按钮 5</button>
<button>按钮 6</button>
<button>按钮 7</button>
js
$(function () {
  // 1. 隐式迭代 给所有的按钮都绑定了点击事件
  $("button").click(function () {
    // 2. 当前的元素变化背景颜色
    $(this).css("background", "pink");
    // 3. 其余的兄弟去掉背景颜色 隐式迭代
    $(this).siblings("button").css("background", "");
  });
});

链式调用 ​

链式调用可以简化元素的连续调用

html
<button>按钮 1</button>
<button>按钮 2</button>
<button>按钮 3</button>
<button>按钮 4</button>
<button>按钮 5</button>
<button>按钮 6</button>
<button>按钮 7</button>
javascript
$(function () {
  // 隐式迭代 给所有的按钮都绑定了点击事件
  $("button").click(function () {
    // 链式编程
    $(this).css("color", "red").siblings().css("color", "");
  });
});