初始jQuery

Posted 2020-12-01 superjishere

1what

http://jquery.com/

* 一个优秀的JS函数库: write less, do more（使用了jQuery的网站超过90%，中大型WEB项目开发首选）

* 封装简化DOM操作(CRUD) / Ajax

2why

* 强大选择器: 方便快速查找DOM元素（html元素选取和操作）

* 隐式遍历(迭代): 一次操作多个元素

* 读写合一: 读数据/写数据用的是一个函数（一般传参数就是写，不传就是读）

* 链式调用: 可以通过.不断调用jQuery对象的方法

* HTML事件处理（响应用户操作）

* DOM操作(CUD)

* 样式（CSS）操作

* JS动画效果

* 浏览器兼容

* 易扩展插件

* ajax封装

3how

3.1 引入jQuery库

1）本地引入

<script type="text/javascript" src="js/jquery-1.12.3.js"></script>

2）CDN远程引入（需要有网）

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js

https://cdn.bootcss.com/jquery/1.9.0/jquery.js

3.2使用jQuery

* 使用jQuery函数: $/jQuery

* 使用jQuery对象: $xxx(执行$()返回的)

//绑定文档加载完成的监听 jQuery(function () {   var $btn2 = $(‘#btn2‘)   $btn2.click(function () { // 给btn2绑定点击监听     var username = $(‘#username‘).val()     alert(username)   }) })

3.3区别

1）区别两种JS库库文件

 *测试版与生产版(压缩版min)

开发阶段用未压缩的测试版，上线发布的时候用压缩版

2）区别两种引用JS库的方式

 服务器本地库：开发测试时使用，加重了服务器负担, 上线时一般不使用这种方式

 CDN远程库：项目上线时, 一般使用比较靠谱的CDN资源库，，减轻服务器负担

3）区别jQuery的不同版本

1.x：兼容老版本IE，文件更大

2.x：部分IE8及以下不支持，文件小, 执行效率更高

3.x：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本