jQuery
JavaScript 库
JavaScript 库就是一个 JavaScript 文件,里面存放了许多函数,这些函数都是使用 JavaScript 实现的。
有很多功能函数,如动画 animate、hide、show、获取元素等。
常见的 Javascript 库:
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的 zepto
这些库都是对原生 Javacript 的封装,内部都是使用 JavaScript 实现的,我们主要学习的是 jQuery。
jQuery
主要作用:操作 DOM 。
效果:开发更简单、高效。
jQuery 是一个快速、简洁的 JavaScript 库,其设计宗旨是“write less, do more”,即倡导写更少的代码,做更多的事情。
j 就是 JavaScript;Query 查询。
意思就是查询 js,把 js 中的 DOM 操作作了封装,我们可以快速的查询使用里面的功能。
学习 jQuery 的本质:就是学习调用这些函数。
jQuery 出现的目的就是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
jQuery 的优点
- 轻量级。核心文件才几十 kb,不会影响页面的加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大大简化了 DOM 操作
- 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
- 免费、开源
jQuery 的顶级对象 $
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. $ 是jQuery的别称(另外的名字)
// $(function() {
// alert(11)
// });
jQuery(function() {
// alert(11)
// $('div').hide();
jQuery('div').hide();
});
// 2. $同时也是jQuery的 顶级对象
</script>
</body>
</html>
jQuery 对象和 DOM 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<span></span>
<script>
// 1. DOM 对象: 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); // myDiv 是DOM对象
var mySpan = document.querySelector('span'); // mySpan 是DOM对象
console.dir(myDiv);
// 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装
$('div'); // $('div')是一个jQuery 对象
$('span'); // $('span')是一个jQuery 对象
console.dir($('div'));
// 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
// myDiv.style.display = 'none';
// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
</body>
</html>
jQuery 常用 API
选择器:$("选择器")
隐式迭代:$("div").css("background", "pink");
筛选选择器:$("ul li:first").css("color", "red");
……