jQuery是一个全球最受欢迎的JavaScript代码框架，封装了常用的JavaScript代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、CSS设计和AJAX交互，兼容所有主流浏览器
1、jQuery的优点
- 精确选择页面对象
- 进行可靠的CSS样式控制
- 使DOM操作规范化
- 标准化事件控制
- 支持网页特效
- 快速通信
- 扩展JavaScript内核
2、使用jQuery
jQuery项目主要包含jQuery Core(核心库)、jQuery UI(界面库)、Sizzle(CSS选择器)、jQuery Mobile(jQuery移动版)和QUnit(测试套件)5个部分。
| 类型 | 网址 |
|---|---|
| jQuery框架官网 | https://jquery.com/ |
| jQuery项目组官网 | https://js.foundation/ |
| jQuery UI 项目主页 | https://jqueryui.com |
| jQuery Mobile 项目主页 | https://jquerymobile.com |
| Sizzle选择器引擎官网 | https://sizzlejs.com/ |
| QUnit官网 | https://qunitjs.com |
| jQuery作者个人网站 | https://johnresig.com/ |
- 在jQuery代码中，
$是jQuery的别名，如$()等效于jQuery()，也等效于$(document).ready()。jQuery()函数是jQuery库文件的接口函数，所有jQuery操作都必须从该接口函数切入。
3、jQuery对象和DOM对象的相互转换
jQuery对象和DOM对象时可以相互转换的，因为它们所操作的对象都是DOM元素，只不过jQuery对象包含了多个DOM元素，而DOM对象本身就是一个DOM元素。简单的说，jQuery对象时DOM元素的集合，也称为伪类数组，而DOM对象就是一个DOM元素
- 把jQuery对象转换成DOM对象（两种方法）
- 借助数组下标来读取jQuery对象集合中的某个DOM元素对象
- 借助jQuery对象方法，如get()方法，为get()方法传递一个下标值，即可从jQuery对象中取出一个DOM元素
- 把DOM对象转换成jQuery对象
- 对于DOM元素来说，直接把它传递给$()函数即可，jQuery会自动把它包装成jQuery对象，然后就可以自由的调用jQuery定义的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/jQuery/jQuery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// jQuery对象转DOM对象
/*
var $li = $('li'); // 返回jQuery对象
// var li = $li[0]; // 返回DOM对象
var li = $li.get(0);
alert(li.innerHTML);
*/
// DOM对象转换成jQuery对象
var li = document.getElementsByTagName('li'); // 获取所有li元素
var $li = $(li[0]); // 把第一个li元素封装成为jQuery对象
alert($li.html());
})
</script>
<title>jQuery与DOM转换</title>
</head>
<body>
<ul>
<li>故人西辞黄鹤楼</li>
<li>烟波三月下扬州</li>
<li>孤帆远影碧空尽</li>
<li>唯见长江天际流</li>
</ul>
</body>
</html>
网友评论