WEB API 与 jQuery 对比

太过爱你忘了你带给我的痛 2023-05-21 12:58 22阅读 0赞

**概念的对比**

## 什么是： web ApI ##

*  API 就是接口的意思 web api 就是前端接口 程序接口
 *  说白了 就是一套别人已经封装好的方法和属性 我们只需要调用就能有对应的功能
 *  作用： 减少我们写的代码 和逻辑 为了偷懒

## 什么是： jQuery ##

*  用javascript 写的一个文档 也就是 javascript库
 *  说白了 就是还有人 觉得 原生的一些 API 不够用 太麻烦 为了继续减少逻辑和 代码量 然后又在原生js的基础上再次封装一些方法和属性
 *  作用： 减少我们写的代码 和逻辑 为了偷懒

对比：

*  jQuery:只封装了原生js的一部分方法 并且两者的顶级对象不一样 (原生才是基础 jQuery 是给原生进行了部分包装)

## 关于对象对比 ##

**web ApI**

*  顶级对象是 window
 *  bom 的顶级对象 也是 window
 *  文档的顶级对象是 document (是相对标签来说)

**jQuery**

*  它的顶级对象是 $ 或者说是 jQuery
 *  (他们两个是一个概念 $是 jQuery的简写模式)

**对象的转化**

*  为什么要转化： 因为 两者之间取的节点不一样 用$获取的是jquery对象 web api 获取的是 dom对象 但是两者之间的 方法不能通用 jQuery只能用jQuery的方法 dom对象只能用 web api 的方法
 *  将dom对象转化为$对象
    
     *  $(dom) 注意： 括号内的是 dom对象 获取的不一定是单个对象形式 也可能是数组形式
 *  将$对象转化为 dom对象
    
     *  $(" div")\[index\] 直接从数组内获取该对象
     *  $(“div”).get\[index\] 用 get 方法
     *  注意：这两个已经是 dom对象了 不要和eq( ) 方法混淆了

**关于代码的位置**

*  都应该等静态资源加载完成后再执行代码比较好
 *  web API 用 window.onload事件
 *  jQuery 用入口函数
    
     *  $(function()\{  
        \})
     *  $(document).ready(function()\{  
        \}) 这个是等 元素加载完成后再执行函数

**关于节点的操作**

*  注： 节点 也可叫元素对象

# web ApI #

document.getElementById( )

*  获取与其对应的 id的标签 括号内不用加\#
 *  document.getElementsByTagName( )
    
     *  获取相对应的 标签
     *  返回的是伪数组的形式 (注意是Elements 因为获取多个所以加S 复数)
 *  document.getElementsByClassName( )
    
     *  获取类名相对应的标签
     *  返回的是伪数组的形式 (注意是Elements 因为获取多个所以加S 复数)
 *  特殊： document.body
    
     *  把 body 看成是documet下面的以属性(对象)
 *  document.querySelector(" ")
    
     *  获取单个对象
 *  document.querySelectorAll( )
    
     *  获取的是伪数组格式
 *  获取元素的父元素 ： 元素.parentNode
 *  获取子元素： 元素.children
 *  获取兄弟节点： 元素.nextElementSibling 元素.previousElementSibling
 *  创建新元素： document.creatElement(‘标签名’)
 *  将节点插入到页面上
    
     *  父元素.appendChild(元素对象)
     *  父元素.insertBefore(新元素对象,旧元素对象)
 *  删除某个节点： 父元素.removeChild(子元素)

## BOM ##

括号内的用的都是css选择器

伪类选择器

*  :checked 获取被选中的元素

## jQuery ##

*  $(" ")
    
     *  css选择器： 标签 类 id 通配(\*) 后代(空格) 子代
     *  筛选选择器： :first 第一个 :last 最后一个 :eq(index) 找下标为index的元素对象 :odd 下标为奇数的 :enen 下标为偶数的
 *  筛选方法：
    
     *  $().parent( ) 找该对象的父亲节点
     *  $().parents( ) 找该对象的所有父级节点
     *  $().children() 找该对象的儿子节点
     *  $().find( ) 找该对象的所有子级节点
     *  $().sibilings() 找该对象的所有兄弟节点
     *  $().nextAll() 找该对象的下面的所有兄弟节点
     *  $().prevAll( ) 找该对象的上面的所有兄弟节点
     *  注： 他们都是方法 在口号内可以加 css选择器和 筛选选择器
     *  $().eq(index) 找对象下标为index的节点
     *  $().hasClass(“类名”) 查找是否存在该类名的节点

**对比：**

*  两者之间获取的对象不一样 一个是dom对象 一个是$对象
 *  $获取的方法更简单

**关于事件**

*  事件概念： 可以被js侦测到的行为 就是可以被程序发现的行为或者说发生的事情 并且它可能被程序处理 (可以化分为： 用户事件 程序事件)
    
     *  用户事件： 用户触发
     *  程序事件： 代码运行中达到某种条件触发

**Dom 事件流：**

*  概念： 页面中接收 事件的顺序 （ ie 冒泡流 网景 捕获流)
 *  三个阶段： 事件捕获阶段 处于目标阶段 事件冒泡阶段
    
     *  事件捕获： 从根节点相目标节点传播 元素.addEventListener(‘事件类型’，函数，true)
     *  事件冒泡： 从目标节点相根节点传播 默认为false 即默认为事件在冒泡的时候触发
     *  在事件流中 相同的事件都会触发 除非阻止冒泡

事件委托

*  说白了 就是自己不太合适的事情给父级元素干
 *  实现原理： 事件会再冒泡的时候触发
 *  好处：
    
     *  可以实现同一个DOM元素注册多个同类型事件
     *  可将事件分为事件捕获和事件冒泡机制
     *  提高性能： 每个函数都会占有内存空间， 只需要添加一个事件处理程序代理所有事件，所占有的内存空间更少
     *  动态监听： 新增加的节点也不需要主动添加事件 一样具有该事件

**事件类型**

*  UI 事件： 当用户于页面上的元素交互的时候触发
    
     *  resize: 当窗口或者框架的大小发生变化时在window或框架上触发
     *  load: 当页面加载完全后在window上触发 或框架加载后在框架上触发
     *  unload： 当页面完全完全卸载载后在window上触发 或框架卸载 后在框架上触发
     *  scrool: 当用户滚动带滚动条发生变化的时候触发(谁要该事件给绑定给谁 但是 window是特殊情况)
     *  select: 当用户选择文本框( 或者 )中的一个或多个字符的时候触发
 *  焦点事件： 当元素获取或者失去焦点的时候触发
    
     *  focus: 获得焦点的时候触发
     *  focusin: 在元素获的焦点的时候触发 这个事件不会冒泡 所有浏览器都支持
     *  blur: 失去焦点的时候触发
     *  DOMFocusOut : 失去焦点的时候触发 HTML事件blur的通用版 只有opera 支持该事件 DOM3已经废弃了该事件 选择了 focusout 事件
 *  鼠标事件; 关于鼠标在页面上执行操作的时候触发
    
     *  click: 点击事件
     *  dbclick: 用户双点击鼠标按钮触发
     *  mousedown: 用户按下鼠标按钮触发
     *  mouseup: 鼠标按下弹起触发
     *  mousemove: 鼠标 在元素内移动时触发
     *  mouseout: 鼠标移入时触发
     *  mouseover: 鼠标移出时触发
 *  文本事件： 当在文档中输入文本的时候触发
 *  滚轮事件： 当使用鼠标滚轮(或者类似设备)的时候触发
 *  键盘事件： 当用户通过键盘在页面上执行操作的时候触发
    
     *  keydown: 当用户按下键盘上所有的键时触发 若是按住不放会重复触发该事件
     *  keypress: 当用户按下键盘上的字符键时触发此事件
     *  keyup: 当用户释放键盘的时候触发该事件
     *  键盘码： 事件对象的keyCode属性会包含一个代码 于键盘上的键一一对应
 *  合成事件： 当输入法编译器 输入字符的时候触发
 *  变动事件： 当底层DOM 结构发生变化的时候触发
 *  变动名称事件： 改变元素或属性名称的时候触发(以废弃)

**jQuery 独有事件： change();**

事件对象： dom 和 $对象都适用

*  概念： 事件对象代表事件的状态 它里面有一些方法和属性
 *  e.clientX e.clientY 鼠标相对浏览器的可视窗口为参考
 *  e.pageX e.pageY 鼠标相对以页面 html 或body 为参考
 *  e.screenX e.screenY 鼠标相对整个屏幕
 *  e.target 用于事件委托 保证事件的触发范围 直接接收事件的目标DOM元素 是不会变化的
    
     *  和this 的区别 : 因为事件是会冒泡的，所以this是会变化的但是 e.target 不会变化 它永远是直接接受事件的目标dom元素
 *  e.currentTarget 谁绑定事件 就是谁
 *  e.stopPorpagation( ) 阻止冒泡 就是父级不在触发相同事件 【！！！没记住】
 *  e.preventDefault( ) 阻止默认行为 【！！！！ 完全没记住】

一些方法 只适用于dom 对象

*  offsetLeft offsetTop 用于获取元素对象在页面上的位置
 *  获取的是相对有定位的父级元素的距离 若是没有 直到body

**jQuery 事件对象**

*  事件触发之后，就会有事件对象的产生
 *  阻止默认行为 $(“div”).preventDefult( ) 阻止默认事件 return false
 *  阻止冒泡： $(“div”).stopPorpagation( )

事件的绑定

**web API**

*  元素.on事件 = function( )\{ \}
    
     *  同一事件只能注册一次 会发生覆盖 后面注册的事件覆盖前面的
 *  元素.addEventListener(“事件类型”，函数， false)
    
     *  同一对象可多次注册相同的事件 会触发不同的函数

jQuery

*  $(“div”).事件(function()\{  
    \})
    
     *  不会覆盖会生成多次事件
 *  用on 注册：$(“div”).on(“事件”，委派对象，函数)
    
     *  会发生覆盖 是新清空旧的事件再注册新的事件
     *  可一个对象绑定多个事件  
        $(“div”).on(\{  
        click:function()\{\},  
        mouseover:function()\{\},  
        \}）
     *  可一个对象 多个事件绑定一个函数  
        $(“div”).on(“click mouseover”,function()\{
        
            })
     *  可事件委托  
        //$("div) 这个用来表示 事件委托对象的父级 元素  
        // li 用来表示 事件委托对象  
        $("div).on(“click”,“li”，function()\{
        
        \})
     *  事件委托的好处是： 可以动态绑定事件(子元素)
 *  一次性绑定one( ) 绑定该事件后只能触发一次
 *  自动触发事件： trigger( ) 三种
    
     *  简写： $(“div”).click( ) 把事件触发当方法 调用对象方法
     *  $(“div”).trigger( “需要触发的事件”) 除了触发函数还会把浏览器的默认效果也会执行
     *  $(“div”).triggerHandler(“需要触发的事件”) 触发函数 不会触发浏览器的默认效果 (表单 的颜色 光标)

**事件的解绑**

web API

*  开关思想 ： 当执行后不需要该函数了 用if判断 如果为true 执行 return
 *  on 的事件解绑是把该事件的函数变为 null
 *  addEventListenter 就用removeEventListenter(“事件”，函数名) 方法
    
     *  事件解绑后还是会执行完该函数的  
        var btn = document.getElementById(“btn”);  
        btn.onclick = function()\{  
        btn.onclick = null;  
        console.log(2)  
        \}
        
        btn.addEventListener(‘click’,function fn()\{  
        btn.removeEventListener(‘click’,fn);  
        console.log(3);  
        \})

jQuery

*  $(“div”)off( ) 方法解绑事件
    
     *  如果括号内并加入任何函数 清空所有该对象已经注册的事件
     *  一个参数： 该参数是事件类型 表示清除该对象的该事件
     *  如果有事件委托需要两个参数 ： 参数一 是 事件类型 参数二 表示 委托元素

关于元素内容的获取与修改

**web API**

*  固有属性的获取于修改： style
    
     *  特点： 只能改变和获取行内样式
     *  document.style.样式 = “值” document.style = “样式： 值”
     *  如果是双标签： innerHTML( ) innerText( ) 前者识别 html 标签 后者只能识别文本 有内容表示 改变 (改变是新清除内容再把需要改变的内容加上)
     *  如果是表单类型的标签： value( ) 获取和改变同innerhtml( )
 *  类样式的获取与修改
    
     *  document.className = “we” 如果没有赋值符号就是获取 有就是添加
        
         *  会重复添加 不好移除
     *  document.classList
        
         *  add( ) 添加 不会重复添加
         *  remove( ) 移除
         *  toggle( ) 切换 有删 无加
         *  括号内都要加引号 类名是字符串 可以有多个参数 通过逗号分隔开
 *  自定义属性的获取与修改：
    
     *  作用 ： 数据于标签的一一对应
     *  data-自定义属性名 this.dataset.自定义属性名 没有赋值号就是获取 有赋值 就是修改
     *  升级版：
     *  定义
        
         *  元素.setAttribute(“自定义属性名”,属性值)
         *  参数是需要定义的自定义属性名称
     *  获取
        
         *  元素.getAttribute(“自定义属性名”)
         *  传入参数是： 需要获得该值的自定义属性名
         *  输出是 该自定义属性的值
     *  删除  
        参数：被删除的自定义属性名；  
        box.removeAttribute(“index”);  
        开关属性
     *  定义 ： 只有开或关两种状态
     *  作用： 可以用于判断
     *  checked 选择
     *  selected 挑选 (默认选择)
     *  disabled 禁止
     *  获取
        
         *  DOM.checked =true | false

**jQuery**

*  $(“div”).css(“background”,“red”)
    
     *  括号内内一个参数就是属性名 表示获取
     *  两个参数第二个值是 属性值
     *  需要改变多个属性的话 需要用对象包裹 用键值对的形式
     *  不可以获取复合属性 就是连写
     *  不可以多个获取 但是可以是多个设置
 *  $(“div”).prop( ) 用法同css( ) 一样 但是css() 只能获取style内的样式 但是 prop( ) 可以获取元素有的属性
 *  自定义属性： $(“div”).attr( )
    
     *  设置或者获取自定义属性 用法和 prop( ) 一样
 *  data( ) 数据存储
 *  html( ) 相当于innerHTML
 *  text( ) 相当于 innerText
 *  val() 相当于 value
 *  用法：
    
     *  小括号内为空 就是获取
     *  小括号内用引号包裹 就是赋值
     *  会发生覆盖
 *  类名
    
     *  addClass() 添加
     *  removeClass() 删除
     *  toglglClass() 切换

## 关于元素的遍历 ##

web API 只能用 for循环

jQuery

*  遍历元素  
    需要遍历的元素. each(function()\{  
    \})
    
     *  两个参数 第一个表示当前下标 第二个参数表示 当前对应的dom节点对象(当使用jQuery节点方法的时候 应该把它变成jQuery对象)
 *  $.each(object,function(index,elem)\{  
    \}) 遍历元素 object 表示需要遍历的对象
 *  两者没有区分 带有$的一般用于遍历数据 第一个一般用于遍历数据

## 关于元素的创建和添加 ##

web API

*  创建新元素： document.creatElement(‘标签名’)
 *  添加元素：
    
     *  父元素.appendChild(元素对象)
     *  父元素.insertBefore(新元素对象,旧元素对象)
 *  删除某个节点： 父元素.removeChild(子元素)

jQuery

*  创建元素： $(“元素名称”)
 *  添加元素
    
     *  外部添加 产生的兄弟关系
        
         *  element.after(‘内容’) 把内容添加到后面
         *  element.befor(‘内容’) 把内容添加的最前面
     *  内部添加 产生的父子级关系
        
         *  element.append( ); 把内容添加到后面
         *  element.appenTo( ) 倒着写(相对上面的)
         *  element.prepend() 把内容添加的最前面
         *  element.prependTo( ) 倒着写(相对上面的)
 *  删除元素
    
     *  element.remove() 删除元素本身 包括标签本身
     *  element.empty( ) 删除元素的子元素
     *  element.html(’ ') 用html把内容变为空

## 关于排他实现 ##

*  web API : 需要用循环 清除 然后再添加
 *  jQuery: $(this).siblings().css(‘backroound’, ’ ');

BOM

1.  window对象的事件

*  load : 当页面静态资源加载完毕触发该事件
 *  resize：当窗口大小发生改变的时候触发该事件

1.  定时器

*  延迟定时器：setTimeout(function()\{\},1000) : 执行一次
 *  周期定时器：setInterval(function()\{\},1000) ： 多次
 *  清除： clearTimeout(定时器名称) clearInterval(定时器名称)

1.  loaction对象

*  location.href = ‘地址’

1.  localStorage

*  localStorage.setItem(‘键名’，键值)
 *  localStorage.getItem(‘键名’)
 *  localStorage.removeItem(‘键名’)
 *  localStorage.clear()
 *  周期：一直存在，只要不手动删除
 *  存储容量： 20M

1.  JSON

*  把复杂数据类型转换成具有原数据格式的字符串
 *  JSON.stringfy(复杂数据类型)
 *  JSON.parse(字符串)

**jQuery 效果**

*  show hide toggle
 *  sildeDown 下滑
 *  sildeUp 上滑
 *  sildeToggle 切换显示

事件切换(鼠标移入和移出的结合 函数1 移入 函数2 移出)

*  $(‘div’).hover(function()\{  
    \},function()\{  
    \})
    
     *  如果只用一个函数 不管鼠标移入和移出都会触发
 *  动画排队现象(只要有动画就会排队)
    
     *  stop( ) 写于动画效果的前面 停止动画排队
 *  淡入淡出
    
     *  fadeIn 淡入
     *  fadeOut 淡出
     *  fadeToggle 淡入淡出切换
     *  fadeTo 淡出到某一程度
        
         *  speed 时间 不必需
         *  opcity 透明度必需写

自定义动画 animate

*  自己书写动画 定义动画的变化效果
 *  animate(params,\[apeed\],\[easing\],\[fn\]);
    
     *  params: 要修改元素的属性 对象的显示 键值对
 *  自定义动画主要 是这是大小的值 该颜色的无法改变 该颜

插件

http://www.jq22.com  
http://www.htmleaf.com