jQuery入门,精简易学!

218 阅读1分钟

什么是jQuery



jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的,并且可对选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件且jQuery兼容各种主流浏览器

image.png

入口函数



原生DOM入口函数:

window.onload=function(){内容}

jq入口函数两种写法:

//标准写法
$(document).ready(function(){内容})

//简写
$(function(){内容})


两者的区别:

执行的时机不同:

  • 原生dom: dom树+外部资源路路径 加载完毕后执行

  • jq: dom树加载完之后执行

执行次数不同:

  • 原生dom: 只能执行一次,后者覆盖前者

  • jq: 颗指向多次,按照顺序依次执行



image.png



DOM对象与jq对象的区别

使用dom语法获取的对象:

let box = document.querySelecter('.box')

使用jq语法获取得到对象

let $box = $('.box')
//jq对象本质是伪数组,原型指向$.prototype

dom对象和jq对象区别

  • dom对象: 只能使用dom原生语法,不能使用jq的方法

  • jq对象: 只能使用jq语法,不能使用dom语法

  • dom对象和jq对象的语法是不互通的






dom对象和jq对象互转

//dom对象转jq对象
$(dom对象)
//jq对象转dom对象
$()[索引]



image.png

$函数



  • $是什么: 是一个函数对象
  • **和jq的关系:**                           完全等价 `===jquery`

$函数的特点

  • 参数不同,作用不同
  • 参数是函数---入口函数
  • 参数是选择器---获取元素
  • 参数是dom对象---dom转jq对象

以上是jQuery的简单概念总结,具体详情以jQuery官方网站为主
jQuery官网 jQuery中文文档

image.png

感谢阅读,加油!