持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第5天,点击查看活动详情
首先引入JavaScript库
JavaScript库
可以指为library,是一个封装好的特定的集合(方法和函数),例如在这个库里,封装好了预先定义好的函数,例如动画的显示隐藏登,获取元素等
简单来说,就是js文件,对js代码进行封装,存放到里面,可以直接用这些封装好的功能
例如我们将要说的jQuery,就是为了快速方便的操作DOM,里面基本都是函数和方法
jQuery概述
是一个简洁的JavaScript库,把原生js的DOM操作进行封装,可以快速查询使用里面的功能,优化了DOM操作,事件处理,动画设计等
而我们学习jQuery的本质就是学习调用这些函数(方法)
jQuery基本使用
jQuery入口函数
由对比来说
$(function(){
... // 此处是页面DOM加载完成的入口
})
$(document).ready(function(){
... // 此处页面DOM加载完成的入口
})
等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加我完成,jQuery帮我们完成了封装。
jQuery的顶级对象$
$是jQuery的别称
$(function(){
alert("你好")
})
// 那么$可以换成jQuery
$是jQuery的顶级对象,相当于JavaScript里的window,把元素利用$包装成jQuery对象
DOM对象和jQuery对象
1.DOM对象:用原生js获取过来的对象是DOM对象
var div = documentSelector("div");
console.dir("div")
打印出来有很多div的属性和方法
2.jQuery对象:用jquery方式获取到的对象是jQuery对象,本质上就是通过$把DOM元素进行包装
$("div");
console.log($("div"));
产生新的对象,以为数组方式储存
3.jQuery对象只能用于jQuery方法,DOM对象则使用原生的JavaScript属性和方法
$("div").style.display = "none"; // $("div")是一个jQuery对象不能使用原生就是的属性和方法,jQuery里没有style
div.hide() // div是一个dom对象,不可使用jQuery里的hide方法
因此上面两种写法都是错误的