[jQuery]黑马课程学习笔记（一篇完）

一、基础

• jQuery 是一个 JavaScript 库。是客户端脚本库
• jQuery 兼容于所有主流浏览器, 包括 Internet Explorer 6!
• JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！所以**

//百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

• jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

  • 基础语法： $(selector).action()
  • 美元符号$ 定义 jQuery，是它的别称*（两者可以互相代替）*
  • $ 是jQuery的顶级对象
  • 选择符（selector）“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

• jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

• jQuery 代码在文档在完全加载（就绪）之后运行(即：入口函数)

  • 写法1

  $(document).ready(function(){
   
     // 开始写 jQuery 代码...
   
  });
  

  • 写法2（更推荐使用）

  $(function(){
   
     // 开始写 jQuery 代码...
   
  });
  

  • 是等着DOM结构渲染完毕即可执行，不用等到所有外部资源加载完成。
  • 相当于原生js中的DOMContentLoaded。
  • 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

• jQuery 选择器基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

• 项目中使用jQuery函数最好单独放在一个.js中，使用src引入。

• jQuery对象和DOM对象（原生JS获取到的）的相互转换：

  • jQuery转换为DOM对象

    • 因为dom对象是以伪数组形式存储的，所以可以索引号获得DOM对象

    $(dom对象)[index] 
    $(dom对象).get(index)
    

  • DOM对象转换为jQuery对象

    • jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）

    //直接取的,或者是包装已获取的DOM对象
    $(DOM对象)
    

• 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。两者不能混用

• focus一般和blur搭配使用。（需要还原focus前面的样式）

二、常用效果/API

• 🚩隐式迭代：遍历内部DOM元素（伪数组形式存储）的过程

  • 给匹配到的所有元素循环遍历，执行相应的方法，（ 不用自己再写for循环）

• 一些比较特别的选择器实例

  $(“ul li:first”)	选取第一个 元素的第一个 元素
  $(“ul li:first-child”)	选取每个 元素的第一个 元素
  $(“[href]”)	选取带有 href 属性的元素
  $(“:button”)	选取所有 type=“button” 的 元素 和 元素
  $(“tr:even”)	选取偶数位置的

  元素

• 索引号是从0开始的~
• jQuery的🚩筛选方法

• jQuery的排他思想

  • 由隐式迭代可以比较简单的实现，多选一的功能。

• 得到当前元素的索引号的方法： ⚠️是个方法！所以index**()** ⚠️

  $(this).index**()**
  

• 样式操作

  • 操作css方法*（其实也不太方便）*

    1.参数只有属性名时，返回属性值；（此时是 查询）

    2.参数是属性名，属性值，逗号分隔，表示设置一组样式。属性要带引号，属性值是数字时可以不带单位和引号。

    1. 参数可以是对象形式（{}），方便设置多组样式。
       • 属性名和属性值用冒号隔开；多组样式之间用逗号分隔（符合对象的写法）
       • 复杂属性名用驼峰命名法（不能出现“ - ”）
       • 属性可以不用引号

  • 🚩设置类样式方法

    • 作用等同于以前的classList，可以操作类样式。
    • addClass(“类名”)/removeClass(“类名”)/toggleClass(“类名”)
    • 操作类里面的参数不需要带 . 因为 方法里有class，明确是类了。
    • 原生JS中的className会覆盖元素原先里面的类名；但jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery常用效果

显示隐藏:

• 效果不是很好看，所以也不加参数的。
• show([speed],[easing],[fn])
• hide()
• toggle() :切换

滑动

• slidedown()
• slideup()
• slideToggle()

淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo() 没有默认参数，必须加上 speed、opacity

动画

• animate(params,[speed],[easing],[fn])
• params：想要更改的样式属性，以对象形式传递，必须写。（要求和css里用对象形式传递一样的）

链式编程

• 更简洁&优雅的写法
• ⚠️注意明确是给哪个对象执行样式。

事件切换

hover([over,]out)

over:相当于mouseenter;out:相当于mouseleave

① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发mouseover（或mouseout）事件
② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发mouseenter（或mouseleave）事件。

🚩常常配合 xxToggle() 使用，更更优雅简单了

• ⚠️ 动画或者效果的队列问题：一旦触发就会执行，多次触发造成问题。

  //停止排队，写在动画或效果的前面！
  stop()
  

jQuery属性操作

• 设置/获取元素固有属性值 prop()
• 设置/获取元素的自定义属性 attr()，类似原生的getAttribute()/setAttribute()
  • h5新增的 data-x 属性也可以通过此方法获取
• 数据缓存 data() 不常用的
  • 在指定的元素上存取数据，并不会修改DOM结构。
  • 页面刷新后，之前存放的数据都将移除。
  • 读取HTML5自定义属性data-index，得到的是数字型结果。读取时写法：data(“index”)

jQuery内容文本值

• 主要针对元素内容还有表单的值操作

1. 普通元素内容html() (相当于原生innerHTML)
2. 普通元素文本内容text() (相当于原生innerText)
3. 表单的值val() (相当于原生value)

• 都是 括号内为空 表示获取元素对应内容。括号内“内容” 表示设置元素的对应内容

jQuery元素操作

• 主要是遍历、创建、添加、删除元素操作

• 遍历（etc : 给同一类元素做不同操作）

  //语法1：
  $().each(function(index,domEle){xxx;})
  

  • each()方法遍历匹配每一个 元素 ;不太适合遍历数组
  • 第一个参数为索引号：index；第二个参数为每个DOM元素对象：domEle（使用$方法时要转换的:$(domEle) ）

  //语法2：
  $.each(object(),function(index,ele){xxx;})
  

  • 可以用来遍历 任何 对象。主要用于数据处理，比如数组、对象

• 创建：$(“标签”)

• 添加

  • 内部添加：parent关系
    • element.append(”内容”)，放到匹配元素内部的最后面*（类似原生的appendChild）*
    • element.prepend(”内容”)，放到匹配元素内部的最前面
  • 外部添加：siblings关系
    • element.after(”内容”),放到目标元素的后面
    • element.before(”内容”)，放到目标元素的前面

• 删除

  1.element.remove() //删除匹配的元素（本身）
  2.element.empty() //删除匹配的元素集合中所有的子节点
  3.element.html("") //清空匹配的元素内容
  

  • 2、3效果一样的。

jQuery尺寸、位置操作

• 尺寸

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NRlthAYq-1667617359409)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/752d1aff-2bed-4e52-b22c-98578eec95de/Untitled.png)]

  • width()表示的是内容宽度
  • 返回值是数字型
  • 如果参数是数字，就是修改相应值。（不需要 “”,也可以不写单位）

• 位置

  • offset():设置/获取元素相对于文档的偏移坐标

    • 属性：left、top；可以用对象形式设置

  • position(): ⚠️获取元素相对于带有定位的parents()的偏移坐标

  • scrollTop()/scrollLeft():设置/获取元素被卷去的头部/左侧

    //获取文档此时被卷去的头部
    $(window).scroll(function(){
    	$(document).scrollTop()
    })
    

    • scrollTop()可以结合offset().top，用于返回顶部功能实现
    • scrollTop(x)可以用于设置进入页面时初始位置 （无动画效果，比较丑😢所以一般不用）

      • 🍐带动画效果的返回顶部 ⚠️ 不是文档而是html和body元素做动画

         $(”body,html”).animate({scrollTop:0})
        

三、事件

1.jQuery事件注册

• 单个事件注册
  • 语法： element.事件（{function(){})
  • 和原生基本一致

2.jQuery事件处理

2.1 on()绑定事件

• on()方法可以在匹配元素上绑定一个或多个事件的事件处理函数

• events：多对多时用对象形式，一般是 “ 事件名 ” ；selector：元素的子元素选择器/触发元素；fn：回调函数

  element.on(events,[selector],fn)
  

• 同一事件处理程序，绑定给多个events时，多个events用空格隔开就可以了

  • etc:之前的添加删除类效果，可以由此直接简化为toggleClass

• 优势：

  1. 可以绑定多个事件，多个事件处理函数。（多个事件对应一个处理函数、多对多）[因为链式编程，一对多本来就可以实现]
  2. 可以实现事件委派操作。
     • etc: 把原来children()上的事件绑定在parent()上，就只给一个元素绑定事件*（而不是隐式迭代给每一个children()都绑定）*，大大提高程序运行效率。
  3. 可以绑定未来动态创建的元素
     • 原来的click()之类的没有这种功能。
     • （其实就是不管元素是什么时候创建的，怎么创建的，只要有，就可以绑定）

• 应用：

  • 🍐对于不确定数量的li事件，可以在它的ul上用on()事件指定任务，并派发
  • 🍐复杂一些的同类div，可以为其添加一个相同class，并在其parent()上用on()。

2.2 off()解绑事件

• 可以移除通过on()方法添加的事件处理程序

• 语法：

  $("p").off()   //解绑指定元素的**所有事件**处理程序
  $("p").off("click") //解绑指定元素的**指定**事件处理程序
  $("ul").off("click","li")  //解绑**事件委托**
  

2.3 trigger()自动触发事件

• 语法：

  //先有一个事件xxx  
  
  1.element.xxx()  //简写
  2.element.trigger("xxx") 
  3.element.triggerHandler("xxx") 
  //**不会触发元素的默认行为（比如input聚焦时的光标）**
  

• 使用场景：轮播图自动切换

2.4 其他绑定事件

• one()：绑定后只触发事件一次

3.jQuery事件对象

• 事件被触发，就会有事件对象的产生 （function(event){}） 可以调用
• 用处：
  • 阻止默认行为：event.preventDefault 或者 return false
  • 阻止冒泡：event.stopPropagation()
• 和原生的api差不多？

四、其他方法

4.1 jQuery对象拷贝

• $.extend() 可以把某个对象拷贝（合并）给另外一个对象使用

• 语法：

  $.extend([deep],target,object1,[objectN])
  

  1. deep:设置为true时,深拷贝；默认为false,浅拷贝

     复杂数据类型有自己另外的存储空间

     • 浅拷贝：
       • 拷贝复杂数据类型的存储地址；修改目标对象时，被拷贝对象也会受到影响。
       • 如果复杂数据类型的名称一致，会覆盖target中原有的数据
     • 深拷贝：
       • 完全拷贝数据；修改目标对象时，被拷贝对象不会受到影响。（对于复杂数据类型，会另外开辟自己的空间）
       • 如果两者的复杂数据类型（名称一致）中有不冲突的属性，不会覆盖，会合并到一起

  2. target:要拷贝的目标对象

  3. object1:待拷贝的对象。

  深拷贝&浅拷贝

4.2 多库共存

• 问题：其他js库也会使用 $ 作为标识符，一起使用时会引起冲突
• 解决：
  1. 把 $ 统一改为 jQuery
  2. jQuery变量规定新的名称(释放对$的控制权，可以自定义变量)，jQuery/$.noConflict() var xx = jQuery/$.noConflict()

4.3 插件

• jQuery功能有限，复杂效果可用jQuery插件实现*（也是基于jQuery的）*

图片懒加载

• 当页面滑动到可视区域，再显示对应图片
• 优点：提高网页下载速度、减轻服务器负载

bootstrap

• 响应式，配合相关的组件库使用。

五、 练习日记

• day2

  手风琴效果

  • style里中选择对应类的时候，一个空格就表示下一级了。 ⚠️不要多打或者少打/或者打错

    li.current  而不是 li .current //两者大不同！
    

  • 为什么不用 添加/删除类来实现呢？因为效果太直白了，有点丑 🤪 虽然代码很简洁

  • ❓快速切换时，会出现其他li的透明度改变的问题。测试起来好像是因为用了多个stop()的缘故。咋么优化还不知道。

• day3

  购物车功能

  • 全选/选中功能：

    • 选中类的时候，经常会漏打“ . ” 😩

    • $里可以一次性操作多个类。如果动作是完全一样的。⚠️用 逗号 隔开⚠️

      $(".j-checkbox,.checkall")
      

    • 有时候，可以用change()代替click()

    • 打印console.log，也要注意，是要跟在某个操作里。直接打印$变量也ok的。

    • 小复选框控制全选框时，因为结果只有2种，所以赋值时给 true、false 就可以了。不用跟着小复选框的结果来 🤨

    • .length 还是蛮常用的（统计某个元素的个数/某个元素某种属性的个数etc)

  • 增减商品数量功能：

    • ⚠️± 控制的是当前商品的数量。所以会用到siblings()，不然就会影响其他商品了。

    • 不满足条件（数量不能<1）时:

      return false;
      

      返回，不执行。

    • 用户输入：只能为正整数。可以在html页面限制一下。

    <input type="text" class="itxt" value="1" onKeyUp="value=value.replace(/[^\d]/g,'')">
    

  • 更改商品的价格小计功能

    • ⚠️ ❗分为2块小功能点，不能合并
      1. 用户点击+/-时，价格小计的变化
      2. 用户直接输入数量时，价格小计的变化
    • 🚩明确操作的对象和当前对象的关系（etc：是this的parent().parent().siblings() ）
    • 用到的一些方法：
      • 截取字符串:substr()
      • 保留2位小数：toFix(2)
      • 查找祖先元素：parents()

  • 删除商品功能

    • ⚠️this 指向的是操作的元素，不管它是经过怎样筛选得到的。
      • 筛选的方法有很多，比如用children(”xxx”),parents(”xxx”),也可以直接在$(”xxx xx”)中选定

  • 给选中商品添加背景效果

    • 主要用了addClass()、removeClass()方法

• day4

  电梯导航功能

  • 固定电梯的实现：
    • 比较 当前文档卷去的距离 与 （电梯）标的位置
    • 优化：首次进入页面/页面刷新后/页面滑动时，都需要进行比较，以确认电梯的显示与否——将比较功能封装为函数并在对应位置调用
  • 电梯跳转到对应位置的实现
    • $(xx).index() 返回当前电梯索引值（楼层）
    • 由于每个具体楼层有一个统一的类，所以通过eq(index)+offset().top 可以查询对应楼层（距离顶部）的位置
    • 使用页面滚动动画效果到达该位置即可。 ⚠️ 动画前的stop()不能忘！
    • 电梯楼层切换效果：addClass,removeClass (不用带 . !!)
  • 根据内容切换至对应楼层：
    • 分析可知，切换楼层的功能实现，是在 页面滚动 的事件中发生。
    • 判断条件：比较 当前文档卷去的距离 与 每一楼层对应的内容的offset().top ，前者≥后者时，表示已经进入当前楼层。
    • 需要获得每一楼层对应的内容的索引号以及offset().top 值，所以，用到each()循环遍历。里面的回调函数，i：索引号，ele:元素信息
  • 互斥锁/节流阀
    • 由于 电梯跳转功能 实现中 用到了页面滚动动画，会触发页面滚动事件。如果不是从下往上且相邻楼层依次跳转，就会发生多次抖动问题
    • 使用互斥锁（flag），控制一次只能有一个页面滚动事件
      • 用if(flag) ; flag = false / true 来控制
      • 🚩 打开后要及时关闭，不然被关掉的就一直不能执行了。
        • 打开：进入互斥功能时
        • 关闭：功能完成后，用回调函数重新关闭节流阀

  微博发布效果

  • 一些样式

    textarea{
        outline: none; //去掉鼠标聚焦时文本框加粗效果
        resize: none; //设置不能通过鼠标随意改变文本域的宽高
    }
    

  • 因为发布是动态的，而且on()可以实现事件派发，所以操作主要使用on事件进行。

  • 在li上添加内容，以下2种方法的结果一样

    ⚠️:添加的内容，是dom元素！

    var cont = $(".txt").val()
    var del = "<a href='javascript:;'>删除</a>"
    
    li.append(cont + del)
    li.html(cont + del)
    

  • 实现滑动出现效果：

    • li默认设置为不可见：display:none
    • 添加完成后，使用sildeDown()方法出现。

  • 实现滑动删除效果：

    • 先上滑消失slideUp()
    • 再remove()

  • 应用场景：评论区，留言板。

  • 可优化的点：etc 无法输入空字符串、字符串字数限制、超出显示范围后折叠/打开

• day5

toDoList

数据的存储/读取

• 主要功能点是结合 本地存储(localStorage) ，保证刷新/关闭页面内容不丢失
• 思路：对本地存储中的数据进行读/取的操作
• 数据存储格式： var todolist = {(title:’xxx’,done:false)}
• 因为数据是以 对象 形式存储的，localStorage 只能存储字符串格式，所以：
  • 存入数据时，把对象转换为字符串后存入。JSON.stringify()
  • 取出数据后，把字符串转换为对象使用。JSON.parse()
• ⚠️ 因为用到 确认键盘按下某个键 这样的功能~~，所以，比之前直接用click要多一步，~~也就是 要用到keydown的回调函数来确认。
• 读取本地存储的数据：localStorage.getItem(“xxx”)
• 数组的追加：xxx.push();

数据的渲染/删除

• 渲染：遍历本地存储里的数据，回调函数里的 i 和 n 分别作为 自定义的索引号，内容添加到新建的元素上，再进行渲染。
  • 遍历前先清空原有列表，防止多次重复渲染展示
• 删除：主要功能点：根据每条数据的索引号，动态绑定事件+事件委托
  • 由于索引号是自定义的，所以通过attr()方法获取
• 数组里删除数据：splice(从哪个位置开始删除,删除几个);

数据状态更新

• 索引号已经绑定，所以siblings也可以获取到相应索引号
• 数组里数据修改：xxx[index].xxxx = xxx
• 赋值当前的复选框状态。（前面也有使用过的 $(this).prop(“checked”)）
• 渲染的部分优化，之前没有区分数据状态。（加一个判断条件）

个数统计

• 主要用到 $(xxx).text(xxxx);

原文写于Notion / 部分有参考菜鸟教程