jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
什么是jQuery?
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。(百度百科)
jQuery只是一个 jquery-xxx.js 文件,但你会看到有compressed(已压缩)和uncompressed(未压缩)两种版本,使用时完全一样,但如果你想深入研究jQuery源码,那就用uncompressed版本。
使用jQuery只需要在页面的 head 引入jQuery文件即可:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>-->
<!--导入jquery-->
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<!--
公式: $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
公式: $(selector).action()
美元符号定义 jQuery
选择符(selector)“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
选择器
选择器是jQuery的核心。
为什么jQuery要发明选择器?回顾一下DOM操作经常使用的代码:
<script>
//原生js, 选择器少,麻烦,不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器他全部能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
</script>
jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。
事件
鼠标事件,键盘事件,其他事件
鼠标事件
click: 鼠标单击时触发; dblclick:鼠标双击时触发; mouseenter:鼠标进入时触发; mouseleave:鼠标移出时触发; mousemove:鼠标在DOM内部移动时触发; hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上,通常是 和 。 keydown:键盘按下时触发; keyup:键盘松开时触发; keypress:按一次键后触发。
其他事件
focus:当DOM获得焦点时触发; blur:当DOM失去焦点时触发; change:当 、 或 的内容改变时 触发; submit:当 提交时触发; ready:当页面被载入并且DOM树完成初始化后触发。
鼠标事件
鼠标移动事件案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid yellowgreen;
}
</style>
</head>
<body>
<!--获得鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当前网页元素加载完毕之后,响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
});
</script>
</body>
</html>
效果:
操作DOM
修改Text和HTML
jQuery对象的 text() 和 html() 方法分别获取节点的文本和原始HTML文本,例如,如下的HTML结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name=python]').text();
$('#test-ul').html();
</script>
</body>
</html>
分别获取文本和HTML:
$('#test-ul li[name=python]').text();
$('#test-ul').html();
设置文本或HTML:
$('#test-ul li[name=python]').text('hello,jQuery');
$('#test-ul').html('<strong>123</strong>');
文本操作(获取和设置)效果图:
HTML操作(获取和设置)效果图:
修改CSS
$('#test-ul li[name=python]').css("color","red");
显示和隐藏DOM
要隐藏一个DOM,我们可以设置CSS的 display 属性为 none ,利用 css() 方法就可以实现。不过,要显示这个DOM就需要恢复原有的 display 属性,这就得先记下来原有的 display 属性到底是 block 还是 inline 还是别的值。
显示和隐藏DOM元素使用非常普遍,jQuery直接提供 show() 和 hide() 方法,我们不用关心它是如何修改 display 属性的,总之它能正常工作:
$('#test-ul li[name=python]').show();//显示
$('#test-ul li[name=python]').hide();//隐藏
隐藏DOM节点并未改变DOM树的结构,它只影响DOM节点的显示。这和删除DOM节点是不同的。