文章目录
JavaScript语言
一、jQuery
1. 概述
jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架),里面存在大量的Javascript函数。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
2. 引入jQuery
jQuery官网:https://jquery.com/ 下载,或者自己百度CDN jQuery。
<!--引入在线的cdn-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<!--官网下载的引入-->action
<script src="lib/jquery-3.4.1.js"></script>
3. jQuery公式
$(selector).action(事件函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点击这里弹出弹窗</a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
4. 选择器(selector)
css 中的选择器它全部都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器
这里可以查询:jQuery API 3.3.1 速查表
二、事件(action)
1. 鼠标事件
mousedown() //当鼠标指针移动到元素上方,并按下鼠标左键时
mouseenter() //当鼠标指针穿过(进入)被选元素时
mouseleave() //当鼠标指针离开被选元素时
mousemove() //当鼠标指针在指定的元素中移动时
mouseout() //当鼠标指针离开被选元素时
mouseover() //当鼠标指针位于元素上方时
mouseup() //当鼠标指针移动到元素上方,并松开鼠标左键时
获取移动的鼠标当前的坐标
<!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 red;
}
</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>
结果:
2. 其他事件
blur() //添加/触发失去焦点事件
change() //当元素的值改变时
click() //当单击元素时
dblclick() //当双击元素时
delegate() //向匹配元素的当前或未来的子元素添加处理程序
focus() //当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时)
keydown() //当键盘键被按下时
keypress() //当键盘键被按下时
keyup() //当键盘键松开时
...
...
三、操作DOM
1. 节点文本操作
<!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="aaa">
<li class="js">JavaScript</li>
<li name="ja">Java</li>
</ul>
<script>
$('#aaa li[name=ja]').text(); // 获得值
$('#aaa li[name=ja]').text('设置值'); // 设置值
$('#aaa').html(); // 获得值
$('#aaa').html('<strong>123</strong>'); // 设置值
</script>
</body>
</html>
2. 操作CSS
$('#aaa li[name=js]').css({"color","red"})
3. 元素的显示和隐藏
$('#aaa li[name=js]').show()
$('#aaa li[name=js]').hide()
本质 display :none;
4. 其他获得
$(window).width()
$(window).height()
//下篇再见…谢谢