回炉重造JQuery 入门教程
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了回炉重造JQuery 入门教程相关的知识，希望对你有一定的参考价值。
jQuery的介绍
学习目标
- 能够知道JQuery的作用及优点
1. jQuery的定义
jQuery是对javascript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
2. jQuery的作用
jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。
3. jQuery的优点
- jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
- jQuery简化了 JavaScript 编程，代码编写更加简单。
4. 小结
- jQuery是一个免费、开源的JavaScript函数库
- jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
- jQuery的优点就是兼容主流浏览器，代码编写更加简单。
jQuery的用法
学习目标
- 能够知道jQuery的引入方式
- 能够说出两种jQuery入口函数的写法
1. jQuery的引入
<script src="js/jquery-1.12.4.min.js"></script>
2. jQuery的入口函数
我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。
入口函数示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function()
var oDiv = document.getElementById('div01');
alert('原生就是获取的div：' + oDiv);
;
$(document).ready(function()
var $div = $('#div01');
alert('jquery获取的div：' + $div);
);
</script>
<div id="div01">这是一个div</div>
入口函数的简写示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 原生js写法
window.onload = function()
var oDiv = document.getElementById('div01');
alert('原生就是获取的div：' + oDiv);
;
/*
$(document).ready(function()
var $div = $('#div01');
alert('jquery获取的div：' + $div);
);
*/
// 上面ready的写法可以简写成下面的形式：
$(function()
var $div = $('#div01');
alert('jquery获取的div：' + $div);
);
</script>
<div id="div01">这是一个div</div>
3. 完整代码
<!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>
<!-- 导入jquery对应的js文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 使用jquery代码需要重新开一个script标签 -->
<script>
// 原生js写法
window.onload = function()
// 当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
var oDiv = document.getElementById("div1");
alert(oDiv);
;
// $符号就是jquery的象征
// $ 本质是就是函数，只不过这个函数名($)
// $(document).ready(function()
// // 获取标签和css样式匹配标签的规则一样
// // 以后使用jquery，变量名都要以$符号开头
// var $div = $("#div1");
// alert($div)
// );
// jquery的简写方式
$(function()
var $div = $("#div1");
alert($div)
)
// ready 等待页面标签加载完成以后就执行ready事件， 不会等待资源数据加载完成
</script>
</head>
<body>
<div id="div1">哈哈</div>
<img src="http://img5.imgtn.bdimg.com/it/u=2720625662,4207476265&fm=26&gp=0.jpg" alt="">
</body>
</html>
4. 小结
-
引入jQuery
-
获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快
-
jQuery入口函数有两种写法:
// 完整写法
$(document).ready(function()
...
);
// 简化写法
$(function()
...
);
- $符号就是jquery的象征
- $ 本质是就是函数，只不过这个函数名($)
$(document).ready(function()
// 获取标签和css样式匹配标签的规则一样
// 以后使用jquery，变量名都要以$符号开头
var $div = $("#div1");
alert($div)
- ready 等待页面标签加载完成以后就执行ready事件， 不会等待资源数据加载完成
加油!
感谢!
努力!
以上是关于回炉重造JQuery 入门教程的主要内容，如果未能解决你的问题，请参考以下文章