思维导图
jQuery是什么?
Write less,do more!
jquery是一个快速,小巧而且功能丰富的JavaScript库。
1、jQuery是一个JavaScript函数库
2、jQuery是一个轻量级“写得少,做得多”的JavaScript库
jQuery历史
John Resig – jQuery的创始人和技术领秀
2006.1.14 正式发布以jQuery发布自己的程序库
2006.8 产生了第一个稳定版本 支持css选择符,事件处理和ajax交互
jQuery的作用
1、HTML元素选取
2、HTML元素操作
3、css操作
4、事件函数
5、JavaScript特效和动画
6、DOM遍历
7、ajax
jQuery的目的
1、化大为小,化简为繁 – 简化代码,使得程序更加高效
2、主要代替繁琐的原生的JavaScript
jQuery的优势
1、轻量级
2、强大的选择器
3、出色的DOM操作及封装
4、可靠的事件处理机制
5、完善的ajax
jQuery的基本使用
常规引入
需要在head标签中引入jQuery文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
</body>
</html>
jquery官网:https://jquery.com/
$符号 – jQuery符号
jQuery将所有的功能全部封装在一个全局变量jQuery中,而它是一个合法的变量名,他是jQuery的别名。绝大多数时候,我们直接使用
如果$符号变量占用,只能使用jQuery这个变量
页面就绪函数
window.onload = function(){}
//原始格式
$(document).ready(function(){ });
//缩写形式
$().ready(function(){....});
//缩写
$(function(){});
通过ID获取一个HTML元素
JavaScript:var obj = document.getElementById("id");
jQuery:var obj = $("id");
将一个HTML元素隐藏
JavaScript:document.getElementById("id").style.display="none";
jQuery:var obj = $("id").hide();
把一个HTML元素宽度变成200px
JavaScript:document.getElementById("id").style.width="200px";
jQuery:var obj = $("id").css("width","200px");
注意点
1、HTML() 可以插入值 还可以解析html标签
2、CSS() 可以添加css样式,可以改变css样式
3、TEXT() 可以插入文本但是不可以解析标签
jQuery操作小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入门</title>
<script type="text/javascript" src="PhotoWallDemo/js/jQuery.js"></script>
<script type="text/javascript">
console.log($ === jQuery); // true
$(document).ready(function(){
$('.btn').click(function(){
$('p').slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph</p>
<button class="btn">按钮</button>
</body>
</html>