学习笔记:jQuery(尚硅谷)

介绍

  • 本文主要记录在学习尚硅谷的 jQuery 课程时的一些笔记
  • 尚硅谷前端学科全套课程请点击这里进行下载,提取码:afyt

一、基础知识

  • 官网地址:点击这里
  • jQuery 是一个优秀的 JS 函数库,封装了 BOM、DOM 等相关操作(CRUD)
  • 特性:HTML元素选取(选择器)、HTML元素操作、CSS操作、HTML事件处理、JS动画效果、链式调用读写合一隐式遍历(迭代)、浏览器兼容、易扩展插件、ajax封装

1.版本之间的区别

  • 1.x:兼容老版本IE、文件更大
  • 2.x:部分IE8及以下不支持,文件小,执行效率更高
  • 3.x:完全不再支持IE8及以下版本,提供了一些新的API,提供不包含ajax/动画API的版本

2.原生JS和jQuery的区别

  • 这里主要谈 window.onload$(document).ready() / $(function(){})
  • window.onload
    • 包括页面的图片加载完后才会回调(晚)
    • 只能有一个监听回调(其余的会覆盖)
  • $(document).ready()
    • 等同于: $(function(){})
    • 页面加载完就回调(早)
    • 可以有多个监听回调

3.基本操作

(1).引入 jQuery 库

  • 可选如下两种方式:

1).服务器本地库

  • 使用 <script> 标签从本地引入

2).CDN 远程库

  • 项目上线时,一般使用比较靠谱的CDN资源库,用来减轻服务器压力
  • BootCDN:查看链接

(2).使用 jQuery

  • 我们需要使用 jQuery 核心函数和 jQuery 核心对象
    • jQuery 核心函数:向外直接暴露的 $/jQuery
    • jQuery 核心对象:执行jQuery函数返回的对象,我们一般在对象名前加 $ 符号来标明
  • 案例文本请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

二、核心函数

1.使用方式

(1).作为一般函数调用

  • 语法:$(param)
  • 参数为函数:当DOM加载完成后,执行此回调函数(文档加载完成的监听)
  • 参数为选择器字符串: 查找所有匹配的标签,并将它们封装成jQuery对象
  • 参数为DOM对象: 将dom对象封装成jQuery对象
  • 参数为html标签字符串(用得少): 创建标签对象并封装成jQuery对象

(2).作为对象使用

  • 语法:$.xxx()
  • $.each(): 隐式遍历对象/数组
  • $.trim(): 去除两端的空格

2.选择器

  • 选择器本身只是一个有特定语法规则的字符串,没有实质用处
  • 它的基本语法规则使用的就是CSS的选择器语法,并对其进行了扩展
  • 只有调用$(), 并将选择器作为参数传入才能起作用
  • $(selector)作用:根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回

(1).基本选择器

  • #id:id选择器

  • element:元素选择器

  • .class:属性选择器

  • *:任意标签

  • selector1,selector2,selectorN:取多个选择器的并集(组合选择器)

  • selector1selector2selectorN:取多个选择器的交集(相交选择器)

(2).层次选择器

  • ancestor descendant:在给定的祖先元素下匹配所有的后代元素
  • parent>child:在给定的父元素下匹配所有的子元素
  • prev+next:匹配所有紧接在 prev 元素后的 next 元素
  • prev~siblings:匹配 prev 元素之后的所有 siblings 元素

(3).过滤选择器

  • 在原有选择器匹配的元素中进一步进行过滤的选择器
  • 多个过滤选择器不是同时执行的,而是依次过滤的

a).基本

  • :first:获取匹配的第一个元素
  • :last:获取匹配的最后一个元素
  • :not(selector):去除所有与给定选择器匹配的元素
  • :lt/gt(index):匹配所有小于/大于给定索引值的元素

b).内容

  • :contains(text):匹配包含给定文本的元素

c).可见性

  • :hidden:匹配所有不可见元素,或者type为hidden的元素

d).属性

  • [attribute]:匹配包含给定属性的元素
  • [attribute=value]:匹配给定的属性是某个特定值的元素

(4).表单选择器

a).表单

  • :input:匹配所有 input, textarea, select 和 button 元素
  • :text:匹配所有的单行文本框
  • :checkbox:匹配所有复选框
  • :submit:匹配所有提交按钮

b).表单对象属性

  • :enabled:匹配所有可用元素
  • :disabled:匹配所有不可用元素
  • :checked:匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
  • :selected:匹配所有选中的option元素

3.工具

  • $.each():遍历数组或对象中的数据
  • $.trim():去除字符串两边的空格
  • $.type(obj):得到数据的类型
  • $.isarray(obj):判断是否是数组
  • $.isFunction(obj):判断是否是函数
  • $.parseJSON(json): 解析json字符串转换为js对象/数组

三、核心对象

  • 即执行 jQuery 核心函数返回的对象
  • jQuery 对象内部包含的是 DOM元素对象的伪数组(可能只有一个元素)
  • jQuery 对象拥有很多有用的属性和方法,让程序员能方便的操作 DOM
  • 特点:
    • 链式调用:调用 jQuery 对象的任何方法后返回的还是当前 jQuery 对象
    • 读写合一:读内部第一个 dom 元素、写内部所有的 dom 元素

0.伪数组

  • 是一个Object对象
  • 有length属性、数值下标属性
  • 没有数组特别的方法:forEach()、push()、pop()、splice()
  • 自定义伪数组如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let weiArr = {};
    weiArr.length = 0;
    weiArr[0] = 'wrysmile';
    weiArr.length = 1;
    weiArr[1] = 980378775;
    weiArr.length = 2;
    for(let i = 0; i < weiArr.length; i++){
    let obj = weiArr[i];
    console.log(i,obj);
    }

1.基本行为

  • size()/length: 包含的 DOM 元素个数(注意:size()在jQuery1.8已废弃)
  • [index]/get(index): 得到对应位置的DOM元素
  • each(): 遍历包含的所有DOM元素
  • index(): 得到在所在兄弟元素中的下标

2.属性

(1).操作任意属性

  • attr():设置或返回被选元素的属性值
  • removeAttr():从每一个匹配的元素中删除一个属性
  • prop():获取在匹配的元素集中的第一个元素的属性值

引申:attr和prop的区别

  • attr() 操作属性值为非布尔值的属性
  • prop() 操作属性值为布尔值的属性,如 checked, selected 或者 disabled

(2).操作class属性

  • addClass():为每个匹配的元素添加指定的类名
  • removeClass():从所有匹配的元素中删除全部或者指定的类

(3).操作HTML代码/文本/值

  • html():取得第一个匹配元素的html内容
  • val():获得匹配元素的当前值

3.CSS

(1).读取/设置css样式

  • css():设置css样式/读取css值
  • 设置多个样式时,应当封装为一个对象
  • 注意:当设置CSS样式中的宽高时,可以不写 px 单位

(2).读取/设置标签的位置

  • offset():相对页面左上角的坐标
  • position():相对于父元素左上角的坐标
  • scrollTop():获取匹配元素相对滚动条顶部的偏移
    • 得到页面滚动条的坐标:$(document.body).scrollTop()+$(document.documentElement).scrollTop()
    • 设置滚动条的新坐标:$('body,html').scrollTop(60)
  • scrollLeft():获取匹配元素相对滚动条左侧的偏移

(3).读取/设置标签的尺寸

  • heigh()/width():只计算内容尺寸
  • innerHeight()/innerWidth():计算内部尺寸(height/width + padding)
  • outerHeight()/outerWidth():计算外部尺寸(height/width + padding + border)
  • outerHeight(true)/outerWidth(true):计算外部尺寸(height/width + padding + border + margin)

4.筛选

(1).过滤

  • 作用:在 jQuery 对象中的元素对象数组中过滤出一部分元素来,并封装成新的 jQuery 对象返回
  • 下面中前三个是通过下标来过滤,后三个是根据选择器来过滤
    • first():获取第一个元素
    • last():获取最后一个元素
    • eq(index|-index):获取第N个元素
    • filter(selector):筛选出与指定表达式匹配的元素集合
    • not(selector):删除与指定表达式匹配的元素
    • has(selector):保留包含特定后代的元素,去掉那些不含有指定后代的元素

(2).查找

  • 作用:在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
    • children():查找当前元素的子标签中符合条件的元素
    • find():查找当前元素的后代标签中符合条件的元素
    • parent():查找当前元素的父元素
    • prevAll():查找当前元素之前所有的同辈元素
    • nextAll():查找当前元素之后所有的同辈元素
    • siblings():查找当前元素前后所有的兄弟元素

5.文档

(1).添加节点

  • append(content):向当前匹配的所有元素内部的最后插入指定内容
  • prepend(content):向当前匹配的所有元素内部的最前面插入指定内容
  • before(content):将指定内容插入到当前所有匹配元素的前面
  • after(content):将指定内容插入到当前所有匹配元素的后面

(2).替换节点

  • replaceWith(content):用指定内容替换所有匹配的标签
  • replaceAll(selector):用匹配的元素替换掉所有 selector 匹配到的元素

(3).删除节点

  • empty():删除所有匹配元素的子元素
  • remove():删除所有匹配的元素

6.事件

(1).事件处理

  • on():在选择元素上绑定一个或多个事件的事件处理函数
  • off():在选择元素上移除一个或多个事件的事件处理函数
  • click():触发每一个匹配元素的click事件
  • mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件
  • mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件

(2).事件切换

  • hover():同时绑定鼠标移入和移出监听,它只需要接收两个回调函数

(3).事件委派(委托)

a).简介

  • 将多个子元素的事件监听委托给父辈元素处理,并且将监听回调加在了父辈元素上
  • 当操作任何一个子元素时,事件会冒泡到父辈元素上面去
  • 父辈元素不会直接处理事件,而是根据 event.target 得到发生事件的子元素,通过这个子元素调用事件回调函数
  • 优势:新增的元素没有事件监听、减少监听的数量

b).委派方法

  • delegate():设置事件委托,参数为(childrenSelector, eventName, callback)
  • undelegate():移除事件委托

(4).事件对象

  • event.clientX/Y:事件坐标,相对视口左上角
  • event.pageX/Y:事件坐标,相对页面左上角
  • event.offsetX/Y:事件坐标,相对元素左上角
  • event.stopPropagation():阻止事件冒泡
  • event.preventDefault():取消事件的默认行为

引申:区别 mouseover 与 mouseenter

  • mouseover: 在移入子元素时也会触发,对应 mouseout
  • mouseenter: 只在移入当前元素时才触发,对应 mouseleave
    • hover() 使用的就是 mouseenter() 和 mouseleave()

引申:区别 on(‘xxx’,fun) 与 xxx(fun)

  • 前者通用但编码麻烦
  • 后者编码简单,但有的事件没有对应的方法

7.效果

  • 以下效果都可以不传参数(代表默认值),也可以传数字、字符串、回调函数
    • 数字:动画效果时长
    • 字符串:需要传入固定字符串 —— slow、normal、fast
    • 回调函数:动画执行完毕的回调

(1).淡入淡出动画

  • 不断改变元素的透明度来实现的
  • fadeIn():实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数
  • fadeOut():实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数
  • fadeToggle():开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数

(2).上下滑动动画

  • 不断改变元素的高度来实现的
  • slideUp():动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数
  • slideDown():动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数
  • slideToggle():切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数

(3).显示隐藏动画

  • 不断改变元素的尺寸和透明度来实现
  • show():(不)带动画的显示隐藏的匹配元素
  • hide():(不)带动画的隐藏显示的元素
  • toggle():(不)带动画的切换显示/隐藏

(4).自定义动画

  • animate():自定义动画效果的动画,里面可以传一个对象用来设置动画结束时的样式,这里不需要设置单位
  • stop():停止动画

四、多库共存

  • 如果我们的项目中需要引入多个库且其中都使用到了 $ 来进行调用,就会存在冲突,导致其余库和jQuery库无法执行
  • jQuery 库中可以使用相应的 API 来释放 $ 的使用权,让另一个库可以正常使用,此时 jQuery 库就只能使用 jQuery 来进行调用了
  • jQuery.noConflict() :释放使用权

五、jQuery插件

1.扩展插件

  • 扩展jQuery的工具方法:jQuery.extend(object)

  • 扩展jQuery对象的方法:jQuery.fn.extend(object)

  • 案例:将全选、全不选、反选封装到扩展插件中供别人使用

    • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

2.jQuery插件

  • 是基于 jQuery 编写的扩展库,官方插件地址请点击 这里

(1).jquery-validation

  • 功能:是一款表单验证插件
    • 一种声明式验证:程序员只需要声明各种验证规则。可以自定义验证错误信息
  • 可参考 菜鸟教程 进行学习

!插件使用方法

  • Github下载该插件最新版(jQuery官网已不再更新该插件了,所以需要自行去Github上下载)

  • 将如下3个 js文件引入到自己的项目里

    • jquery-1.xx.x.js:jQuery的js库
    • jquery.validate.js:验证的js库
    • messages_zh.js:错误信息的中文提示库
  • 可以对照该插件的 demo 直接在标签中设置相应的属性

  • 设置好后需要调用一下该插件才可以正常运行

    1
    $('form的id').validate();
  • 也可以在以上的代码中传入一个对象,在对象中设置规则或者错误信息提示规则等

    1
    2
    3
    4
    5
    6
    7
    8
    $('#form').validate({
    messages: {
    username: {
    required: '必须的哈哈哈',
    minlength: '你不够长'
    }
    }
    });

(2).jquery UI

  • 功能:可以构建精选的用户界面交互,效果,小部件和主题等
  • 请点击这里进行相应主题的下载
  • 将如下3个 js文件引入到自己的项目里
    • jquery-1.xx.x.js:jQuery的js库
    • jquery-ui.js:该插件的js库
    • jquery-ui.css:该插件的css文件
  • 想要用哪个UI组件,就去刚刚下载的插件中去直接复制然后自行修改样式
    • 例如:Accordion为手风琴式效果,主要用来实现导航的切换
  • 然后使用 jQuery 对象调用相应方法即可

3.原生js插件

(1).layDate

  • 功能:一款被广泛使用的高级 Web 日历组件
  • 请点击这里进行下载
  • 将 layDate 下的所有文件全都复制到自己的项目中
  • laydate.js 引入到自己的项目中
  • 创建一个表单元素并给其绑定一个id
  • 使用如下语法进行调用:
    1
    2
    3
    laydate.render({
    elem: 'id选择器'
    });

六、案例分析

1.多Tab切换功能

(1).思路

a).Tab实现

  • 将Tab放入多级列表中,将Tab对应的内容放在盒子容器中
  • 使用定位使两个内容连接在一起
  • 使用 display 属性来控制内容的显示与否

b).切换Tab实现

  • 先给3个li添加点击监听
  • 隐藏当前已显示的内容
  • 显示对应内容的div,得到当前点击的li在兄弟中的下标
  • 找到对应内容的div并修改 display 属性

(2).代码

  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

2.回到顶部功能

  • 瞬间滚动到顶部只需要将 scrollTop 值设置为0即可,以下主要说的是平滑滚动到顶部

(1).思路

  • 获取到总距离、总时间、间隔时间、间隔距离等数据
  • 使用循环定时器不断滚动
  • 当到达顶部时,停止定时器

(2).代码

  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

3.爱好选择功能

(1).思路

  • 点击’全选’: 选中所有爱好,并勾选’全选/全不选’
  • 点击’全不选’: 所有爱好都不勾选,并取消勾选’全选/全不选’
  • 点击’反选’: 改变所有爱好的勾选状态,并更新’全选/全不选’的选中状态
  • 点击’全选/全不选’: 选中所有爱好, 或者全不选中
  • 点击某个爱好时,必要时更新’全选/全不选’的选中状态
  • 点击’提交’: 提示所有勾选的爱好

(2).代码

  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

4.表单的添加删除功能

(1).思路

  • 添加功能:
    • 先收集表单中需要填写的数据
    • 生成对应的<tr>标签结构,并插入到表单的的<tbody>
    • 给新添加的<tr>标签中的超链接设置点击事件,并传入删除的回调函数
    • 清除表单输入框中的内容
  • 删除功能:
    • 找到表单后代中所有的超链接元素
    • 为这些超链接元素绑定点击事件,并传入删除的回调函数
  • 删除的回调函数:
    • 使用 confirm() 方法来提示用户是否删除
    • 取消默认行为
    • 将删除功能中的回调函数单独封装出来,用来供添加功能使用

(2).代码

  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

(3).代码优化

  • 以上的思路是将点击事件绑定给了当前元素,在新增元素时,需要额外的代码去将点击事件绑定给新加元素
  • 可以使用事件委派来优化代码,将点击事件绑定给其父元素,优化后的页面代码如下:
  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

5.轮播图自动切换功能

  • 轮播图虽然展示出来可能比较单调,就是一直轮播,但是其中的小逻辑也很多,我们可以分步骤来逐步实现
  • 前端的HTML、CSS相关编写不赘述,主要讲述JS逻辑

(1).思路

  • 我们一般将相关功能放入匿名函数中,使其在页面加载完成以后才会加载
  • 在实现功能前,我们最好先在全局中定义好我们需要的全局变量
  • 首先先给轮播图左右的按钮绑定点击事件,使其平滑切换到下(上)一页
  • 其次实现无限循环切换,即第一页的上一页为最后页,最后一页的下一页是第一页
    • 这里主要是在结构中单独在将最后一张图片复制到第一位,把第一张图片复制到最后一位,在到达这一位置时,迅速切换图片下标,做到无缝切换
  • 一般轮播图都会自动进行切换,这时就需要用定时器来使其自动切换
  • 但是在其自动切换时当用户的鼠标进入图片区域时,自动切换就会停止;当鼠标离开后,又开始自动切换
  • 切换图片的时候下面的导航点也需要跟随图片进行切换,这里就需要使导航点的下标和图片的下标保持一致
  • 导航点不仅会自动切换,还会跟随用户的点击切换到相应的图片,这里就需要对上面的逻辑进行一定程度的修改
  • 最后我们需要对功能进行一定程度的测试,发现快速点击左右按钮时会出现半个图片,这里我们只需要设置个状态来判断是否点击即可

(2).代码

  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

6.导航栏显示折叠功能

(1).思路

  • 只要找到需要显示或折叠的多级列表
  • 给这个多级列表绑定hover()事件
  • 在移入移出时调用上下滑动动画即可(为了功能的完美体验,应该在每次动画前都停止到之前的所有动画)

(2).代码

  • 请点击 这里 查看(为了体验到完整功能,请使用PC打开,源码右键“查看网页源代码”即可)

7.京东商品详情页综合案例