jQuery
jQuery:.
jquery 是一个javascript库. 对javascript进行封装可以更加优雅的写js代码, 主要是通过操作html中dom
的方式进行代码编写.和设计. jquery的优点是简单.易用. 能简写很多的javascript代码.
.使用jquery可以很快速的构建前端页面.一些javascript特效.
.jquery是javascript的一个库同时也是对js更加简便操作.
jQuery的语法规律:
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。 基础语法是:$(selector).action()
$美元符号是为了定义用的是jQuery selector 是选择符,是为了查询和查找相应的HTML元素
action()是jQuery相应的元素应该执行什么样的操作
实例:
①$(this).hide()———隐藏当前鼠标点击的元素
②$("p").hide()————隐藏所有段落,即<p>---</p>之间的内容
③$(.test").hide()-——隐藏所有class="test”的段落
④$("#text"),hide()———隐藏所有id="test”的元素
jQuery常用的事件:
load:当文档加载时运行脚本
blur:当窗口失去焦点时运行脚本
focus:当窗口获得焦点时运行脚本
change:当元素改变时运行脚本
submit:当提交表单时运行脚本
keydown:当按下按键时运行脚本
keypress:当按下并松开按键时运行脚本
keyup:当松开按键时运行脚本
click:当单击鼠标时运行脚本
dblclick:当双击鼠标时运行脚本
mousedown:当按下鼠标按钮时运行脚本
mousemove:当鼠标指针移动时运行脚本
mouseout:当鼠标指针移出元素时运行脚本
mouseover:当鼠标指针移至元素之上时运行脚本
mouseup:当松开鼠标按钮时运行脚本
abort:当发生中止事件时运行脚本
jQuery常用的效果方法
$(selector).hide() – 隐藏被选的元素
$(selector).show() – 显示被选的元素
$(selector).toggle() – 对被选元素进行隐藏和显示的切换
$(selector).slideDown() -通过调整高度来滑动显示被选元素
$(selector).slideToggle() –> 对被选元素进行滑动隐藏和滑动显示的切换
$(selector).slideUp() –> 通过调整高度来滑动隐藏被选元素
$(selector).fadeIn() –> 逐渐改变被选元素的不透明度,从隐藏到可见
$(selector).fadeOut() –> 逐渐改变被选元素的不透明度,从可见到隐藏
$(selector).fadeTo() –> 把被选元素逐渐改变至给定的不透明度
$(selector).animate() – 对被选元素应用“自定义”的动画
相关代码:
重点声明:jQuery必须要到包
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box{
width:150px;
height: 150px;
background-color: rebeccapurple;
}
</style>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function change1(){
$('#box').toggle();
}
function change2(){
$('#box').slideToggle(3000,'linear',function(){
alert('Over');
});
}
function change3(){
$('#box').fadeTo("slow",0.66);
}
function change4() {
$('#box').animate({
width: '500px',
height: '500px',
},5000).animate({width:'200px'},3000)
}
</script>
</head>
<body>
<div id="box"></div>
<button type="button" onclick="change1()">改变1</button>
<button type="button" onclick="change2()">改变2</button>
<button type="button" onclick="change3()">改变3</button>
<button type="button" onclick="change4()">改变4</button>
</body>
</html>
友情提示:如果知道自己是色弱的,尽量选颜色深一点的,要不然“改变三”看不出明显的效果。