JS和jquery的相互转换知识点学习框架总结

JS和jquery的相互转换知识点学习框架总结：jQuery的入口函数，可以出现任意多次，不会覆盖。在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作dom了，不用等所有的外部资源都加载完成。

JS和jquery的相互转换知识点学习框架总结

• jQuery描述
  • 主要学习如何来使用jQuery操作DOM,当中主要封装的是API方法，所以要加（）
  • 使用步骤
    • 1、引包
    • 2、入口函数
      • 原生js的入口函数window.onload，是在所有的文件资源加载完成后才执行（页面文档，外部的js文件、css文件、图片等）且只能出现一次，重复出现会覆盖
      • jQuery的入口函数，可以出现任意多次，不会覆盖。在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作dom了，不用等所有的外部资源都加载完成。
      • 文档加载的顺序：从上往下，边解析边执行
      • jQuery对象是一个数组，数组中包含着原生js中的dom对象
      • js命名规范容许出现的字符有：数字，字符，下划线，$
      • js命名规范容许作为变量名开头的字符有：字符，下划线，$
      • $=jQuery
      • 1、$(document).ready(function(){})
      • 2、$(function(){})
      • 3、$(window).ready(function(){}) 所有加载完成后，再执行
    • 3、功能实现代码（事件处理）
  • 特点
    • 1、链式编程
    • 2、隐式迭代
• JS和jquery的相互转换
  • js转成jquery
    • $(js对象)
  • jquery转成js
    • jquery对象[索引值]
    • jquery对象.get(索引值)
• 选择器
  • 基本选择器
    • id选择器 #
    • 类选择器 .
    • 标签选择器
    • 通配符选择器 *
  • 层级选择器
    • 并集选择器 ，
    • 后代选择器 空格
    • 子代选择器>
  • 基本过滤选择器
    • :odd 奇数
    • :even 偶数
    • :eq(index)
  • 筛选选择器
    • .find() 后代查找
    • .parent() 查父元素
    • .children() 子代查找
    • .siblings() 所有的兄弟元素
    • .eq(index) 相等查找
    • .prev() 查找前一个兄弟元素
    • .next() 查找后一个兄弟元素
• 操作dom
  • 样式操作
    • 样式属性操作 .css()
      • 设置样式属性
        • .css(属性，值)
        • .css(json)
      • 获取样式属性
        • .css(属性)
    • 类操作
      • addClass（） 添加类
      • removeClass（） 删除类
      • hasClass（） 判断类是否存在
      • toggleClass（） 切换类
  • 动画操作
    • 隐藏显示动画
      • 通过改变宽高和不透明度实现的---display：none
      • show（）显示动画
        • 1、无参，默认是400ms
        • 2、带参：毫秒值
        • 3、带参：fast normal slow
        • 4、带参（毫秒值，回调函数）
      • hide（）隐藏动画
      • toggle（）切换动画
    • 滑入滑出动画
      • 通过高度的改变实现的---display：none
      • slideDown（）滑入
      • slideUp（）滑出
      • slideTaggle（）切换
    • 淡入淡出动画
      • 通过不透明度的改变实现---display：none
      • fadeIn（） 淡入
      • fadeOut（）淡出
      • fadeToggle（）切换
      • fadeTo（）
        • 参数1：时长，必须带有
        • 参数2：透明度0-1
        • 参数3：回调函数
    • 自定义动画
      • animate（json，speed，callback）
    • 停止动画
      • stop（）
        • 参数1：后续动画是否要执行
          • true：后续动画不执行
          • false：后续动画执行
        • 参数2：当前动画是否执行
          • true：立即执行完成当前动画
          • false：立即停止当前动画
        • 默认参数都为false
  • 节点操作
    • 动态创建元素
      • $()
      • .html()
    • 添加元素
      • append（）在盒子的最末尾添加一个元素
        • .appendTo（）
      • .prepend（）在盒子最前面添加元素
        • .prependTo（）
      • after（）放在元素之后
      • before（）放在元素之前
    • 清空元素
      • empty（）
      • .html（“”）
    • 删除元素
      • remove（）
    • 复制元素
      • .clone（）
  • 属性操作
    • .attr（属性，值） 设置属性
    • .attr（属性）获取属性
    • .remove（属性）移除属性
    • 注意：checked，selected，disabled要使用.prop（）方法，prop方法通常用来影响dom元素的动态状态，而不是改变HTML属性
    • 实例：input.prop("checked",true) $("input:checkbox") $("input:checked")
  • 值和内容
    • .val（）
      • 获取或设置表单元素input,select,textarea的value值
    • .text（）
      • 获取或设置双闭合标签的中的文本值，不识别标签
    • .html（）
      • 获取或设置双闭合标签的文本值，识别标签
  • 尺寸位置操作
    • 高度和宽度操作
      • 高度
        • node.height()
          • 获取和设置高度，返回值是number类型
      • 宽度
        • node.width()
          • 获取和设置宽度，返回值是number类型
    • 坐标值操作
      • offset（）
        • 获取或设置元素相对于文档的位置
        • 返回值为json类型：{left:num, top:num}
        • 设置offset后，如果元素没有定位(默认值：static)，则被修改为relative
      • position()
        • 获取相对于最近的定位的父元素的位置
        • 只能获取，不能设置
        • 返回值为json类型：{left:num, top:num}
        • 获取的就是定位值，和margin/padding无关
      • scrollTop()
        • 获取或设置元素垂直方向滚动的位置
      • scrollLeft()
        • 获取或设置元素水平方向滚动的位置
• 事件机制
  • 事件绑定
    • 简单事件绑定
      • click(handler) 单击事件 blur(handler) 失去焦点事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件 dbclick(handler) 双击事件 change(handler) 改变事件，如：文本框值改变，下来列表值改变等 focus(handler) 获得焦点事件 keydown(handler) 键盘按下事件
      • 不会出现层叠
    • bind事件
      • bind(事件类型，事件处理程序)
      • 可以同时绑定多个事件
    • delegate事件
      • $(.parentbox).delegate(后代元素，事件，事件驱动程序)
      • 可以同时绑定多个事件
      • 支持动态创建的元素
    • on事件
      • $(.parentbox).on(多个事件空格隔开，后代元素，json，事件处理程序)
      • json中的属性数据，事件触发时使用 event.data.属性 调用
  • 事件解绑
    • unbind
      • 解绑bind事件
    • undelegate
      • 解绑delegate事件
    • off
      • 解绑on事件
  • 事件触发
    • 简单事件触发
      • $(selector).click();
        • 触发浏览器行为
          • 执行程序，触动事件
    • trigger事件触发
      • $(selector).trigger("click");
        • 触发浏览器行为
    • triggerHandler事件触发
      • $(selector).trigger("click");
        • 不触发浏览器行为
          • 执行程序，不触动事件
  • 事件对象
    • event.data
      • 传递给事件处理程序的额外数据
    • event.currentTarget
      • 等同于this，当前的DOM对象
    • event.target
      • 事件触发源，不一定===this
    • event.pageX
      • 鼠标相对于文档左部边缘的位置
    • event.stopPropagation()
      • 阻止事件冒泡
    • event.preventDefault()
      • 阻止默认行为
    • event.type
      • 事件类型
    • event.which
      • 鼠标的按键类型：左 1 中 2 右 3
    • event.keyCode
      • 键盘按键代码
• 链式编程和隐式迭代
  • 链式编程原理：方法的返回值都是 return this
  • end()
    • 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态
• each方法
  • 如果要对每个元素做不同的处理，遍历jQuery对象集合，为每个匹配的元素执行一个函数
  • $(selector).each(function(index,element){})
    • index:当前元素的索引号
    • element:当前元素，是js对象，使用时需要转换成jquery对象
• 多库共存
  • 多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
  • 解决方法
    • 引包时一般将低版本的放在前面，高版本的放到后面
    • $.noConflict();
      • 让$放弃对最新引包的使用权
    • console.log($.fn.jquery)
      • 打印版本号
  • 示例
    • 放弃一个使用权
      • $.noConflict(); console.log($.fn.jquery); console.log(jQuery.fn.jquery);
    • 放弃两个符号的使用权，同时定义一个新的使用权
      • var MrLv = $.noConflict(true); console.log($.fn.jquery); console.log(jQuery.fn.jquery); console.log(MrLv.fn.jquery);
        • 此时$和jquery都放弃了使用权，MrLv成为新的使用权
• 插件
  • 改变背景色
  • 懒加载
  • 自定义插件
    • 绑定到原型上,调用者是jquery对象 $.fn.setColorRed = function () { this.css({"color":"red"}); }
      • $("button").on("click", function () { $(this).setColorRed(); })
    • 绑定到$上，调用者是$ $.setColorRed = function (e) { e.css({"color":"red"}); }
      • $("button").on("click", function () { $.setColorRed($(this)); })