正心全栈编程-文档站

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", "");
    });
})