标签：jQuery function 精通 匹配 入门 元素 li var

01、jQuery简介

1、jQuery初始

What?

• jQuery官网：http://jquery.com/

• jQuery API文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

• 一个优秀的 JS 函数库

• 使用了jQuery的网站超过 90%

• 中大型 WEB 项目开发首选

• Write Less，Do More！！！

Why?

• HTML 元素选取（选择器）

• HTML 元素操作

• CSS 操作

• HTML 事件处理

• JS 动画效果

• 链式调用 a().b().c()...

• 读写合一

• 浏览器兼容

• 易扩展插件

• ajax 封装

How?

1. 引入jQuery库

<!-- 引入jQuery -->
<!--服务器本地库-->
<script src="js/jquery-3.6.0.js"></script>
<!--CDN远程库-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->

2. 使用jQuery

• jQuery核心函数：$/jQuery

• jQuery核心对象：执行$()返回的对象

// 绑定文档加载完成的监听
$(function () {
    // 绑定监听事件
    var $btn02 = $("#btn02");
    $btn02.click(function () {
        var username = $("#username").val();
        username && alert(username);
    });
})

区别 2 种 JS 库文件

• 开发版（测试版）

• 生产版（压缩版）

区别 2 种引用 JS 库的方式

• 服务器本地库

• CDN远程库

• 项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担

• https://www.bootcdn.cn/：搜索jQuery，复制<script>标签到项目中即可使用

区别jQuery的不同版本

• 1.x

• 兼容老版本 IE

• 文件更大

• 2.x

• 部分 IE8 及以下支持

• 文件小，执行效率更高

• 3.x

• 完全不再支持 IE8 及以下版本

• 提供了一些新的 API

• 提供不包含 ajax / 动画 API 的版本

2、jQuery 的 2 把利器

// jQuery核心代码
(function(window){
    var jQuery = function(){
        return new jQuery.fn.init();
    }
    window.$ = window.jQuery = jQuery
})(window)

jQuery 核心函数

简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后，直接使用即可

• 当函数用：$(xxx)

• 当对象用：$.xxx()

// jQuery函数：直接可用
console.log($, typeof $);  // ƒ ( selector, context ) {}    function
console.log(jQuery === $); // true

jQuery 核心对象

简称：jQuery对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

使用jQuery对象：$obj.xxx()

// jQuery对象：执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true

3、jQuery 函数的使用

作为一般函数调用：$(param)

1. 参数为函数：当 DOM 加载完成后，执行此回调函数

2. 参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象

3. 参数为 DOM 对象：将 dom 对象封装成jQuery对象

4. 参数为 html 标签字符串（用得少）：创建标签对象并封装成jQuery对象

作为对象使用：$.xxx()

• $.each()：隐式遍历数组

• $.trim()：去除两端的空格

// 需求1.点击按钮：显示按钮的文本，显示一个新的输入框
// 1、参数为函数：当 DOM 加载完成后，执行此回调函数
$(function () { // 绑定文档加藏完成的监听
    // 2、参数为选择器字符：查找所有匹配的标签并将它们封装成`jQuery`对象
    $("#btn").click(function () {
        // alert(this.innerHTML); // this是什么？发生事件的dom元素（<button>）
        // 3、参数为 DOM 对象：将 dom 对象封装成`jQuery`对象
        alert($(this).html());
        // 4、参数为 html 标签字符串（用得少）：创建标签对象并封装成`jQuery`对象
        $('<input type="text" name="msg3"><br/>').appendTo("div");
    });

    // 需求2.遍历输出数组中所有元素值
    var arr = [3, 7, 4];
    $.each(arr, function (index, item) {
        console.log(index, item); // 0 3    1 7    2 4
    });

    // 需求3.去掉“my atguigu”两端的空格
    var str = "    my atguigu   ";
    console.log('===' + str + '===');           // ===    my atguigu   ===
    console.log('===' + str.trim() + '===');    // ===my atguigu===
    console.log('===' + $.trim(str) + '===');   // ===my atguigu===
})

4、jQuery 对象的使用

理解

即执行jQuery核心函数返回的对象

jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）

jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom

属性和方法

• 基本行为：操作标签的基本方法

• 属性：操作内部标签的属性或值

• CSS：操作标签的样式

• 文档：对标签进行增删改操作

• 筛选：根据指定的规则过滤内部的标签

• 事件：处理事件监听相关

• 效果：实现一些动画效果

这里我们先学习jQuery对象的基本行为，其他的不放在当前章节中

基本行为

• size()/length：包含的 DOM 元素个数

• [index]/get(index)：得到对应位置的 DOM 元素

• each()：遍历包含的所有 DOM 元素

• index()：得到在所在兄弟元素中的下标

// 需求1.统计一共有多少个按钮
// `size()`/`length`：包含的 DOM 元素个数
var $buttons = $('button');
console.log($buttons.length); // 4

// 需求2.取出第2个button的文本
console.log($('button:nth-child(2)').text()); // 测试二
// `[index]`/`get(index)`：得到对应位置的 DOM 元素
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML); // 测试二 测试二

// 需求3.输出所有button标签的文本
// `each()`：遍历包含的所有 DOM 元素
// $buttons.each(function (index, domEle) {
//     console.log(index, domEle.innerHTML); // 0 "测试一"   1 "测试二"   2 "测试三"    3 "测试四"
// });
$buttons.each(function () {
    console.log(this.innerHTML); // 测试一 测试二 测试三 测试四
});

// 需求4.输出’测试三’按钮是所有按钮中的第几个
console.log($("#btn3").index()); // 2

伪数组

• Object对象

• length属性

• 数值下标属性

• 没有数组特别的方法：forEach()，push()，pop()，splice()

// 伪数组
console.log($buttons instanceof Array); // false
//自定义一个伪数组
var weiArr = {}
weiArr.length = 0;
weiArr[0] = 'atguigu';
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i];
    console.log(i, obj); // 0 "atguigu"    1 123
}
console.log(weiArr.forEach, $buttons.forEach); //undefined undefined

02、jQuery选择器

1、选择器

说明

选择器是jQuery学习的重中之重，也就是对jQuery核心函数的使用

• 选择器本身只是一个有特定语法规则的字符串，没有实质用处

• 它的基本语法规则使用的就是 CSS 的选择器语法，并对基进行了扩展

• 只有调用$()，并将选择器作为参数传入才能起作用

• $(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组（伪数组），并封装成jQuery对象

分类

基本选择器

• ID 选择器：#id

• 标签选择器：element

• 属性选择器：.class

• 通用选择器：*

• 并集选择器：selector1,selector2,selectorN

• 交集选择器：selector1selector2selectorN

层次选择器

• 后代元素选择器：ancestor descendant

• 子元素选择器：parent > child

• 兄弟选择器：prev + next、prev ~ siblings

过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器

选择器语法中大部分是过滤选择器

• 基本

• 内容

• 可见性

• 属性

表单选择器

• 表单

• 表单对象属性

下面，我们对其中 常用的选择器 进行一一学习

2、基本选择器

基本选择器	描述
#id	根据给定的ID匹配一个元素
element	根据给定的元素名匹配所有元素
.class	根据给定的类匹配元素
*	匹配所有元素
selector1,selector2,selectorN	将每一个选择器匹配到的元素合并后一起返回

HTML 代码

<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB(title="hello")</li>
    <li class="box">CCCCC(class="box")</li>
    <li title="hello">DDDDDD(title="hello")</li>
</ul>

ID 选择器

// 1.选择id为div1的元素
$('#div1').css('background-color', 'red');

标签选择器

// 2.选择所有的div元素
$('div').css('background-color', 'red');

属性选择器

// 3.选择所有class属性为box的元素
$('.box').css('background-color', 'red');

并集选择器

// 4.选择所有的div和span元素
$('div,span').css('background-color', 'red');

交集选择器

// 5.选择所有class属性为box的div元素
$('div.box').css('background-color', 'red');

通用选择器

// 6.选择所有元素
$('*').css('background-color', 'red');

3、层级选择器

查找子元素，后代元素，兄弟元素的选择器

层级选择器	描述
ancestor descendant	在给定的祖先元素下匹配所有的后代元素
parent > child	在给定的父元素下匹配所有的子元素
prev + next	匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings	匹配 prev 元素之后的所有 siblings 元素

HTML 代码

<ul>
    <li>AAAAA</li>
    <li class="box">CCCCC</li>
    <li title="hello"><span>BBBBB</span></li>
    <li title="hello"><span class="box">DDDD</span></li>
    <span>EEEEE</span>
</ul>

后代元素选择器

// 1.选中ul下所有的span
$('ul span').css('background', 'red');

子元素选择器

// 2.选中ul下所有的子元素span
$('ul > span').css('background', 'red');

兄弟选择器

// 3.选中class为box的下一个li
$('.box + li').css('background', 'red');

// 4.选中ul下li的class为box的元素后面的所有兄弟元素
$('ul .box ~ *').css('background', 'red');

4、过滤选择器

在原有选择器匹配的元素中进行进一步过滤的选择器

分类	过滤选择器	描述
基本	:first	获取第一个元素
	:last	获取最后一个元素
	:eq(index)	匹配一个给定索引值的元素
	:gt(index)	匹配所有大于给定索引值的元素
	:lt(index)	匹配所有小于给定索引值的元素
	:even	匹配所有索引值为偶数的元素，从 0 开始计数
	:odd	匹配所有索引值为奇数的元素，从 0 开始计数
	:not(selector)	去除所有与给定选择器匹配的元素
内容	:contains(text)	匹配包含给定文本的元素
	:has(selector)	匹配含有选择器所匹配的元素的元素
	:empty	匹配所有不包含子元素或者文本的空元素
	:parent	匹配含有子元素或者文本的元素
可见性	:hidden	匹配所有不可见元素，或者type为hidden的元素
	:visible	匹配所有的可见元素
属性	[attribute]	匹配包含给定属性的元素
	[attribute=value]	匹配给定的属性是某个特定值的元素
	[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素
	[attribute*=value]	匹配给定的属性是以包含某些值的元素
	[selector1][selector2][selectorN]	复合属性选择器，需要同时满足多个条件时使用

HTML 代码

<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDDD</li>
    <li title="two">BBBBB</li>
    <li style="display: none">我本来是隐藏的</li>
</ul>

:first

// 1.选择第一个div
$('div:first').css('background', 'red');

:last

// 2.选择最后一个class为box的元素
$('.box:last').css('background', 'red');

:not

// 3.选择所有class属性不为box的div
$('div:not(.box)').css('background', 'red');

:eq、:gt、:lt

多个选择器是依次执行的，不是同时执行的

// 4.选择第二个和第三个li元素
// $('li:eq(1),li:eq(2)').css('background', 'red');
// $('li:gt(0):lt(2)').css('background', 'red');
$('li:lt(3):gt(0)').css('background', 'red');

:contains

// 5.选择内容为BBBBB的li
$('li:contains("BBBBB")').css('background', 'red');

:hidden

// 6.选择隐藏的li
$('li:hidden').show().css('background', 'red');

[attribute]

// 7.送择有title属性的li元素
$('li[title]').css('background', 'red');

[attribute=value]

// 8.选择所有属性title为hello的li元素
$('li[title=hello]').css('background', 'red');

:odd

$('#data tbody > tr:odd').css('backgroundColor', '#ccf');

5、表单选择器

表单和表单对象属性

表单选择器	描述
:input	匹配所有 input, textarea, select 和 button 元素
:text	匹配所有的单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:reset	匹配所有重置按钮
:button	匹配所有按钮
表单对象属性	描述
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected	匹配所有选中的option元素

HTML代码

<form>
    用户名：<input type="text"/><br>
    密码：<input type="password"/><br>
    爱好：
    <input type="checkbox" checked="checked"/>篮球
    <input type="checkbox" checked="checked"/>足球
    <input type="checkbox" checked="checked"/>羽毛球<br>
    性别：
    <input type="radio" name="sex" value='male'/>男
    <input type="radio" name="sex" value='female'/>女<br>
    邮箱：<input type="text" name="email" disabled="disabled"/><br>
    所在地：I
    <select>
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">河北</option>
    </select><br>
    <input type="submit" value="提交"/>
</form>

:text、:disabled

// 1.选择不可用的文本输入框
$(':text:disabled').css('background-color', 'red');

:submit、:checkbox、:checked

// 3.显示选择的城市名称
$(':submit').click(function () {
    alert($('select>option:selected').html());
});

03、jQuery工具、属性、CSS

1、jQuery工具方法

不过，我们常用的工具方法并不多

工具方法	描述
$.each(object,[callback])	通用例遍方法，可用于例遍对象和数组
$.type(obj)	检测obj的数据类型
$.isArray(obj)	测试对象是否为数组
$.isFunction(obj)	测试对象是否为函数
$.isNumeric(value)	测试对象是否为数字
$.parseJSON(json)	接受一个JSON字符串，返回解析后的对象

$.each()

// 1、$.each()：遍历数组或对象中的数据
var obj = {
    name: 'Tom',
    setName: function (name) {
        this.name = name;
    }
}
$.each(obj, function (key, value) {
    console.log(key, value); // name Tom   setName ƒ (name) {}
});

$.trim()

// 2、$.trim()：去除字符两边的空格
var str = '    ddd ';
console.log($.trim(str)); // ddd

$.type()

// 3、$.type(obj)：得到数据的类型
console.log($.type($), $.type($())); // function object

$.isArray()

// 4、$.isArray(obj)：判断是否是数组
console.log($.isArray($('body')), $.isArray([])); // false true

$.isFunction()

// 5、$.isFunction(obj)：判断是否是函数
console.log($.isFunction($), $.isFunction($())); // true false

$.isNumberic()

// 6、$.isNumberic(obj)：判断是否是数字
console.log($.isNumeric('a'), $.isNumeric('2'), $.isNumeric(2)); // false true true

$.parseJSON()

// 7、$.parseJSON(json)：解析json字符转换为js对象/数组
var jsonObj = '{"name":"Tom", "age": 18}';
console.log($.parseJSON(jsonObj)); // {name: "Tom", age: 18}
var jsonArr = '[{"name":"Tom", "age": 18}, {"name":"Jack", "age": 28}]';
console.log($.parseJSON(jsonArr)); // (2) [{…}, {…}]

2、练习：多Tab点击切换

HTML 代码

<ul id="tab">
    <li id="tab1" value="1">10元套餐</li>
    <li id="tab2" value="2">30元套餐</li>
    <li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
    <div id="content1">
        10元套餐详情：<br> 每月套餐内拨打100分钟，超出部分2毛/分钟
    </div>
    <div id="content2" style="display:none">
        30元套餐详情：<br> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
    </div>
    <div id="content3" style="display:none">
        50元包月详情：<br> 每月无限量随心打
    </div>
</div>

jQuery 代码

var $containers = $('#container>div');
var curIndex = 0;
$('#tab>li').click(function () { // 隐式遍历
    // 隐藏上一次
    $containers[curIndex].style.display = 'none';
    // 显示当前的
    curIndex = $(this).index();
    $containers[curIndex].style.display = 'block';
});

3、jQuery操作属性

属性	描述
attr()	设置或返回被选元素的属性值
removeAttr()	从每一个匹配的元素中删除一个属性
prop()	获取在匹配的元素集中的第一个元素的属性值
removeProp()	用来删除由.prop()方法设置的属性集
addClass()	为每个匹配的元素添加指定的类名
removeClass()	从所有匹配的元素中删除全部或者指定的类
toggleClass()	如果存在（不存在）就删除（添加）一个类
html()	取得第一个匹配元素的html内容
text()	取得所有匹配元素的内容
val()	获得匹配元素的当前值

attr()、removeAttr()

//1.读取第一个div的title属性
console.log($('div:first').attr('title')); // one
//2.给所有的div设置name属性（value 为atguigu）
$('div').attr('name', 'atguigu');
//3.移除所有div的title属性
$('div').removeAttr('title');
//4.给所有的div设置class='guiguClass'
$('div').attr('class', 'guiguClass');

addClass()、removeClass()

//5.给所有的div添加class='abc'
$('div').addClass('abc');
//6.移除所有div的guiguClass的class
$('div').removeClass('guiguClass');

html()、val()

//7.得到最后一个li的标签体文本
console.log($('ul>li:last').html()); // <span>BBBBB</span>
//8.设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$('ul>li:first').html('<h1>mmmmmmmmm</h1>');
//9.得到输入框中的value值
console.log($(':text').val()); // guiguClass
//10.将输入框的值设置为atguigu
$(':text').val('atguigu');

prop()、removeProp()

//11.点击’全选’按留实现全选
var $checkbox = $(':checkbox');
$('button:first').click(function () {
    $checkbox.prop('checked', true);
});
//12.点击’全不选’按留实现全不选
$('button:last').click(function () {
    $checkbox.prop("checked", false);
});

attr()：操作属性值为非布尔值的属性件
prop()：专门操作属性值为布尔值的属性

4、jQuery操作CSS

CSS	描述
css()	访问匹配元素的样式属性
offset()	获取匹配元素在当前视口的相对偏移
position()	获取匹配元素相对父元素的偏移
scrollTop()	获取匹配元素相对滚动条顶部的偏移
scrollLeft()	获取匹配元素相对滚动条左侧的偏移
height()	取得匹配元素当前计算的高度值（px）
width()	取得第一个匹配元素当前计算的宽度值（px）
innerHeight()	获取第一个匹配元素内部区域高度（包括补白、不包括边框）
innerWidth()	获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
outerHeight()	获取第一个匹配元素外部高度（默认包括补白和边框）
outerWidth()	获取第一个匹配元素外部宽度（默认包括补白和边框）

css()

// 1.得到第一个p标签的颜色
console.log($('p:first').css('color')); // rgb(0, 0, 255);
// 2.设置所有p标签的文本颜色为red
$('p').css('color', 'red');
// 3.设第2个p的字体颜色（#ffee11），背景（blue），宽（300px），高（30px）
$('p:eq(1)').css({
    color: '#ffee11',
    backgroundColor: 'blue',
    width: 300,
    height: 30
});

offset和position

// 1.点击btn1
$('#btn1').click(function () {
    // 打印div1相对于页面左上角的位置
    var offset1 = $('.div1').offset();
    console.log(offset1.left, offset1.top); // 10 20
    // 打印div2相对于页面左上角的位置
    var offset2 = $('.div2').offset();
    console.log(offset2.left, offset2.top); // 10 70

    // 打印div1相对于父元素左上角的位置
    var position1 = $('.div1').position();
    console.log(position1.left, position1.top); // 10 20
    // 打印div2相对于父元素左上角的位置
    var position2 = $('.div2').position();
    console.log(position2.left, position2.top); // 0 50
});

// 2.点击btn2
$('#btn2').click(function () {
    // 设置div2相对于页面的左上角的位置
    $('.div2').offset({left: 0, top: 0});
});

scrollTop和scrollLeft

// 1.得到div或页面滚动条的坐标
$('#btn1').click(function () {
    console.log($('div').scrollTop()); // 400
    console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()); // 200
});
// 2.让div或页面的滚动条滚动到指定位置
$('#btn2').click(function () {
    $('div').scrollTop(1000);
    $('html,body').scrollTop(100);
});

元素的尺寸

1.内容尺寸

• height()：height

• width()：width

2.内部尺寸

• innerHeight()：height + padding

• innerwidth()：width + padding

3.外部尺寸

• outerHeight(false/true)：height + padding + border 如果是true，加上margin

• outerwidth(false/true)：width + padding + border 如果是true，加上margin

var $div = $('div');
console.log($div.height(), $div.width()); // 150, 100
console.log($div.innerHeight(), $div.innerWidth()); // 170 120
console.log($div.outerHeight(), $div.outerWidth()); // 190 140
console.log($div.outerHeight(true), $div.outerWidth(true)); // 210 160

04、jQuery对象的过滤与查找

1、对象的过滤

过滤方法	描述
eq()	获取第N个元素
first()	获取第一个元素
last()	获取最后一个元素
hasClass()	检查当前的元素是否含有某个特定的类，如果有，则返回true
filter()	筛选出与指定表达式匹配的元素集合
not()	删除与指定表达式匹配的元素
is()	根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
has()	保留包含特定后代的元素，去掉那些不含有指定后代的元素

first()

var $li = $('ul>li');
// 1.ul下li标签第一个
// $li[0].style.backgroundColor = 'red';
$li.first().css('background-color', 'red');

last()

// 2.ul下li标签的最后一个
// $li[$li.length - 1].style.backgroundColor = 'red';
$li.last().css('background-color', 'red');

eq()

// 3.ul下li标签的第二个
// $li[1].style.backgroundColor = 'red';
$li.eq(1).css('background-color', 'red');

filter()

// 4.ul下li标签中title属性为hello的
$li.filter('[title=hello]').css('background-color', 'red');

not()

// 5.ul下li标签中title属性不为hello的
// $li.filter('[title!=hello]').css('background-color', 'red');
$li.not('[title=hello]').css('background-color', 'red');

但上述的写法，将没有 title 属性的 li 元素也查询了出来，更符合题意的写法如下：

// $li.filter('[title]').filter('[title!=hello]').css('background-color', 'red');
// $li.filter('[title!=hello]').filter('[title]').css('background-color', 'red');
$li.filter('[title][title!=hello]').css('background-color', 'red');

has()

// 6.ul下li标签中有span子标签的
$li.has('span').css('background-color', 'red');

hasClass()、is()

// 7.ul下li标签中class属性为box2的
// if ($li.filter('[class=box2]').hasClass('box2')) {
//     $li.filter('[class=box2]').css('background-color', 'red');
// }
if ($li.filter('[class=box2]').is('.box2')) {
    $li.filter('[class=box2]').css('background-color', 'red');
}

2、对象的查找

查找方法	描述
children()	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
find()	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
siblings()	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
next()	取得一个包含匹配的元素集合中每一个元素紧邻的后一个同辈元素的元素集合
nextAll()	查找当前元素之后所有的同辈元素
nextUntil()	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
prev()	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll()	查找当前元素之前所有的同辈元素
prevUntil()	查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent()	返回第一个匹配元素用于定位的父节点
parent()	取得一个包含着所有匹配元素的唯一父元素的元素集合
parentsUntil()	查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

children()

var $ul = $('ul');
// 1.ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background-color', 'red');

find()

// 2.ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background-color', 'red');

parent()、offsetParent()

// 3.ul标签的父标签
$ul.parent().css('background-color', 'red');

// 3.ul标签的定位父标签
$ul.offsetParent().css('background-color', 'red');

prev()、prevAll()、next()、nextAll()

// 4.id为cc的li标签的前一个li标签
$('#cc').prev('li').css('background-color', 'red');

// 4.id为cc的li标签的前面所有li标签
$('#cc').prevAll('li').css('background-color', 'red');

// 4.id为cc的li标签的后一个li标签
$('#cc').next('li').css('background-color', 'red');

// 4.id为cc的li标签的后面所有li标签
$('#cc').nextAll('li').css('background-color', 'red');

siblings()

// 6.id为cc的li标签的所有兄弟li标签
$('#cc').siblings('li').css('background-color', 'red');

练习：爱好选择器

HTML 代码

<form>
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反选"/>
    <input type="button" id="sendBtn" value="提交"/>
</form>

jQuery 代码

var $checkedAllBox = $('#checkedAllBox'); // ID选择器
var $items = $(':checkbox[name=items]'); // 表单选择器、过滤选择器、交集选择器
// 1.点击'全选'：选中所有爱好
var $checkedAllBtn = $('#checkedAllBtn');
$checkedAllBtn.click(function () { // click函数
    $items.prop('checked', true); // prop操作属性
    $checkedAllBox.prop('checked', true);
});

// 2.点击'全不选'：所有爱好都不勾选
var $checkedNoBtn = $('#checkedNoBtn');
$checkedNoBtn.click(function () {
    $items.prop('checked', false);
    $checkedAllBox.prop('checked', false);
});

// 3.点击'反选'：改变所有爱好的匀选状态
var $checkedRevBtn = $('#checkedRevBtn');
$checkedRevBtn.click(function () {
    $items.each(function () { // each函数
        this.checked = !this.checked;
    });
    $checkedAllBox.prop('checked', $items.not(':checked').length === 0); // not过滤方法
});

// 4.点击'提交'：提示所有勾送的爱好
var $sendBtn = $('#sendBtn');
$sendBtn.click(function () {
    var arr = [];
    $items.filter(':checked').each(function () { // filter过滤方法
        arr.push(this.value); // 数组push方法
    });
    alert(arr.join(',')); // 数组join方法
});

// 5.点击'全选/全不选'：选中所有爱好，或者全不选中
var $checkedAllBox = $('#checkedAllBox');
$checkedAllBox.click(function () {
    $items.prop('checked', this.checked);
});

// 6.点击某个爱好时，必要时更新'全选/全不选'的选中状态
$items.click(function () {
    $checkedAllBox.prop('checked', $items.not(':checked').length === 0);
});

05、jQuery文档、事件、动画

1、文档处理-增删改

	文档处理方法	描述
内部插入	append()	向每个匹配的元素内部追加内容
	appendTo()	把所有匹配的元素追加到另一个指定的元素元素集合中
	prepend()	向每个匹配的元素内部前置内容
	prependTo()	把所有匹配的元素前置到另一个、指定的元素元素集合中
外部插入	after()	在每个匹配的元素之后插入内容
	before()	在每个匹配的元素之前插入内容
	insertAfter()	把所有匹配的元素插入到另一个、指定的元素元素集合的后面
	insertBefore()	把所有匹配的元素插入到另一个、指定的元素元素集合的前面
包裹	wrap()	把所有匹配的元素用其他元素的结构化标记包裹起来
	unwrap()	这个方法将移出元素的父元素
	wrapAll()	将所有匹配的元素用单个元素包裹起来
	wrapInner()	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
替换	replaceWith()	将所有匹配的元素替换成指定的HTML或DOM元素
	replaceAll()	用匹配的元素替换掉所有 selector匹配到的元素
删除	empty()	删除匹配的元素集合中所有的子节点
	remove()	从DOM中删除所有匹配的元素
	detach()	从DOM中删除所有匹配的元素
克隆	clone()	克隆匹配的DOM元素并且选中这些克隆的副本

append、appendTo

// 1.向id为ul1的ul下添加一个span（最后）
// $('#ul1').append('<span>append添加的span</span>');
$('<span>appendTo添加的span</span>').appendTo($('#ul1'));

prepend、prependTo

// 2.向id为ul1的ul下添加一个span（最前）
// $('#ul1').prepend('<span>prepend添加的span</span>');
$('<span>prependTo添加的span</span>').prependTo($('#ul1'));

before、insertBefore

// 3.在id为ul1的ul下的li（title为hello）的前面添加span
// $('#ul1').children('li[title=hello]').before('<span>before添加的span</span>');
$('<span>insertBefore添加的span</span>').insertBefore($('#ul1').children('li[title=hello]'));

after、insertAfter

// 4.在id为ul1的ul下的li（title为hello）的后面添加span
// $('#ul1').children('li[title=hello]').after('<span>after添加的span</span>');
$('<span>insertAfter添加的span</span>').insertAfter($('#ul1').children('li[title=hello]'));

replaceWith、replaceAll

// 5.将id为ul2的ul下的li（title为hello）全部替换为p
// $('#ul2').children('li[title=hello]').replaceWith('<p>replaceWith替换的p</p>');
$('<p>replaceWith替换的p</p>').replaceAll($('#ul2').children('li[title=hello]'));

empty、remove、detach

// 6.移除id为ul2的ul下的所有li
$('#ul2').children('li').empty(); // ul2下li的内容被清空

// $('#ul2').empty(); // 所有子元素均被删除
// $('#ul2>*').remove(); // 所有子元素均被删除
// $('#ul2').children('li').remove();
$('#ul2').children('li').detach();

练习：添加删除员工

HTML 代码

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th> </th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>[email protected]</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>[email protected]</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>[email protected]</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>

jQuery 代码

// 添加
$('#addEmpButton').click(function () {
    // 获取输入
    var $empName = $('#empName');
    var $email = $('#email');
    var $salary = $('#salary');
    var empName = $empName.val();
    var email = $email.val();
    var salary = $salary.val();
    // 插入输入
    $('<tr></tr>')
        .append('<td>' + empName + '</td>')
        .append('<td>' + email + '</td>')
        .append('<td>' + salary + '</td>')
        .append('<td><a href="deleteEmp?id=' + Date.now() + '">Delete</a></td>')
        .appendTo($('#employeeTable').children('tbody')); // 插入到默认生成的tbody下
    // 清除输入
    $empName.val('');
    $email.val('');
    $salary.val('');
});

// 删除
// 使用事件委派，这样即使是后续添加的元素也会被绑定对应的事件
// 否则，就需要在新增元素时手动添加单击事件，比较麻烦。下面会学到事件代理/委派/委托相关知识
$('#employeeTable').delegate('a', "click", function () { 
    var $tr = $(this).parent().parent();
    var name = $tr.children(':first').html();
    if (confirm('确定删除' + name + '的相关信息吗？')) {
        $tr.remove();
    }
    return false;
});

效果

2、事件处理

	事件方法	描述
页面载入	ready()	当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
事件处理	on()	在选择元素上绑定一个或多个事件的事件处理函数
	off()	在选择元素上移除一个或多个事件的事件处理函数
	bind()	为每个匹配元素的特定事件绑定事件处理函数
	unbind()	bind()的反向操作，从每一个匹配的元素中删除绑定的事件
	one()	为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
	trigger()	在每一个匹配的元素上触发某类事件
	triggerHandler()	这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
事件委派	delegate()	指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
	undelegate()	删除由 delegate() 方法添加的一个或多个事件处理程序
事件切换	hover()	一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
	toggle()	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
事件	focus()、focusin()	当元素获得焦点时，触发 focus、focusin 事件
	blur()、focusout()	当元素失去焦点时，触发 blur、focusout 事件
	change()	当元素的值发生改变时，会发生 change 事件
	click()	触发每一个匹配元素的click事件
	dblclick()	当双击元素时，会发生 dblclick 事件
	error()	当元素遇到错误（没有正确载入）时，发生 error 事件
	mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
	mouseup()	当在元素上放松鼠标按钮时，会发生 mouseup 事件
	mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件
	mouseleave()	当鼠标指针离开元素时，会发生 mouseleave 事件
	mouseover()	当鼠标指针位于元素上方时，会发生 mouseover 事件
	mouseout()	当鼠标指针从元素上移开时，发生 mouseout 事件
	mousemove()	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
	keypress()	当键盘或按钮被按下时，发生 keypress 事件
	keydown()	当键盘或按钮被按下时，发生 keydown 事件
	keyup()	当按钮被松开时，发生 keyup 事件
	resize()	当调整浏览器窗口的大小时，发生 resize 事件
	scroll()	当用户滚动指定的元素时，会发生 scroll 事件
	select()	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
	submit()	当提交表单时，会发生 submit 事件
	unload()	在当用户离开页面时，会发生 unload 事件

click、on、bind

// 1.给.out绑定点击监听（用两种方法绑定）
// $('.outer').click(function () {
//   alert('click outer');
// });
// $('.outer').on('click', function () {
//     alert('click outer');
// });
$('.outer').bind('click', function () {
    alert('click outer');
});

mouseenter、mouseleave、hover

// 2.给.inner绑定鼠标移入和移出的事件监听
// $('.inner')
//     .mouseenter(function () {
//         alert('mouse enter');
//     })
//     .mouseleave(function () {
//         alert('mouse leave');
//     });
$('.inner').hover(
    function () {
        alert('mouse enter');
    }, function () {
        alert('mouse leave');
    });

mouseover、mouseout

mouseover/mouseout与mouseenter/mouseleave的区别在于子元素

• mouseover/mouseout进入和离开子元素会再次触发

• mouseenter/mouseleave进入和离开子元素不会再次触发

$('.outer')
    .bind('mouseover', function () {
    console.log('mouse over');
})
    .bind('mouseout', function () {
    console.log('mouse out');
});

off、unbind

// 3.点击btn1解除.inner上的所有事件监听
$('#btn1').on('click', function () {
    // $('.inner').off();
    $('.inner').unbind();
});

// 4.点击btn2解除.inner上的mouseenter事件
$('#btn2').on('click', function () {
    // $('.inner').off('mouseenter');
    $('.inner').unbind('mouseenter');
});

额外的知识点

offsetX、offsetY、pageX、pageY、clientX、clientY

• offsetX、offsetY：相对于触发事件对象的坐标

• pageX、pageY：相对于视口的坐标

• clientX、clientY：相对于屏幕的坐标

// 5.点击btn3得到事件坐标
$('#btn3').on('click', function (event) {
    console.log('[' + event.offsetX + ', ' + event.offsetY + ']'); // [54, 8]
    console.log('[' + event.pageX + ', ' + event.pageY + ']'); // [349, 259]
    console.log('[' + event.clientX + ', ' + event.clientY + ']'); // [349, 59]
});

stopPropagation、preventDefault

// 6.点击.inner区域，外部点击监听不响应
$('.inner').on('click', function (event) {
    alert('click inner');
    event.stopPropagation(); // 停止冒泡
});

// 7.点击链接，如果当前时间是偶数不跳转
$('#test4').on('click', function (event) {
    if (Date.now() % 2 === 0) {
        event.preventDefault(); // 阻止默认行为
    }
})

3、事件委托（委派/代理）

在 *<练习：添加删除员工>* 中，我们已经使用过事件委托了。那么到底什么是事件委托呢？

事件委托

将多个子元素的事件监听委托给父辈元素处理，监听回调是加在了父辈元素上

当操作任何一个子元素时，事件会 冒泡 到父辈元素

父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素，通过这个子元素调用回调函数

事件委托的好处

• 添加新的子元素，自动有事件响应处理

• 减少事件监听的数量：n==>1

事件委托API

delegate、undelegate

• 设置事件委托：$(parentSelector).delegate(childrenSelector, eventName, callback)

• 移除事件委托：$(parentSelector).undelegate(eventName)

// 点击li背景就会变为红色
$('ul').delegate('li', 'click', function () {
    this.style.backgroundColor = 'red';
});

// 点击btn1就添加一个li
$('#btn1').on('click', function () {
    $('ul').append('<li>新增的li...</li>');
});

$('#btn2').on('click', function () {
    $('ul').undelegate('click');
});

练习：切图

HTML 代码

<div id="container">
    <div id="list">
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
    </div>
    <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

jQuery 代码

/**
 * 动画
 *
 * @param element 元素
 * @param styleName 样式名
 * @param targetValue 目标值
 * @param targetDuration 目标时长
 * @param frameCount 帧数
 */
function moveAnimation(element, styleName, targetValue, targetDuration, frameCount, callback) {
    var $element = $(element);
    // 初始值
    var initValue = parseFloat($element.css(styleName));
    // 增量值
    var incrementValue = parseFloat(targetValue) - parseFloat(initValue);
    // 帧矢量
    var frameValue = parseFloat(incrementValue) / parseFloat(frameCount); // test:30
    // 帧时长
    var frameTime = parseFloat(targetDuration) / parseFloat(frameCount); // test:10
    // 开启定时器
    clearInterval($element.frameTimer);
    $element.frameTimer = setInterval(function () {
        // 计算过程值
        var processValue = parseFloat($element.css(styleName)) + frameValue;
        $element.css(styleName, processValue);
        // 达到目标值
        if ((frameValue > 0 && processValue >= targetValue) ||
            (frameValue < 0 && processValue <= targetValue)) {
            // 停止定时器
            clearInterval($element.frameTimer);
            // 修正目标值
            $element.css(styleName, targetValue);
            // 回调函数
            callback && callback();
        }
    }, frameTime);
}

/**
 * 左偏移量动画
 * @param element
 * @param targetValue
 * @param callback
 */
function leftAnimation(element, targetValue, callback) {
    moveAnimation(element, 'left', targetValue, 200, 20, callback);
}

// 1.点击向右（左）的图标，平滑切换到下（上）一页
// 2.无限循环切换：第一页的上一页为最后页，最后一页的下一页是第一页
// 3.每隔3s自动滑动到下一页
// 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换
// 5.切换页面时，下面的圆点也同步更新
// 6.点击圆点图标切换到对应的页
var $container = $('#container');
var $list = $('#list');
var $pointsDiv = $('#pointsDiv > span');
var $prev = $('#prev');
var $next = $('#next');
var lastIndex = 1;

/**
 * 切换图片
 * @param targetIndex
 */
function switchPic(targetIndex) {
    // 防止不是数字
    targetIndex = parseInt(targetIndex);
    // 防止因点击过快造成问题
    if (targetIndex < 0 || targetIndex > 6) {
        return;
    }
    // 切换图片
    leftAnimation($list, getTargetPosition(targetIndex), function () {
        // 第0张实际上是第5张
        if (targetIndex <= 0) {
            targetIndex = 5;
            $list.css('left', getTargetPosition(targetIndex));
        }
        // 第6张实际上是第1张
        if (targetIndex >= 6) {
            targetIndex = 1;
            $list.css('left', getTargetPosition(targetIndex));
        }
        // 圆点同步更新
        $pointsDiv.filter('[index=' + lastIndex + ']').removeClass('on');
        $pointsDiv.filter('[index=' + targetIndex + ']').addClass('on');
        lastIndex = targetIndex;
    });

    /**
     * 目标位
     *
     * @param targetIndex
     * @returns {number}
     */
    function getTargetPosition(targetIndex) {
        var picWidth = $container.css('width');
        return -targetIndex * parseFloat(picWidth);
    }
}

// 自动切图
autoPic();
var timer;

function autoPic() {
    clearInterval(timer);
    timer = setInterval(function () {
        switchPic(lastIndex + 1);
    }, 3000);
}

// 悬浮切换
$container.hover(function () {
    clearInterval(timer);
}, function () {
    autoPic();
});

// 原点切图
$pointsDiv.on('click', function () {
    clearInterval(timer);
    switchPic(this.getAttribute('index'));
});

// 切上一张图
$prev.on('click', function () {
    clearInterval(timer);
    switchPic(lastIndex - 1);
});
// 切下一张图
$next.on('click', function () {
    clearInterval(timer);
    switchPic(lastIndex + 1);
});

效果

4、动画

	动画	描述
基本	show()	显示隐藏的匹配元素
	hide()	隐藏显示的元素
	toggle()	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
滑动	slideDown()	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
	slideUp()	通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
	slideToggle()	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
淡入淡出	fadeIn()	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
	fadeOut()	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
	fadeTo()	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
	fadeToggle()	通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数
自定义	animate()	用于创建自定义动画的函数
	stop()	停止所有在指定元素上正在运行的动画
	finish()	停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
	delay()	设置一个延时来推迟执行队列中之后的项目

fadeIn、fadeOut、fadeToggle

淡入淡出：不断改变元素的透明度（opacity）来实现的

• fadeIn()：带动画的显示

• fadeOut()：带动画隐藏

• fadeToggle()：带动画切英显示/隐藏

var $div1 = $('.div1');
// 1.点击btn1，缓慢淡出
//  *无参
// $('#btn1').click(function () {
//     $div1.fadeOut();
// });
//  *有参
//    *字符参数
//    *数字参数
// $('#btn1').click(function () {
//     $div1.fadeOut('slow');
// });
$('#btn1').click(function () {
    $div1.fadeOut(1000);
});
// 2.点击btn2，缓慢淡入
$('#btn2').click(function () {
    $div1.fadeIn('slow');
});
// 3.点击btn3，淡出/淡入切换，动画结束时提示“动画结束”
$('#btn3').click(function () {
    $div1.fadeToggle('slow', 'linear', function () {
        alert('动画结束');
    });
});

slideUp、slideDown、slideToggle

滑动动画：不断改变元素的高度（height）实现

• slideDown()：带动画的展开

• slideUp()：带动画的收缩

• slideToggle()：带动画的切换展开/收缩

var $div1 = $('.div1');
// 1.点击btn1，向上滑动
$('#btn1').click(function () {
    $div1.slideUp(1000);
});
// 2.点击btn3，向下滑动
$('#btn2').click(function () {
    $div1.slideDown('slow');
});
// 3.点btn3，向上/向下切换
$('#btn3').click(function () {
    $div1.slideToggle('slow', 'linear', function () {
        alert('动画结束');
    });
});

show、hide、toggle

显示隐藏，默认没有动画，动画（opacity/height/width）

• show()：（不）带动画的显示

• hide()：（不）带动画的隐藏

• toggle()：（不）带动画的切换显示/隐藏

var $div1 = $('.div1');
// 1.点击btn1，立即显示
$('#btn1').click(function () {
    $div1.show();
});
// 2.点击btn2，慢慢显示
$('#btn2').click(function () {
    $div1.show('slow');
});
// 3.点击btn3，慢慢隐藏
$('#btn3').click(function () {
    $div1.hide('slow');
});
// 4.点击btn4，切换显示/隐藏
$('#btn4').click(function () {
    $div1.toggle();
});

练习：导航栏动态显示效果

HTML 代码

<div id="navigation">
    <ul>
        <li><a href="#">首页</a></li>
        <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="#">卡其裤</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">短裤</a></li>
            </ul>
        </li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>

jQuery 代码

var $navigation = $('#navigation >ul>li:has(ul)');
$navigation.hover(function () {
    $(this).children('ul').stop().slideDown();
}, function () {
    $(this).children('ul').stop().slideUp();
});

效果

5、多库共存

问题：如果有 2 个库都有$，就存在冲突

解决：jQuery库可以释放$的使用权，让另一个库可以正常使用，此时jQuery库只能使用jQuery了

API：jQuery.noconflict()

//释放的使用衣
jQuery.noConflict();
//调用myLib中的s
$(); 
//要想使用jQuery的功能，只能使用jQuery
jQuery(function () {
    console.log('文档加载完成');
});
console.log('+++++');

6、onload与ready

区别：window.onload与$(document).ready()

window.onload

• 包括页面的图片加载完后才会回调（晚）

• 只能有 一个监听回调

$(document).ready()

• 等同于：$(function(){})

• 页面加载完就回调（早）

• 可以有 多个监听回调

// 1.直接打印img的宽度,观察其值
console.log('直接', $('#logo').width()); // 直接 0

// 2.在$(function(){})中打印img的宽度
$(function () {
    console.log('ready', $('#logo').width()); // ready 0
});

// 3.在window.onload中打印img的宽度
window.onload = function () {
    console.log('onload', $('#logo').width()); // onl oad 190
};

// 4.在img加载完成后打印宽度
$('#logo').on('load', function () {
    console.log('img load', $('#logo').width()); // img load 190
});

06、jQuery插件

插件机制	描述
jQuery.fn.extend()	扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
jQuery.extend()	扩展jQuery对象本身

1、自定义 jQuery 插件

---

my_jQuery-plugin.js

// 1.给添加4个工具方法：
//      *min(a,b)：返回较小的值
//      *max(c,d)：返回较大的值
//      *leftTrim()：去掉字符串左边的空格
//      *rightTrim()：去掉字符串右边的空格
// 2.给jQuery对象添加3个功能方法：
//      *checkAll()：全选
//      *unCheckAll()：全不选
//      *reverseCheck()：全反选

// 立即执行函数
(function () {
    // 扩展$核心函数的方法
    $.extend({
        min: function (a, b) {
            return a < b ? a : b;
        },
        max: function (c, d) {
            return c > d ? c : d;
        },
        leftTrim: function (str) {
            // var blankStr = str.match(/\s+/)[0];
            // return str.substring(blankStr.length, str.length - 1);
            return str.replace(/^\s+/, '');
        },
        rightTrim: function (str) {
            // var blankArr = str.match(/\s+/g);
            // let blankStr = blankArr[blankArr.length - 1];
            // return str.substring(0, blankStr.length);
            return str.replace(/\s+$/, '');
        }
    });
    // 扩展jQuery对象的方法
    $.fn.extend({
        checkAll: function () {
            this.prop('checked', true); // this是调用该方法的对象，所以这里是jQuery对象
        },
        unCheckAll: function () {
            this.prop('checked', false);
        },
        reverseCheck: function () {
            this.each(function () {
                this.checked = !this.checked; // 这里的this是dom对象
            })
        }
    })
})()

调用扩展方法

// 扩展jQuery的工具方法
console.log($.min(2, 4), $.max(2, 4)); // 2 4
var str = '   ddd      ';
console.log('---' + $.leftTrim(str) + '---');  // ---ddd      ---
console.log('---' + $.rightTrim(str) + '---'); // ---   ddd---

// 扩展jQuery对象的方法
let $items = $(':checkbox[name=items]');
$('#checkedAllBtn').click(function () {
    $items.checkAll();
});
$('#checkedNoBtn').click(function () {
    $items.unCheckAll();
});
$('#reverseCheckedBtn').click(function () {
    $items.reverseCheck();
});

效果

2、jQuery插件

---

• 基于 jQuery 编写的扩展库

• http://plugins.jquery.com/

validation

• https://github.com/jquery-validation/jquery-validation/releases

HTML 代码

<form action="xxx" id="myForm">
    <p>用户名（必须，最小6位）：<input id="uname" name="username" type="text" required minlength="6"></p>
    <p>密码（必须，6到8位）：<input id="pwd1" name="pwd1" type="password" required rangelength="[6,8]"></p>
    <p>确认密码（与密码相同）：<input id="pwd2" name="pwd2" type="password" required equalTo="#pwd1"></p>
    <p><input type="submit" value="注册"></p>
</form>

jQuery 代码

// 声明式验证：程序员只需要声明各种验证规则，可以自定义验证错误信息
$('#myForm').validate({
    messages: {
        username: {
            required: '用户名不能为空',
            minlength: '用户名最少6位'
        },
        pwd1: {
            required: '密码不能为空',
            rangelength: '用户名6到8位'
        },
        pwd2: {
            required: '确认密码不能为空',
            equalTo: '确认密码不相同'
        },
    }
});

效果

ui

• http://jqueryui.com/

Accordion：手风琴

HTML 代码

<!-- 1、Accordion：手风琴 -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
    <h3>First</h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h3>Second</h3>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h3>Third</h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

jQuery 代码

// 1、Accordion：手风琴
$('#accordion').accordion();

效果

Autocomplete：自动搜索匹配

Html 代码

<!-- 2、Autocomplete：自动搜索匹配 -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
    <input id="autocomplete" title="type "a"">
</div>

jQuery 代码

// 2、Autocomplete：自动搜索匹配
var availableTags = [
    "Html",
    "Css",
    "JavaScript",
    "C",
    "C++",
    "C#",
    "Java",
    "Python",
    "PHP",
    "Ruby"
];
$("#autocomplete").autocomplete({
    source: availableTags
});

效果

Tabs：选项卡

HTML 代码

<!-- 3、Tabs：选项卡 -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
    </div>
    <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis.
        Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
    </div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum
        eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
    </div>
</div>

jQuery 代码

// 3、Tabs：选项卡
$("#tabs").tabs();

效果

laydate

• http://www.layui.com/laydate/

HTML 代码

<input type="text" class="demo-input" placeholder="请选择日期" id="test1">

jQuery 代码

//执行一个laydate实例
laydate.render({
    elem: '#test1' //指定元素
});

效果

3、终极练习

---

1）鼠标移入显示，移出隐藏

目标：手机京东，客户服务，网站导航，我的京东，去购物车结算，全部商品

$('[name=show_hide]').hover(function () {
    $('#' + this.id + '_items').show();
}, function () {
    $('#' + this.id + '_items').hide();
});

2）鼠标移动切换二级导航菜单的切换显示和隐藏

var $cateItem = $('.cate_item');
$cateItem.hover(function () {
    $cateItem.children('.sub_cate_box').hide();
    $(this).children('.sub_cate_box').show();
}, function () {
    $cateItem.children('.sub_cate_box').hide();
});

3）输入搜索关键字，列表显示匹配的结果

$('#txtSearch').on('focus keyup', function () {
    if (this.value.trim()) {
        $('#search_helper').show();
    } else {
        $('#search_helper').hide();
    }
}).blur(function () {
    $('#search_helper').hide();
});

4）点击显示或者隐藏更多的分享图标

var isOpen = false;
var $shareMore = $('#shareMore');
$shareMore.click(function () {
    var $prevAll = $shareMore.prevAll('a:lt(2)');
    var $parent = $shareMore.parent();
    var $children = $shareMore.children('b');
    // 展开更多
    if (isOpen) {
        $prevAll.hide();
        $children.removeClass('backword');
        $parent.width(parseFloat($parent.width()) - 44);
    }
    // 隐藏更多
    else {
        $prevAll.show();
        $children.addClass('backword');
        $parent.width(parseFloat($parent.width()) + 44);
    }
    isOpen = !isOpen;
});

5）鼠标移入移出切换地址的显示隐藏

var $storeSelect = $('#store_select');
$storeSelect.hover(function () {
    $storeSelect.children('div:gt(0)').show();
}, function () {
    $storeSelect.children('div:gt(0)').hide();
}).children(':last').mouseenter(function () {
    this.style.cursor = 'pointer';
}).click(function () {
    $(this).parent().children('div:gt(0)').hide();
});

6）点击切换地址tab

var $storeTabs = $('#store_tabs>li');
$storeTabs.click(function () {
    var hover = $storeTabs.siblings('.hover')[0];
    if (hover !== this) {
        $(hover).removeClass('hover');
        $(this).addClass('hover');
    }
});

7）鼠标移入移出切换显示迷你购物车

let $minicart = $('#minicart');
$minicart.hover(function () {
    $minicart.addClass('minicart');
    $minicart.children('div:last').show();
}, function () {
    $minicart.removeClass('minicart');
    $minicart.children('div:last').hide();
});

8）点击切换产品选项（商品详情等显示出来）

var $main_tabs_li = $('#product_detail>.main_tabs>li');
$main_tabs_li.click(function () {
    var current = $main_tabs_li.siblings('.current')[0];
    var $this = $(this);
    var $siblings = $('#product_detail').children('div').not('#minicart');
    // 切换current
    $(current).removeClass('current');
    $this.addClass('current');
    // 切换详情
    $siblings.hide();
    $siblings.eq($this.index()).show();
});

9）点击向右/左，移动当前展示商品的小图片

var $iconList = $('#icon_list');
var LI_COUNT = $iconList.children('li').length;
var SHOW_COUNT = 5;
// 图片达到一定数量才显示相应效果
if (LI_COUNT > SHOW_COUNT) {
    var $a = $('#preview>h1>a');
    var $backward = $a.first();
    var $forward = $a.last();
    $forward.attr('class', 'forward');
    var FRAME_OFFSET = $iconList.find('li:first').width();
    var pointer = 0;
    // 下一张
    $forward.click(function () {
        // 最后一张
        if (pointer <= SHOW_COUNT - LI_COUNT) {
            return;
        }
        // 切换下一张
        pointer--;
        $iconList.css('left', pointer * FRAME_OFFSET);
        $backward.attr('class', 'backward');
        // 更新上一张按钮状态
        if (pointer <= SHOW_COUNT - LI_COUNT) {
            $forward.attr('class', 'forward_disabled');
        }
    });
    // 上一张
    $backward.click(function () {
        // 第一张
        if (pointer >= 0) {
            return;
        }
        // 切换上一张
        pointer++;
        $iconList.css('left', pointer * FRAME_OFFSET);
        $forward.attr('class', 'forward');
        // 更新下一张按钮状态
        if (pointer >= 0) {
            $backward.attr('class', 'backward_disabled');
        }
    });
}

10）当鼠标层停在某个小图上，在上方是示对应的中图

$('#icon_list>li').hover(function () {
    var $img = $(this).children('img');
    $img.addClass('hoveredThumb');
    // 显示对应中图
    var src = $img.attr('src').replace('.jpg', '-m.jpg');
    $('#mediumImg').attr('src', src);
}, function () {
    $(this).children('img').removeClass('hoveredThumb');
});

11）当鼠标在中图上移动时，显示对应大图的附近部分区域

var $maskTop = $('#maskTop');
var $mask = $('#mask');
var $largeImgContainer = $('#largeImgContainer');
var $largeImg = $('#largeImg');
var $mediumImg = $('#mediumImg');
$maskTop.hover(function () {
    var $loading = $('#loading');
    // 显示遮罩
    $mask.show();
    // 加载大图
    $loading.show(); // 大图未加载完毕时显示加载图标
    $largeImg.attr('src', $mediumImg.attr('src').replace('-m.jpg', '-l.jpg'));
    // 大图加载监听
    $largeImg.on('load', function () {
        // 显示大图
        $largeImg.show();
        // 隐藏加载图标
        $loading.hide();
        // 获取大图大小
        var LARGE_WIDTH = $largeImg.width();
        var LARGE_HEIGHT = $largeImg.height();
        // 获取中图大小
        var MASKTOP_WIDTH = $maskTop.width();
        var DESKTOP_HEIGHT = $maskTop.height();
        // 获取遮罩大小
        var MASK_WIDTH = $mask.width();
        var MASK_HEIGHT = $mask.height();
        // 计算遮罩偏移量范围
        var MAX_LEFT = MASKTOP_WIDTH - MASK_WIDTH;
        var MAX_TOP = DESKTOP_HEIGHT - MASK_HEIGHT;
        // 计算大图偏移量比例
        var SCALE_WIDTH = parseFloat(LARGE_WIDTH) / parseFloat(MASKTOP_WIDTH);
        var SCALE_HEIGHT = parseFloat(LARGE_HEIGHT) / parseFloat(DESKTOP_HEIGHT);
        // 设置大图容器尺寸
        $largeImgContainer.css({
            width: LARGE_WIDTH / SCALE_WIDTH,
            height: LARGE_HEIGHT / SCALE_WIDTH
        });
        $largeImgContainer.show();
        // 遮罩及大图位置跟随鼠标移动
        $maskTop.mousemove(function (event) {
            // 计算偏移量
            var offsetX = event.offsetX;
            var offsetY = event.offsetY;
            var left = offsetX - MASK_WIDTH / 2;
            var top = offsetY - MASK_HEIGHT / 2;
            // 偏移量范围
            if (left < 0) {
                left = 0;
            } else if (left > MAX_LEFT) {
                left = MAX_LEFT;
            }
            if (top < 0) {
                top = 0;
            } else if (top > MAX_TOP) {
                top = MAX_TOP;
            }
            // 遮罩移动
            $mask.css({
                left: left,
                top: top
            });
            // 大图移动
            $largeImg.css({
                left: -offsetX * SCALE_WIDTH,
                top: -offsetY * SCALE_HEIGHT
            });
        });
    });
}, function () {
    // 隐藏遮罩
    $mask.hide();
    // 隐藏大图
    $largeImgContainer.hide();
    $largeImg.hide();
    // 隐藏加载图标
    $loading.hide();
});

 

标签：jQuery,function,精通,匹配,入门,元素,li,var
From： https://www.cnblogs.com/zhaostudy/p/16882400.html