Mirror王宇阳 by
jQuery语法是通过选取HTML元素,并对选取的元素进行操作
所有jQuery语句用“$”符号开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击消失</p>
<p>点击消失</p>
<script src="jq/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){ //固定的jQ开头
$("p").click(function(){ // 选取p标签,并绑定clisk事件
$(this).hide(); //事件触发使用hide()方法(隐藏当前标签属性)
})
})
</script>
</body>
</html>
jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档
// jQuery入口函数
$(document).ready(function(){
//jQuery代码
});
/*******************************/
$(function(){
//jQuery代码
});
jQuery的选择器语法格式和CSS的调用方法一样的哦!
选择器允许基于元素的id、class、type、属性、属性值等选择方法来找到指定的HTML元素
|Event 函数 |绑定函数至 | |$(document).ready(function) |将函数绑定到文档的就绪事件(当文档完成加载时) | |$(selector).click(function) |触发或将函数绑定到被选元素的点击事件 | |$(selector).dblclick(function) |触发或将函数绑定到被选元素的双击事件 | |$(selector).focus(function) |触发或将函数绑定到被选元素的获得焦点事件 | |$(selector).mouseover(function)|触发或将函数绑定到被选元素的鼠标悬停事件 |
参考:
|方法 |描述 | |bind() |向匹配元素附加一个或更多事件处理器 | |blur() |触发、或将函数绑定到指定元素的 blur 事件 | |change() |触发、或将函数绑定到指定元素的 change 事件 | |click() |触发、或将函数绑定到指定元素的 click 事件 | |dblclick() |触发、或将函数绑定到指定元素的 double click 事件 | |delegate() |向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |die() |移除所有通过 live() 函数添加的事件处理程序。 | |error() |触发、或将函数绑定到指定元素的 error 事件 | |event.isDefaultPrevented() |返回 event 对象上是否调用了 event.preventDefault()。 | |event.pageX |相对于文档左边缘的鼠标位置。 | |event.pageY |相对于文档上边缘的鼠标位置。 | |event.preventDefault() |阻止事件的默认动作。 | |event.result |包含由被指定事件触发的事件处理器返回的最后一个值。 | |event.target |触发该事件的 DOM 元素。 | |event.timeStamp |该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 | |event.type |描述事件的类型。 | |event.which |指示按了哪个键或按钮。 | |focus() |触发、或将函数绑定到指定元素的 focus 事件 | |keydown() |触发、或将函数绑定到指定元素的 key down 事件 | |keypress() |触发、或将函数绑定到指定元素的 key press 事件 | |keyup() |触发、或将函数绑定到指定元素的 key up 事件 | |live() |为当前或未来的匹配元素添加一个或多个事件处理器 | |load() |触发、或将函数绑定到指定元素的 load 事件 | |mousedown() |触发、或将函数绑定到指定元素的 mouse down 事件 | |mouseenter() |触发、或将函数绑定到指定元素的 mouse enter 事件 | |mouseleave() |触发、或将函数绑定到指定元素的 mouse leave 事件 | |mousemove() |触发、或将函数绑定到指定元素的 mouse move 事件 | |mouseout() |触发、或将函数绑定到指定元素的 mouse out 事件 | |mouseover() |触发、或将函数绑定到指定元素的 mouse over 事件 | |mouseup() |触发、或将函数绑定到指定元素的 mouse up 事件 | |one() |向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 | |ready() |文档就绪事件(当 HTML 文档就绪可用时) | |resize() |触发、或将函数绑定到指定元素的 resize 事件 | |scroll() |触发、或将函数绑定到指定元素的 scroll 事件 | |select() |触发、或将函数绑定到指定元素的 select 事件 | |submit() |触发、或将函数绑定到指定元素的 submit 事件 | |toggle() |绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 | |trigger() |所有匹配元素的指定事件 | |triggerHandler() |第一个被匹配元素的指定事件 | |unbind() |从匹配元素移除一个被添加的事件处理器 | |undelegate() |从匹配元素移除一个被添加的事件处理器,现在或将来 | |unload() |触发、或将函数绑定到指定元素的 unload 事件 |
:first
:选取第一个元素
:last
:选取最后一个元素
$(document).ready(function(){
$("div:lt(4)").addClass("myClass");// 除最后三个元素以外添加myClass
$("div:not(.green,.gray)").addClass("myClass"); //除了green和gay以外的元素添加myClass
$("div:gt(3)").addClass("myClass");//给最后三个元素添加myClass
$("div:even").addClass("myClass");//偶数索引添加myClass
$("div:odd").addClass("myClass");// 奇数索引添加没有Class
$("div:eq(3)").addClass("myClass");//给指定索引添加myClass
$("div:first").addClass("myClass");//第一个标签
$("div:last").addClass("myClass");//最后一个标签
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hide()/show()</title>
</head>
<body>
<div id="demo">
<input type="button" id="hide" value="隐藏" />
<input type="button" id="show" value="显示" />
<div id="a1" style=
"color: #000;
background-color: #66FF66;
width: 100px;
height: 100px;
margin-top: 20px;
text-align: center;">
演示块
</div>
</div>
<script src="jq/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#hide").click(function(){
// 隐藏
$("#a1").hide();
})
$("#show").click(function(){
//显示
$("#a1").show();
})
})
</script>
</body>
</html>
<!-- hide/show()语法原型
$().hide(speed,callback);
$().show(speed,callback);
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
$("#toggle").click(function(){
// toggle开关
$("#a1").toggle();
});
<!--
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
$().fadeIn(speed,callback);
<!--
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
$().fadeOut(speed,callback);
<!--
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
$().fadeToggle(speed,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
$().fadeTo(speed,opacity,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
opacity:设置给定的不透明度(0~1)
callback:完成执行后调用的函数名称
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
<script src="jq/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo">
<input type="button" id="fadeIn" value="fadeIn" />
<input type="button" id="fadeOut" value="fadeOut" />
<input type="button" id="fadeToggle" value="fadeToggle" />
<input type="button" id="fadeTo" value="fadeTo" />
<br>
<div id="a1" style="
background-color: #5555FF;
width: 300px;
height: 100px;
margin-top: 20px;
">
</div>
<div id="info" style="display: none;">
已隐藏
</div>
</div>
<script>
function info(){
$("#info").toggle();
}
$(function(){
$("#fadeIn").click(function(){
$("#a1").fadeIn("slow",info());
// slow:慢速的
// fast:快速的
});
$("#fadeOut").click(function(){
$("#a1").fadeOut("slow",info());
});
$("#fadeToggle").click(function(){
$("#a1").fadeToggle("slow",info());
})
$("#fadeTo").click(function(){
// 设置隐藏不透明度(通俗的讲就是颜色变淡并不是完全淡出)
$("#a1").fadeTo("slow",0.5);
})
})
</script>
</body>
</html>
$().slideDown(speed,callback);
<!--
speed:slow\fast\毫秒值
callback:完成动作后执行的函数名称
-->
$().slideUp(speed,callback);
<!--
speed:slow\fast\毫秒值
callback:完成动作后执行的函数名称
-->
$().slideToggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideDown()|slideUp()|slideToggle()</title>
<script src="jq/jquery-3.4.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#Down,#Up,#Toggle{
width: 60px;
height: 20px;
color: #000000;
font-size: 10px;
text-align: center;
float: left;
cursor: pointer;
}
#Down{background-color: #5555FF;}
#Toggle{background-color: #FCFF9F;}
#Up{background-color: #66FF66;}
#slide{
clear: both;
background-color: #CCCCCC;
width: 180px;
height: 100px;
border-top: #FF0000;
text-align: center;
position: relative;
}
#demo{margin: 10px 0px 0px 10px;}
</style>
</head>
<body>
<div id="demo">
<div id="Down">向下滑动</div>
<div id="Toggle">滑动切换</div>
<div id="Up">向上滑动</div>
<div id="slide">
</div>
</div>
<script>
$(function(){
$("#Down").click(function(){
$("#slide").slideDown();
})
$("#Up").click(function(){
$("#slide").slideUp();
})
$("#Toggle").click(function(){
$("#slide").slideToggle();
})
})
</script>
</body>
</html>
$().animate({css},speed,callback);
<!--
{css}:定义动画的css属性
(支持多个同时、支持相对值[+=/-=]、支持hide,toggle…等预定义值)
支持‘队列’式的动画(即多个animate()组成一串(队列)动画)
speed:slow/fast/毫秒值
callback:执行完成调用函数
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate()动画</title>
<script src="jq/jquery-3.4.1.min.js"></script>
<style type="text/css">
#demo{
margin: 10px;
width: 100px;
height: 100px;
background-color: #5555FF;
position: relative;
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
$(function(){
$("#demo").animate({
left:'300px',
width:'+=150px',
height:'+=150px',
// 支持多个样式的组合的动画
// 支持相对值
},2000);//支持延迟
$("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
$("#demo").click(function(){
$("#demo").animate({top:'100px'},1000);
$("#demo").animate({left:'100px'},1000);
$("#demo").animate({top:'0px'});
$("#demo").animate({left:'0px'});
// 支持队列组合的动画动作
})
})
</script>
</body>
</html>
$().stop(stopAll,goToEnd);
<!--
stopAll:是否清除动画队列 默认false
goToEnd:是否立即停止动画 默认false
默认情况下,stop()会清除被选中的元素的当前动画
-->
// parents(*)/parentsUntil(*):两个方法在这里均可选一个参数接收
常常利用:调用一个重复的代码块,例如网页的导航、版本块等…… 由此可以大大的减少代码量的编写工作,模块化的团队开发应该常用
$().load(URL,data,callback);
<!--
URL:加载的数据文件位置uRL
data:与URL加载请求一起发送的字符串键/值对集合
callback:执行完毕后调用的函数
- responseTxt : 调用成功的结果
- statusTXT : 调用的状态
- xhr : XMLHttpRequest对象
-->
$.get(URL , callback);
<!--
URL:加载的uRL
callback:执行完毕后调用的函数
-->
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});