01初体验JQuery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jquery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>>
<script>
//原生js代码固定写法
window.onload=function(){}
//Jquert代码固定写法
$(document).ready(function(){
alert("a");
});
</script>
</head>
<body>
</body>
</html>
01初体验JQuery.html
02Jquery和Js加载区别.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>>
<script>
/*
区别1:
-js会等待html页面全部加载完 包括远程图片 在执行
-jquery会等待html页面全部加载完 但包括远程图片 在执行
区别2:
js的window.οnlοad=function() 如果有多个 后面的会覆盖前面的
jquery的$(document).ready(function(){}); 如果又多个 会依次执行
* */
window.onload=function(){
alert("aa");
}
window.onload=function(){
alert("bb");
}
//Jquert代码固定写法
$(document).ready(function(){
alert("a");
});
$(document).ready(function(){
alert("b");
});
</script>
</head>
<body>
</body>
</html>
03jquery入口函数的其他写法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>>
<script>
//第一种
$(document).ready(function(){
alert("aa");
})
//第二种
jQuery(document).ready(function(){
alert("aa");
})
//第三种 企业用的最多
$(function(){
alert("aa");
})
//第四种
Jquery(function(){
alert("aa");
})
</script>
</head>
<body>
</body>
</html>
05核心函数.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
//$() 代表JQuery的核心函数
//接受一个函数
$(function(){
//接受一个字符串选择器
var $box1 = $(".box1")
var $box2 = $("#box1")
console.log($box1);
console.log($box2);
//接受一个字符串代码片段
var $p = $("<p>我是段落</p>");
$box1.append($p)
//接受一个DOM元素
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
})
</script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span> span</span>
</body>
</html>
06JQuery对象的本质.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
什么是JQuery对象?
-JQuery对象是一个伪数组
什么叫伪数组 ?
-有0-length-1的属性 并且有length属性
-->
</head>
<body>
</body>
</html>
07静态方法和实例方法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//1定义一个类
function Aclass(){
}
//2给这个类添加一个静态方法
//直接添加给类的就是静态方法
Aclass.staticMethod=function(){
alert("aa");
}
//3静态方法通过类名调用
Aclass.staticMethod();
//4给这个类添加一个实例方法
Aclass.prototype.instanceMethod = function(){
alert("bb");
}
//5 实例方法通过实例调用 就是对象调用
//创建对象
var a = new Aclass();
a.instanceMethod();
</script>
</head>
<body>
</body>
</html>
08静态方法each方法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08静态方法each方法.html</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script type="text/javascript">
//原生数组遍历方式
/*第一个参数 遍历的值
第二个参数 数组下标索引
原生数组遍历 只能遍历数组 不能遍历伪数组
*/
var arr = [1,2,3,4];
/* arr.forEach(function(value,index){
console.log(index,value)
})*/
//使用jquery遍历数组
//第一个参数 数组下标索引
//第二个参数 遍历的值
/*$.each(arr, function(index,value) {
console.log(index,value)
});*/
//jquery遍历伪数组
var obj = {0:1,1:2,2:3,3:12,length:4};
$.each(obj, function(index,value) {
console.log(index,value)
});
</script>
</head>
<body>
</body>
</html>
09静态方法map方法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script type="text/javascript">
var obj = {0:1,1:2,2:3,3:12,length:4};
var r1 = $.each(obj, function(index,value) {
console.log(index,value)
});
var r2= $.map(obj, function(value,index) {
console.log(index,value)
});
console.log(r1);
console.log(r2);
</script>
</head>
<body>
</body>
</html>
10其他静态方法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
var str =" a ";
//去掉字符串俩端空格
//-参数 :需要去掉空格的字符串
//返回去除之后的字符串
var res = $.trim(str)
console.log("---"+res+"----")
/*isWindow()
-参数 :判断是否是window对象
返回值boolean*/
/*isArray()
* -参数:判断传入对象是不是真数组
* 返回boolean
*/
/*isFunction()
* -参数 :判断是否是函数
* 返回Boolean
*/
</script>
</head>
<body>
</body>
</html>
11holdReady.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
当html所有的元素加载完毕之后 JQuery入口函数的内容就会立即执行
有些情况我们 我们不想让他立即执行 就需要一个函数
holdReady()
-参数:true 不让JQuery函数立即执行
false 让JQuery执行
-->
</head>
<body>
</body>
</html>
14JQuery内容选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
background: red;
margin-top: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
//empty: 代表既没有内容也没有子元素的
/*var $div = $("div:empty")
console.log($div);
});*/
//找有子元素或有文本内容的元素
/* var $div = $("div:parent")
console.log($div);
});*/
//contains(text) 选择包含指定文本的
var $div = $("div:contains('我是div')");
console.log($div);
});
//has(element) 选择包含指定元素的
/* var $div = $("div:has('span')");
console.log($div)
})*/
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><p></p></div>
<div><span></span></div>
</body>
</html>
15属性和属性节点.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
/*
1什么是属性
-对象身上保存的变量就是属性
2如何操作属性
-对象.属性名
-对象.属性名=值
-对象[“对象名”]=值
-对象[“对象名”]
3什么是属性节点
-<span name ="it"></span>
在标签中添加的属性就是属性节点
4如何操作属性节点
- var a = document.getElementsByTagName("span")[0];
-a.setAttribute("name","cc"); 改变属性节点
-a.getAttribute("name") 获取属性节点
5属性节点和属性有什么区别
-任何对象都有属性 只有节点有属性节点
*/
var a = document.getElementsByTagName("span")[0];
a.setAttribute("name","cc");
a.getAttribute("name")
});
</script>
</head>
<body>
<span name ="it"></span>
</body>
</html>
16-attr方法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
/*
atter(name|pro|key,val|fun)
-获取或设置属性节点的值
传一个参数代表获取属性节点的值
传俩个参数代表设置属性节点的值
*/
//无论找到多少个元素 都只会返回第一个
//console.log($("span").attr("class"));
//找到多少个设置多少个
//console.log($("span").attr("class","box"));
//删除节点属性
// console.log($("span").removeAttr("class"));
//删除多个节点属性 空格隔开
// console.log($("span").removeAttr("class name"));
});
</script>
</head>
<body>
<span class="nam1" name="it666"></span>
<span class="nam2" name="it777"></span>
</body>
</html>
17-prop方法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
/*
1prop*/
//特点和attr一样
//找到所有span的第一个
$("span").eq(0).prop("class","it666");
/*2removeProp
和attr一样
$("span").eq(0).prop("dome");
*/
/*
什么时候用prop?什么时候用attr
-返回值是boolean的时候用prop否则用attr
*/
});
</script>
</head>
<body>
<span class="nam1" name="it666"></span>
<span class="nam2" name="it777"></span>
</body>
</html>
18操作类相关方法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
}
.div2{
width: 150px;
height: 150px;
background-color: blueviolet;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
var bt = document.getElementsByTagName("button");
bt[0].onclick=function () {
// 上面定义好了几个样式 然后给节点添加class
$("div").addClass("div1")
}
bt[1].onclick=function () {
//然后给节点添加class
$("div").removeClass("div1 div2")
}
bt[2].onclick=function () {
//切换 切换就是有就删除 没有就添加
$("div").toggleClass("div1")
}
});
</script>
</head>
<body>
<div></div>
<button>添加样式</button>
<button>取消样式</button>
<button>切换样式</button>
</body>
</html>
19文本值相关操作.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
/*
1html()
-和原生innerHTML一摸一样
2text()
-和原生innerText一摸一样
3val()
-获取input的值
*/
//代码
});
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置val</button>
<button>获取val</button>
<div></div>
<input type="text">
</body>
</html>
20操作样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
//css()方法设置样式 逐个设置
$("div").css("width","50px")
$("div").css("height","50px")
$("div").css("background","red")
//css()方法设置样式 链式变成
//$("div").css("width","50px").css("height","50px").css("background","blue")
//批量设置 传一个对象
$("div").css({
width:"50px",
height:"50px",
background:"yellow"
})
//4获取样式
console.log($("div").css("width"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
22事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
//JQuery有俩种绑定事件的方式
// 1 eventName(fn)
//特点:俩个事件不会覆盖 也可以绑定不同事件
$("button").click(function () {
alert("aa")
});
$("button").click(function () {
alert("aa")
});
/*移除事件
-无参数:移除所有事件
-可以传一个参数:会移除指定类型的事件
-可以传俩个参数:会移除指定类型的指定事件
*/
$("button").off();
});
</script>
</head>
<body>
<button></button>
</body>
</html>
23事件冒泡和默认行为.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{/*紧贴页面*/
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color:blueviolet;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
/*
* 1什么是事件冒泡
* -父子元素都绑定事件之后 子元素事件触发 父元素事件也会触发
* 2如何阻止事件冒泡
* -子元素 返回 false即可
* -调用event.stopPropagation()
* 3什么是默认行为
* -a标签一点就会跳转 这就是默认事件
* 4如何阻止默认行为
* -写一个事件 并在事件中阻止冒泡
* */
$(".son").click(function () {
alert("son");
return false;
})
$(".father").click(function () {
alert("father");
})
});
</script>
</head>
<body>
<div class="father" id="father1">
<div class="son"></div>
</div>
<a href="http://baidu.com">我是百度</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
24事件的自动触发.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{/*紧贴页面*/
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color:blueviolet;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$(".son").click(function () {
alert("son");
})
$(".father").click(function () {
alert("father");
})
//方式1:为class为son的标签开启自动触a发 一进页面就执行 该方式会触发冒泡行为并且会取消默认行为
//方式2 为class为son的标签开启自动触发 一进页面就执行 该方式不会触发冒泡行为并且会取消默认行为
// $(".son").triggerHandler("click")
//我们已经知道 立即触发都会取消默认行为 如果想a标签自动触发和并且有默认行为怎么办?
// --我们在a中添加span标签 给span设置自动触发(trigger)利用冒泡 会触发a
$("span").click(function () {
alert("span")
})
$("span").trigger("click")
});
</script>
</head>
<body>
<div class="father" id="father1">
<div class="son"></div>
</div>
<a href="http://baidu.com"><span>我是百度</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
25自定义事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{/*紧贴页面*/
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color:blueviolet;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
//click mousemove 都是事件
//如何自定义事件
// 以前我们这样做 此处的click事件必须是API定义好的 所以得换一种写法
/*$(".son").click(function () {
})*/
//自定义事件必须写在On里 第二个参数是回调函数
$(".son").on("myClick",function () {
alert("a")
})
//虽然自定义了对象 单系统不知道如何才能触发 所以利用自动触发
$(".son").trigger("myClick");
});
</script>
</head>
<body>
<div class="father" id="father1">
<div class="son"></div>
</div>
<a href="http://baidu.com"><span>我是百度</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
27事件委托.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$("button").click(function () {
$("ul").append("<li>我是新增的li</li>")
})
//为li绑定点击事件 但是后加的li没有绑定 因为页面加载完才添加的li如何解决
/* $("ul>li").click(function () {
console.log($(this).html());
})*/
//利用冒泡 给父元素添加点击事件 这样子元素时候会传递给父元素
$("ul").delegate("li","click",function () {
console.log($(this).html());
})
});
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>增加一个li</button>
</body>
</html>
28鼠标移入移出事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{/*紧贴页面*/
margin: 0;
padding: 0;
}
.son{
width: 50px;
height: 50px;
background-color: red;
}
.father{
width: 111px;
height: 110px;
background-color: black;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
/* $(".son").mouseover(function () {
console.log("鼠标移入了");
})
$(".son").mouseout(function () {
console.log("鼠标移出了");
})*/
//当把鼠标移动到子元素的时候会触发父元素的鼠标移出 我们不想这样怎么办?
/* $(".father").mouseover(function () {
console.log("鼠标移入了");
})
$(".father").mouseout(function () {
console.log("鼠标移出了");
})*/
//子元素移入移出不会触发父元素
/* $(".father").mouseenter(function () {
console.log("鼠标移入了");
})
$(".father").mouseleave(function () {
console.log("鼠标移出了");
})*/
//一个方法可以同时监听移入移出
$(".father").hover(function () {
console.log("鼠标移入了");
},function () {
console.log("鼠标移出了");
})
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
29显示隐藏动画.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 500px;
display: none;
background-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$("button").eq(0).click(function () {
//$("div").css("display","block");
$("div").show(1000);
})
$("button").eq(1).click(function () {
//$("div").css("display","none");
$("div").hide(1000);
})
$("button").eq(2).click(function () {
$("div").toggle(1000);
})
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>
30对联广告.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
float: left;
position: fixed;
left: 0;
top: 200px;
}
.right{
float: right;
position: fixed;
right: 0;
top: 200px;
}
img{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
//监听网页滚动
$(window).scroll(function () {
//获取滚动偏移量
var offscroll = $("html,body").scrollTop();
console.log("a");
if(offscroll>=200){
$("img").show(1000);
}else if(offscroll<200){
$("img").hide(1000);
}
})
});
</script>
</head>
<body>
<img src="img/a.png" class="left" >
<img src="img/a.png" class="right">
</body>
</html>
31展开和收起动画.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$("button").eq(0).click(function () {
$("div").eq(0).slideDown(1000);
})
$("button").eq(1).click(function () {
$("div").eq(0).slideUp(1000);
})
$("button").eq(2).click(function () {
$("div").eq(0).slideToggle(1000);
})
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>
32折叠菜单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.nav{
/*去掉 列表前的点*/
list-style: none;
width: 300px;
margin: 100px auto;
}
.nav>li{
/*设置边框*/
border: 1px solid #000;
line-height: 35px;
border-bottom: none;
text-indent: 2em;
}
.nav>li:last-child{
border: 1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.nav>li:first-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.sub>li{
list-style: none;
background: blueviolet;
border-bottom: 1px solid white;
}
.sub>li:hover{
background: yellowgreen;
}
.sub{
display: none;
display: ;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$(".nav>li").click(function () {
//当前元素展开
$(this).children(".sub").slideDown(1000);
//其他元素关闭
//拿到其他一级菜单的叫sub儿子 并关闭
$(this).siblings().children(".sub").slideUp(1000);
})
});
</script>
</head>
<body>
<ul class="nav">
<li>一级菜单<span></span>
<ul class="sub">
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
</ul>
</li>
<li>一级菜单<span></span><ul class="sub">
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
</ul></li>
<li>一级菜单<span></span><ul class="sub">
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
</ul></li>
<li>一级菜单<span></span><ul class="sub">
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
</ul></li>
<li>一级菜单<span></span><ul class="sub">
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
</ul></li>
<li>一级菜单<span></span><ul class="sub">
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
<li class="inner">二级菜单</li>
</ul></li>
</ul>
</body>
</html>
33下拉菜单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 300px;
height: 50px;
background-color: rebeccapurple;
margin: 100px auto ;
}
.nav>li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.sub{
list-style: none;
background-color: yellowgreen;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
//1监听一级菜单移入
$(".nav>li").mouseenter(function () {
//拿到二级菜单
var $sub = $(this).children(".sub");
//停止当前正在运行的动画效果
$sub.stop();
$sub.slideDown(1000)
})
//2监听移出事件
$(".nav>li").mouseleave(function () {
var $sub = $(this).children(".sub");
//停止当前正在运行的动画效果
$sub.stop();
$sub.slideUp(1000)
})
});
</script>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单 <ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
<li>一级菜单 <ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul></li>
</ul>
</body>
</html>
34淡入淡出动画.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: rebeccapurple;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$("button").eq(0).click(function () {
$(".div").fadeIn(1000)
})
$("button").eq(1).click(function () {
$(".div").fadeOut(1000)
})
$("button").eq(2).click(function () {
$(".div").fadeToggle(1000)
})
$("button").eq(3).click(function () {
$(".div").fadeTo(1000,0.5 )
})
});
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div class="div"></div>
</body>
</html>
36弹窗广告.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
position: fixed;
right: 0;
bottom: 0;
}
.nav>span{
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
display:inline-block;
}
.nav{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script>
<script>
$(function(){
$(".nav>span").click(function () {
$(".nav").remove();
})
//让动画依次执行可以这么写 但是可读性插
/* $(".nav").slideDown(1000,function () {
$(".nav").fadeOut(1000,function () {
$(".nav").fadeIn(1000)
})
});*/
//这么写
$(".nav").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
});
</script>
</head>
<body>
<div class="nav">
<img src="img/aa.png">
<span></span>
</div>
<span></span>
</body>
</html>