一名前端小白的学习笔记(1/N)--JQuery_csdn实习前端小白学习笔记-CSDN博客

本文链接：https://blog.csdn.net/VVVVainz/article/details/103388784

源
- 谷歌
  - http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
- Microsoft
  - http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js
特性
- 封装了原生DOM操作和AJAX请求
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
语法
- $(selector).action()
  - $定义jquery
- 对象
  - DOM对象
    - 用原生JS获取的对象（document方式）
  - JQuery对象
    - $是 jQuery 的别称
    - 包裹着dom对象的伪数组
    - 用jquery方式获取的对象（$方式）
  - 相应对象使用相应方法，不可以混用
  - 将JQuery转换成DOM对象
    - $('')[index]
    - $('').get(index)
  - 将DOM对象转换成JQuery
    - $(dom对象)
- 名称冲突
  - var jq =JQuery.noConflict()
  - 用自己的符号(例如jq)来代替$符号
- 优化规则
  - 把所有 jQuery 代码置于事件处理函数中
  - 把所有事件处理函数置于文档就绪事件处理器中
  - 把 jQuery 代码置于单独的 .js 文件中
  - 如果存在名称冲突，则重命名 jQuery 库
- 入口函数
  - $(function () { })
  - $(docuemnt).ready(function () { })
  - 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成， jQuery 帮我们完成了封装。
  - 相当于原生 js 中的 DOMContentLoaded
  - 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
  - 更推荐使用第一种方式。
- 属性
  - attr() 方法用于获取/设置属性值。
    - 多个使用对象
- 获得内容
  - text() - 设置或返回所选元素的文本内容
  - html() - 设置或返回所选元素的内容（包括 HTML 标记）
  - val() - 设置或返回表单字段的值
- 添加
  - append() - 在被选元素的结尾插入内容
  - prepend() - 在被选元素的开头插入内容
  - after() - 在被选元素之后插入内容
  - before() - 在被选元素之前插入内容
- 删除
  - remove() - 删除被选元素（及其子元素）
    - jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤
  - empty() - 从被选元素中删除子元素
  - $('elem').html('')
- CSS类
  - addClass() - 向被选元素添加一个或多个类
  - removeClass() - 从被选元素删除一个或多个类
  - toggleClass() - 对被选元素进行添加/删除类的切换操作
  - css() - 设置或返回样式属性
    - css() 方法设置或返回被选元素的一个或多个样式属性(多个对象)
- 尺寸
  - width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
  - height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
  - innerWidth() 方法返回元素的宽度（包括内边距）。
  - innerHeight() 方法返回元素的高度（包括内边距）
  - outerWidth() 方法返回元素的宽度（包括内边距和边框）。
  - outerHeight() 方法返回元素的高度（包括内边距和边框）。
  - outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
  - outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
- 遍历
  - 隐式迭代
    - 就是把匹配的所有元素内部进行循环遍历，执行相应的方法
  - 遍历方法中最大的种类是树遍历（tree-traversal）
- 祖先
  - parent()返回被选元素的直接父元素
  - parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
    - 可以使用可选参数来过滤对祖先元素的搜索
  - parentsUntil()
    - 方法返回介于两个给定元素之间的所有祖先元素
- 后代
  - children()返回被选元素的所有直接子元素
  - find()返回被选元素的后代元素，一路向下直到最后一个后代
- 同胞
  - siblings()返回被选元素的所有同胞元素
  - next()返回被选元素的所有同胞元素
  - nextAll()返回被选元素的所有同胞元素
  - nextUntil()返回被选元素的所有同胞元素
  - prev()
  - prevAll()
  - prevUntil()
- 过滤
  - first()
  - last()
  - eq()回被选元素中带有指定索引号的元素
  - filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
  - not() 方法返回不匹配标准的所有元素
    - not() 方法与 filter() 相反。
选择器
- 元素选择器
- 属性选择器
- css选择器
事件
- 事件处理程序是指当HTML中发生某些事件时所调用的方法（由事件‘触发’）
- 效果
  - 隐藏显示
    - show()
    - hide()
    - toggle()
  - Fading方法
    - fadeIn()
      - 淡入已隐藏的元素
    - fadeOut()
      - 淡出可见元素。
    - fadeToggle()
    - fadeTo()
      - 允许渐变为给定的不透明度（值介于 0 与 1 之间）
  - 滑动
    - slideDown()
      - 向下滑动元素
    - slideUp()
      - 向上滑动元素
    - slideToggle()
  - 动画
    - animate({params},speed,callback)
      - params定义形成动画的CSS属性（必选）
      - 没有-所有都是驼峰
      - speed规定效果的时长（可选）
        slow
        fast
        ms
      - 动画完成后执行的函数名称（可选）
      - 不包括颜色动画
        需要
      - 多个属性使用对象
      - 可以使用相对值（相对于元素的相对值0）
        需要在值的前面加上+=或-=
      - 也可以设为show，hide，toggle
      - 支持队列
        顺序写，顺序执行
  - 停止动画
    - stop
    - 适用于所有jquery效果
    - $(selector).stop(stopAll,goToEnd);
    - 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
    - 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
    - 因此，默认地，stop() 会清除在被选元素上指定的当前动画。
  - callback函数
    - Callback 函数在当前动画 100% 完成之后执行。
    - $(selector).hide(speed,callback)·
  - chaining
    - Chaining 允许我们在一条语句中允许多个 jQuery 方法
    - 链式编程
      - 为了节省代码量，看起来更优雅
    - 以按照希望的格式来写，包含折行和缩进
    - jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行
- 事件绑定
  - $('事件源').on(事件类型,回调函数})
    - 父元素.on('事件类型',[子元素],回调函数)
    - 事件委托
    - 可以给动态的创建的元素绑定事件
  - $('事件源').off()解绑所有事件
    - $('事件源').off(‘事件类型’)解绑监听事件
    - $('事件源').off(“事件类型‘，子元素)解绑委托事件
    - $('事件源').one()只执行一次，下次自动解绑
AJAX