目录
本质:js库,有插件
功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
使用:下载JQ或者通过CDN引用
与CSS相同,建议将JQ函数放到一个单独的文件中,然后通过url引用,易于维护代码
<head>
<script src='url'></script>
语法:
1.基本逻辑:query→action
2.基础语法:$(selector).action()
$定义符号,selector选择器,参考CSS选择器
3.JQ函数位于一个document ready函数中 目的是使文档加载完全之后再执行JQ函数
以下两种写法相同
$(document).ready(function(){
//JQ代码
});
$(function(){
});
4.JQ选择器
①以$开头,即$("")
②包括CSS选择器(元素选择器,ID选择器,.class选择器,属性选择器),以及JQ自定义的选择器
5.JQ事件
①常见的dom事件
②语法
$(“p”).click();
//使用元素选择器,点击事件
$(“P”).click(function(){
//点击动作之后执行的的代码
});
③常见的JQ事件方法
$("p").click(function(){
$(this).hide()});
//点击后调用函数
//事件后调用多个函数
//hover()方法用于模拟光标悬停事件。
//当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
④回调函数
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
例子演示了带有 speed 参数的 hide() 方法,并使用回调函数
⑤JQ效果
各种方法
fadeIn,fadeOut,fadeToggle,fadeTo
注意方法的大小写一定要写正确,不然失效