jQuary教程1:jQuary的优点和地位

Posted 2020-11-08 autoxingjy

1 什么是jQuery?

jQuery是一个快速，小巧，功能丰富的JavaScript库。

javascript库: 就是存放javascript代码的仓库

jQuery作为一个迭代多年的优秀框架,是前端js开发者的基本功.

2 为什么要学jQuery?

  它使诸如html文档遍历和操纵，事件处理，动画和Ajax等事情变得更简单，使用易于使用的API，可在多种浏览器中使用.结合多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式.

  引用jQuery 的介绍来说: write less, do more

 

写js原生的一些问题:

 

• 实现同一功能,代码量相对较大

• 有兼容性问题

 

jQuery :

 

• 实现同一功能,代码量更少

• 处理了兼容性问题

//需求: 
//点击div,改变div中的文本

//html
<div id="box">点我有惊喜</div>

//js原生
var box = document.getElementById(‘box‘);
box.addEventListener(‘click‘,function(){ 
    this.innerText = ‘惊喜‘;
}, false);

//jQuery
$(‘#box‘).on(‘click‘,function(){
    $(this).text(‘jQuery版的惊喜‘);
})

 

2 下载jQuery

官网地址：http://jquery.com

2.2 引入jQuery

 

 

3  jQuery中的$函数:入口函数,类似 js原生中的window.onload

 

$(function(){
    code...
})

3.1 传入一个DOM对象

 作用: 将DOM对象转换成一个jQuery对象

 什么是jQuery对象:jQuery库提供的对象类型,因为jQuery库功能非常强大,只有使用jQuery对象才能调用jQuery库提供的方法

 

//html
<div id="box">div里面的内容</div>
//js
var box = document.getElementById(‘box‘);

//用$函数,把DOM对象转换成jQuery对象
$(box).text(‘用jquery对象修改的文本‘);

//或者$(‘#box‘).text(‘用jquery对象修改的文本‘);

//js执行完毕的结果 <div id="box">用jQuery对象修改的文本</div>