文章目录
1、jQuery 介绍
什么是 jQuery ?
jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想!!!
它的核心思想是 write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery。
jQuery好处!!!
jQuery 是免费、开源的,jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能
2、jQuery 的初体验!!!
需求:使用 jQuery 给一个按钮绑定单击事件?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
// btnObj.onclick = function () {
// alert("js 原生的单击事件");
// }
// }
$(function () { // 表示页面加载完成之后,相当window.onload = function () {}
var $btnObj = $("#btnId"); // 表示按id 查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert("jQuery 的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
常见问题?
1、使用jQuery 一定要引入jQuery 库吗? 答案: 是,必须
2、jQuery 中的$到底是什么? 答案: 它是一个函数
3、怎么为按钮添加点击响应函数的? 答案:
1、使用jQuery 查询到标签对象
2、使用标签对象.click( function(){} );
3、jQuery 核心函数
$ 是jQuery 的核心函数,能完成jQuery 的很多功能。 ( ) 就 是 调 用 ()就是调用 ()就是调用这个函数
4、jQuery 对象和dom 对象区分
4.1、什么是jQuery 对象,什么是dom 对象
Dom 对象
-
通过getElementById()查询出来的标签对象是Dom 对象
-
通过getElementsByName()查询出来的标签对象是Dom 对象
-
通过getElementsByTagName()查询出来的标签对象是Dom 对象
-
通过createElement() 方法创建的对象,是Dom 对象
DOM 对象Alert 出来的效果是:[object HTML 标签名Element]
jQuery 对象
-
通过JQuery 提供的API 创建的对象,是JQuery 对象
-
通过JQuery 包装的Dom 对象,也是JQuery 对象
-
通过JQuery 提供的API 查询到的对象,是JQuery 对象
jQuery 对象Alert 出来的效果是:[object Object]
4.2、问题:jQuery 对象的本质是什么?
jQuery 对象是dom 对象的数组+ jQuery 提供的一系列功能函数。
4.3、jQuery 对象和Dom 对象使用区别
- jQuery 对象不能使用DOM 对象的属性和方法
- DOM 对象也不能使用jQuery 对象的属性和方法
4.4、Dom 对象和jQuery 对象互转
1、dom 对象转化为jQuery 对象(重点)*
1、先有DOM 对象
2、$( DOM 对象) 就可以转换成为jQuery 对象
2、jQuery 对象转为dom 对象(重点)*
1、先有jQuery 对象
2、jQuery 对象[下标]取出相应的DOM 对象