jQuery概述

80 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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方法

因此上面两种写法都是错误的