Java学习-18 简洁高效的jQuery
1、jQuery是什么？
简单地说就是：
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
就像java有很多自带的库一样，jQuery帮助我们简化了编程，让我们的注意力集中在怎么使用上，而不用关心内部具体的实现。
2、怎么使用jQuery？
首先到官网上下载需要的版本，然后在HTML中导入即可使用。
导入方式样例：
<script src="./jquery-3.5.0.min.js"></script>
需要注意的是最好在一开始就导入，然后如果在body上边写js，那么和原生js一样，需要等待页面加载完毕，我们可以使用原生js的window.onload，也可以使用js的页面载入方式：
<script>
//jQuery的简洁入口
$(function(){
$("h1").css("color","green");
//获取id属性值为bid的按钮并绑定点击事件。
$("#bid").click(function(){
alert("ok");
});
});
/*
//jQuery的标准入口
$(document).ready(function(){
//获取h1标签，并设置css样式
$("h1").css("color","blue");
});
/*
//当前页面加载完成后执行
window.onload = function(){
//使用jquery编写js程序
//获取h1标签，并设置css样式
$("h1").css("color","red");
//获取id属性值为bid的按钮并绑定点击事件。
$("#bid").click(function(){
alert("ok");
});
}
*/
</script>
3、jQuery选择器
以下很多概念内容来自jQuery中文文档。
3.1、基本选择器
- #id
- element
- .class
*- selector1,selector2,selectorN
可以看到，基本上是和css的一样，所以这就是它的便捷之处了，最后一个是多选的意思，中间用“，”分割。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--基本选择器</h1>
<ul>
<li>aaa</li>
<li class="cc">bbb</li>
<li>ccc</li>
</ul>
<h2>aaaaaaaaaa</h2>
<ol>
<li class="cc">dddd</li>
<li>eeee</li>
</ol>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
// document.getElementById("hid"); //获取id值为hid元素节点
//等价于上面语句,获取id值为hid元素节点，并设置css样式
$("#hid").css("color","blue");
//document.getElementsByTagName("li"); //获取网页中所有li元素节点
//获取网页中所有li元素节点，并设置css样式
//$("li").css("color","red");
//获取class属性值为cc所有元素节点，并设置css样式
$(".cc").css("color","red");
//选择器组，统一设置指定css样式
$("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");
});
</script>
</body>
</html>
3.2、层级选择器
需要注意的是：
空格隔开的形式是包含内部的所有，即不仅仅是子节点，子节点的子节点也算
隔开的形式是直接子节点，即只包含儿子，不包含儿子的儿子之类的。
+：后边同级的第一个节点
~：后边的所有兄弟节点
代码测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--层级选择器</h1>
<ul>
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
<ol>
<li>ddddd</li>
<li>ddddd</li>
<li>ddddd</li>
</ol>
</ul>
<li>ccccc</li>
<li>ddddd</li>
<li>eeeee</li>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取ul中所有子元素节点li（包括后代节点），并设置样式
// $("ul li").css("color","red");
//获取ul中所有直接子元素节点li（包括后代节点），并设置样式
// $("ul>li").css("color","red");
//获取ul同级紧邻后面的第一个兄弟节点li，并设置样式
// $("ul+li").css("color","red");
//获取ul后面所有同级兄弟li元素节点，并设置样式
$("ul~li").css("color","red");
});
</script>
</body>
</html>
3.3、基本筛选器
- :first
- :not(selector)
- :even
- :odd
- :eq(index)
- :gt(index)
- :lang
- :last
- :lt(index)
- :header
- :animated
- :focus
- :root
- :target
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--基本筛选器</h1>
<ul>
<li>aaaaaa</li>
<li class="cc">bbbbbb</li>
<li>cccccc</li>
<li class="cc">ddddd</li>
<li>eeeee</li>
<li>ffffff</li>
</ul>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取所有li节点并设置样式
//$("li").css("color","red");
//获取第一个li节点并设置样式
//$("li:first").css("color","red");
//获取最后一个li节点并设置样式
//$("li:last").css("color","red");
//获取偶数索引号对应的所有li节点并设置样式
//$("li:even").css("color","red");
//获取奇数索引号对应的所有li节点并设置样式
//$("li:odd").css("color","red");
//获取class属性值为cc的所有li节点并设置样式
//$("li.cc").css("color","red");
//获取class属性值不为cc的所有li节点并设置样式
//$("li:not(.cc)").css("color","red");
//获取索引位置为2的li节点并设置样式
//$("li:eq(2)").css("color","red");
//获取前2个li节点并设置样式
//$("li:lt(2)").css("color","red");
//获取所有li节点并添加鼠标移入和移出事件
$("li").mouseover(function(){
$(this).animate({paddingLeft:"+=20"},800);
}).mouseout(function(){
$(this).animate({paddingLeft:"-=20"},500);
});
});
</script>
</body>
</html>
3.4、内容选择器
其中contains和has用的比较多。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--内容选择器</h1>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
$("div:contains('John')").css("color","red");
});
</script>
</body>
</html>
3.5、属性选择器
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [attrSel1][attrSel2][attrSelN]
^表示以什么开头，$表示以什么结尾，*表示包含该值，和正则表达式一样的。
属性就是标签中的那些东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--属性选择器</h1>
<form>
姓名：<input type="text" name="uname" value="zhangsan"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
邮箱：<input type="text" name="email"/><br/><br/>
电话：<input type="text" name="phone"/><br/><br/>
地址：<input type="text" name="address"/><br/><br/>
</form>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取所有含有value属性的input元素标签，并设置样式
//$("input[value]").css("border","1px solid red");
//获取name属性值为phone的input元素标签，并设置样式
//$("input[name='phone']").css("border","1px solid red");
//获取name属性值不为phone的input元素标签，并设置样式
//$("input[name!='phone']").css("border","1px solid red");
//获取name属性值是以a字符开头的所有input元素标签，并设置样式
//$("input[name^='a']").css("border","1px solid red");
//获取name属性值是以e字符结尾的所有input元素标签，并设置样式
//$("input[name$='e']").css("border","1px solid red");
//获取name属性值中含有m字符的所有input元素标签，并设置样式
$("input[name*='m']").css("border","1px solid red");
});
</script>
</body>
</html>
3.6、子元素选择器
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :nth-child
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--子元素选择器</h1>
<ul>
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>ccccccc</li>
<li>ddddddd</li>
<li>eeeeeee</li>
</ul>
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
</ul>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取每组ul中的第一个li节点并添加样式
//$("ul li:first-child").css("color","red");
//获取每组ul中的最后一个li节点并添加样式
//$("ul li:last-child").css("color","red");
//获取每组ul中的第三个li节点并添加样式
$("ul li:nth-child(3)").css("color","red");
});
</script>
</body>
</html>
3.7、表单选择器
表单对象属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--表单中选择器</h1>
<ul>
<li><input type="checkbox" name="likes[]" value="1"/> aaaaaaa</li>
<li><input type="checkbox" name="likes[]" value="2"/> bbbbbbb</li>
<li><input type="checkbox" name="likes[]" value="3"/> ccccccc</li>
<li><input type="checkbox" name="likes[]" value="4"/> ddddddd</li>
<li><input type="checkbox" name="likes[]" value="5"/> eeeeeee</li>
</ul>
<button onclick="doFun()">获取</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
function doFun(){
//获取所有多选框中选择中的元素节点
//var list = $("input[type='checkbox']:checked");
var list = $(":checkbox:checked");
alert(list.length);
//获取li元素节点（条件是里面的多选框必须选中），并设置样式
$("li:has(input:checked)").css("color","red");
}
</script>
</body>
</html>
4、jQuery属性
4.1、属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery属性操作</h1>
<a id="aid" href="http://www.baidu.com" title="百度链接">百度</a><br/><br/>
<button onclick="dofun()">更改链接属性</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
function dofun(){
var a = $("#aid");
console.log(a.attr("href")); //获取
console.log(a.prop("href")); //获取
console.log(a.attr("title"));
console.log(a.prop("title"));
a.attr("href","http://news.baidu.com"); //添加或更改
a.removeAttr("title"); //删除属性
//a.attr("aa","bb"); //添加属性
// a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性
a.prop("title","百度新闻"); //只支持HTML DOM的属性操作
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery属性操作--全选/全不选</h1>
<ul class="uu">
<li><input type="checkbox" name="likes[]" value="1"/> 苹果</li>
<li><input type="checkbox" name="likes[]" value="2"/> 橘子</li>
<li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li>
<li><input type="checkbox" name="likes[]" value="4"/> 菠萝</li>
<li><input type="checkbox" name="likes[]" value="5"/> 芒果</li>
</ul>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取按钮并绑定点击事件
$("button").click(function(){
//判断按钮上的文本，指定对应的操作
switch($(this).html()){
case "全选":
//获取所有多选框并设置选中
$("ul.uu input:checkbox").prop("checked",true);
break;
case "全不选":
$("ul.uu input:checkbox").prop("checked",false);
break;
case "反选":
$("ul.uu input:checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
break;
}
});
});
</script>
</body>
</html>
4.2、CSS类操作
toggleClass就是包括了自带判断的添加和删除，即有就删除，没有就添加，称为切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
ul,li{padding:0px;margin:0px;}
ul.uu{list-style:none;}
ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
ul.uu li:hover{background-color:#fc0;}
ul.uu li.active{background-color: #f0c;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery属性--class类操作</h1>
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>芒果</li>
</ul>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取上面所有的li节点并添加点击事件
$("ul.uu li").click(function(){
//切换class类属性
$(this).toggleClass("active");
/*
//判断当前节点li是否含有active class属性
if($(this).hasClass('active')){
//删除class类属性
$(this).removeClass("active");
}else{
//添加class类属性
$(this).addClass("active");
}
*/
});
});
</script>
</body>
</html>
4.3、HTML文本与值操作
需要注意的是html和text 的区别，它们都能获取一个标签中的文本，但是不同的是，当标签嵌套时，html取的是嵌套的标签，而text取的是文本，也就是说，text必然取的是文本，也就是浏览器上可见的那些值。
html类似于InnerHTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery属性--HTML代码/文本/值的操作</h1>
<ul>
<li class="c1"><a href="http://www.baidu.com">百度</a></li>
<li class="c2"><a href="http://www.163.com">网易</a></li>
<li class="c3"><a href="http://www.qq.com">腾讯</a></li>
<li class="c4"><a href="http://www.sina.com">新浪</a></li>
</ul>
搜索：<input type="text" name="kw" value="html"/> <button>搜索</button>
<br/><br/>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
console.log($("li.c1").html()); //类似于js中的innerHTML
console.log($("li.c2").text());
$("li.c3").html('<a href="http://www.qq.com">腾讯2</a>');
$("li.c4").text('<a>新浪2</a>');
console.log($("input[name='kw']").val());
$("input[name='kw']").val('CSS样式');
});
</script>
</body>
</html>
5、CSS样式
- CSS
- 位置
- 尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
*{padding:0px;margin:0px;}
#outer{background-color:#ddd;width:400px;height:400px;margin:50px;padding:20px;position:relative;}
#inner{background-color:#fc0;width:200px;height:200px;position:absolute;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery中的CSS样式操作</h1>
<div id="outer">
<div id="inner"></div>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取标题并设置css样式
//$("#hid").css("color","red"); //单个属性设置
$("#hid").css({"color":"green","background-color":"#ddd"});
console.log($("#hid").css("color")); //获取css属性
//获取div层的位置
var offset = $("#inner").offset();
console.log(offset.left,offset.top);
//获取偏移位置
var position = $("#inner").position();
console.log(position.left,position.top);
//获取尺寸
console.log($("#inner").width(),$("#inner").height());
$("#inner").width(300)
});
</script>
</body>
</html>
6、jQuery 对象访问
主要是each遍历和index获取第几个元素。
each遍历案例代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--节点遍历操作</h1>
<ul>
<li>2</li>
<li>1</li>
<li>10</li>
<li>18</li>
<li>8</li>
</ul>
<button>乘以2</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
$("button").click(function(){
//$("li").css("color","red");
//获取li节点并遍历执行操作
$("li").each(function(i){
//alert(i); //索引位置
$(this).html($(this).html()*2);
});
});
/*
//统一绑定点击事件
$("li").click(function(){
alert($(this).html());
});
*/
});
</script>
</body>
</html>
7、文档处理
- 内部插入
- 外部插入
- 包裹
- 替换
- 删除
- 复制
需要注意的是那些带to和不带to 的，它们的主要区别在于，带to的可以在后边跟着为这个节点添加新操作。
内部插入案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--文档处理--内部插入</h1>
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
</ul>
名称：<input type="text" name="tname"/>
<button>前添加</button>
<button>后追加</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取按钮并绑定点击事件
$("button").click(function(){
//获取输入框中的内容
var tname = $("input[name='tname']").val();
//获取上的内容判断执行对应的操作
switch($(this).html()){
case "前添加":
//$("ul.uu").prepend("<li>"+tname+"</li>");
$("<li>"+tname+"</li>").prependTo("ul.uu");
break;
case "后追加":
//$("ul.uu").append("<li>"+tname+"</li>");
$("<li>"+tname+"</li>").appendTo("ul.uu");
break;
}
});
});
</script>
</body>
</html>
外部插入演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
ul,li{padding:0px;margin:0px;}
ul.uu{list-style:none;}
ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
ul.uu li:hover{background-color:#fc0;}
ul.uu li.active{background-color: #f0c;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--文档处理--外部插入</h1>
<ul class="uu">
<li class="active">苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>芒果</li>
</ul>
名称：<input type="text" name="tname"/>
<button>前添加</button>
<button>后追加</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取所有的li节点并绑定点击事件
$("ul.uu li").click(function(){
$("ul.uu li").removeClass("active");
$(this).addClass("active");
});
//获取所有按钮并绑定点击事件
$("button").click(function(){
//获取输入框中的内容
var tname = $("input[name='tname']").val();
//获取按钮上的文本并判断执行对应操作
switch($(this).html()){
case "前添加":
//$("li.active").before("<li>"+tname+"</li>");
$("<li>"+tname+"</li>").insertBefore("li.active");
break;
case "后追加":
//$("li.active").after("<li>"+tname+"</li>");
$("<li>"+tname+"</li>")
.insertAfter("li.active")
.click(function(){
$("ul.uu li").removeClass("active");
$(this).addClass("active");
});
break;
}
});
});
</script>
</body>
</html>
外部插入和删除：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--文档处理--外部插入和删除</h1>
<form>
姓名：<input type="text" title="姓名" name="uname"/><br/><br/>
年龄：<input type="text" title="年龄" name="age"/><br/><br/>
邮箱：<input type="text" title="邮箱" name="email"/><br/><br/>
电话：<input type="text" title="电话" name="phone"/><br/><br/>
地址：<input type="text" title="地址" name="address"/><br/><br/>
</form>
<br/><br/>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取所有的输入框并绑定获得和失去焦点事件
$("input:text").focus(function(){
//获得焦点事件处理
var title = $(this).attr("title");
$("<span> 请输入正确的"+title+"信息</span>").insertAfter(this).css("color","#ddd");
}).blur(function(){
//失去焦点事件处理
$(this).next("span").remove();
});
});
</script>
</body>
</html>
删除和清空：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
ul,li{padding:0px;margin:0px;}
ul.uu{list-style:none;}
ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
ul.uu li:hover{background-color:#fc0;}
ul.uu li.active{background-color: #f0c;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--文档处理--删除操作</h1>
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>芒果</li>
</ul>
<button>删除</button>
<button>清空</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取li节点并添加选中效果
$("ul.uu li").click(function(){
$(this).toggleClass("active");
});
//获取按钮并绑定点击事件
$("button").click(function(){
//根据按钮上的文本执行对象操作
switch($(this).html()){
case "删除":
$("li.active").remove();
break;
case "清空":
$("ul.uu").empty();
break;
}
});
});
</script>
</body>
</html>
8、特效
- 基本
- 滑动
- 淡入淡出
- 自定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery特效展示</h1>
<button>显示</button>
<button>隐藏</button>
<button>切换</button><br/><br/>
<img src="./images/33.jpg" width="300"/>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取按钮并绑定点击事件
$("button").click(function(){
//判断按钮上的文本并执行对应的操作
switch($(this).html()){
case "显示":
//$("img").show("slow");
//$("img").slideDown("slow");
$("img").fadeIn("slow");
break;
case "隐藏":
//$("img").hide("slow");
//$("img").slideUp("slow");
$("img").fadeOut("slow");
break;
case "切换":
//$("img").toggle("slow");
//$("img").slideToggle("slow");
//$("img").fadeToggle("slow");
$("img").stop().toggle("slow");
break;
}
});
});
</script>
</body>
</html>
1、短信墙效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
ul,li{margin:0px;padding:0px;}
ul{width:400px;list-style:none;}
ul li{line-height:80px;margin-bottom:2px;background-color:#ddd;}
#did{width:400px;height:326px;border:1px solid #fc0;overflow:hidden;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery效果展示--短信墙特效</h1>
<div id="did">
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
<li>香蕉</li>
<li>荔枝</li>
<li>芒果</li>
</ul>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//定时每隔3秒后执行一次
setInterval(function(){
//获取ul中的最后一个li节点设置隐藏后添加到ul里面的最前面，并设置滑动显示
//$("ul.uu li:last").hide().prependTo("ul.uu").slideDown("slow");
//向上滚动展示
$("ul.uu li:first").slideUp("slow",function(){
$(this).appendTo("ul.uu").show();
});
},3000);
});
</script>
</body>
</html>
2、树形菜单：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
ul.uu{display:none;}
h4{line-height:40px;}
h4:hover{background-color:#ddd;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery效果展示--树形菜单</h1>
<h4>水果系列</h4>
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
</ul>
<h4>水果系列</h4>
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
</ul>
<h4>水果系列</h4>
<ul class="uu">
<li>苹果</li>
<li>橘子</li>
<li>哈密瓜</li>
</ul>
<br/><br/>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取上面所有的h4标题并绑定点击事件
$("h4").click(function(){
//获取当前h4紧邻的兄弟ul节点，并滑动展开显示
$(this).next("ul.uu").slideToggle("slow")
});
});
</script>
</body>
</html>
3、滑动选项卡：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
ul,li,div{margin:0px;padding:0px;}
#did .header ul{list-style:none;}
#did .header ul li{line-height:50px;width:120px;float:left;margin-right:4px;background-color:#ddd;}
#did .header ul li:hover{background-color:#fc0;}
#did .body{clear:both;width:500px;height:400px;border:1px solid #ddd;}
#did .body .cc{display:none;height:400px;}
#did .header ul li.b1,#did .body div.d1{background-color:red;}
#did .header ul li.b2,#did .body div.d2{background-color:green;}
#did .header ul li.b3,#did .body div.d3{background-color:blue;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery效果展示--选项卡</h1>
<div id="did">
<div class="header">
<ul>
<li class="b1">aaa</li>
<li class="b2">bbb</li>
<li class="b3">ccc</li>
<li>ddddd</li>
</ul>
</div>
<div class="body">
<div class="cc d1">AAA</div>
<div class="cc d2">BBB</div>
<div class="cc d3">CCC</div>
<div class="cc">DDDD</div>
</div>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取上面header头中ul里面的所有li节点，并绑定鼠标移入事件
$("#did .header ul li").mouseover(function(){
//获取事件源对象li的索引位置
var m = $(this).index();
//隐藏所有body层
$("#did .body div").hide();
//显示索引位置m对应的div层
$("#did .body div").eq(m).fadeIn("slow");
});
});
</script>
</body>
</html>
4、导航栏效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
div,ul,li,a{margin:0px;padding:0px;}
ul{list-style:none; position:absolute;}
a{text-decoration:none;display:block;width:100px;line-height:40px;}
a:hover{background-color:#fc0;}
#menu{width:100%;height:40px;line-height:40px;}
#menu ul li{width:100px;float:left;
line-height:40px;
background-color:#ddd;
text-align:center;
border-right:2px solid #fff;}
#menu ul li ul.item li{border-top:2px solid #fff;}
#menu ul li ul.item{display:none;position:relative;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--jQuery效果展示--导航栏效果</h1>
<div id="menu">
<ul>
<li><a href="#">商品展示</a>
<ul class="item">
<li><a href="#">热卖商品</a></li>
<li><a href="#">最新商品</a></li>
<li><a href="#">特价商品</a></li>
<li><a href="#">推荐商品</a></li>
</ul>
</li>
<li><a href="#">站内新闻</a>
<ul class="item">
<li><a href="#">国内新闻</a></li>
<li><a href="#">体育信息</a></li>
<li><a href="#">热点新闻</a></li>
</ul>
</li>
<li><a href="#">网站公告</a>
<ul class="item">
<li><a href="#">国内新闻</a></li>
<li><a href="#">体育信息</a></li>
<li><a href="#">热点新闻</a></li>
<li><a href="#">体育信息</a></li>
<li><a href="#">热点新闻</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul class="item">
<li><a href="#">国内新闻</a></li>
<li><a href="#">体育信息</a></li>
<li><a href="#">热点新闻</a></li>
</ul>
</li>
<li><a href="#">在线帮助</a></li>
</ul>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取所有菜单中li选项，并绑定鼠标移入和移出事件
$("#menu ul li").mouseover(function(){
//移入事件处理
//$(this).find("ul.item").show();
$("ul.item:animated").stop().hide();
$(this).find("ul.item").slideDown("slow");
}).mouseout(function(){
//移出事件处理
$(this).find("ul.item").hide();
});
});
</script>
</body>
</html>
9、事件处理
- 事件处理
- 事件切换
- 事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- focus([[data],fn])
- focusin([data],fn)
- focusout([data],fn)
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
和原生js的基本一样，不过大多数都不要on了，比如click，mouseover等
然后是 one可以绑定一个一次性事件，trigger可以激发一个事件。
1、one和trigger
基本演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
</head>
<body>
<h1 id="hid">jQuery实例--事件处理</h1>
<button onclick="dofun()">点击我</button>
<button id="bid">投票</button>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取投票按钮并绑定一次性点击事件
$("#bid").one("click",function(){
alert("投票成功！");
$(this).html("已投票");
});
});
function dofun(){
console.log("事件被点击！");
$("#hid").css("color","red");
//使用jquery程序激发一个事件
$("#bid").trigger("click");
}
</script>
</body>
</html>
2、鼠标事件
鼠标移入移出事件现在可以在一个hover里搞定，第一个函数是移入的操作，第二个是移出的操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:384px;height:240px;}
#list img{width:85px;border:2px solid #fff;margin-right:2px;}
#list img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--鼠标移入事件处理</h1>
<div id="did">
<img id="mid" src="./images/11.jpg" width="384"/>
</div>
<div id="list">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取did层并绑定鼠标的移入和移出事件
/*
$("#did").mouseover(function(){
console.log("鼠标移入。。。。");
}).mouseout(function(){
console.log("鼠标移出。。。。");
});
*/
//效果同上的代码
/*
$("#did").hover(function(){
//鼠标移入事件处理
console.log("鼠标移入111。。。。");
},function(){
//鼠标移出事件处理
console.log("鼠标移出11。。。。");
});
*/
//获取图片列表并绑定鼠标移入事件
$("#list img").mouseover(function(){
$("#mid").attr("src",$(this).attr("src"));
});
});
</script>
</body>
</html>
3、重写放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--图片的放大镜效果</h1>
<br/><br/>
<img id="mid" src="./images/33.jpg" width="384" height="240"/>
<div id="did">
<img src="./images/33.jpg"/>
</div>
<br/><br/>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取mid图片节点并绑定鼠标移入、移出和移动事件
$("#mid").mouseover(function(){
//获取被放大图片（事件源对象）的位置
var offset = $(this).offset();
//计算放大图层位置
var y = offset.top;
var x = offset.left+$(this).width()+5;
//通过css对放大图层定位，并设置可见
$("#did").css({top:y+"px",left:x+"px"}).show();
}).mouseout(function(){
//隐藏放大图层
$("#did").hide();
}).mousemove(function(e){
//输出事件位置
//console.log(e.pageX,e.pageY);
//获取当前被放大图层位置
var offset = $(this).offset();
//计算鼠标在被放大图层上的位置
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
//设置放大镜图层的滚动位置
$("#did").scrollLeft(x*5-150).scrollTop(y*5-150);
});
});
</script>
</body>
</html>
4、重写拖动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
div{margin:0px;padding:0px;}
#did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--拖动效果</h1>
<div id="did"></div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取拖动div层并绑定鼠标按下和抬起事件
$("#did").mousedown(function(e){
//设置背景颜色
$(this).css("background-color","blue");
//获取当前div层位置
var offset = $(this).offset();
//计算鼠标按在div层上的位置
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
//绑定鼠标移动事件
$(document).on("mousemove",function(en){
//定位div图层位置
$("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"});
});
}).mouseup(function(){
$(this).css("background-color","#ddd");
//取消鼠标移动事件
$(document).off("mousemove");
});
});
</script>
</body>
</html>
5、阻止事件冒泡
使用stopPropagation阻止事件冒泡，事件冒泡就是子元素的事件会触发父元素的事件，有时候这种会带来很大的问题，这样的bug也比较难以排查。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实例</title>
<style>
#outer{width:400px;height:400px;background-color: #ddd;margin:50px;padding:20px;}
#inner{width:200px;height:200px;background-color:#fc0;}
</style>
</head>
<body>
<h1 id="hid">jQuery实例--阻止事件冒泡</h1>
<div id="outer">
<div id="inner"></div>
</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
//jquery入口
$(function(){
//获取div层并绑定点击事件
$("#outer").click(function(){
console.log("outer.....");
});
$("#inner").click(function(e){
console.log("inner.....");
//阻止事件冒泡（传播）
e.stopPropagation();
});
});
</script>
</body>
</html>
10、一些小问题的总结
1、防止动画鬼畜
有时候当我们过快的移动鼠标或者点击鼠标的时候，会导致动画一直播放，不能满足我们预期的效果。此时可以使用stop来停止动画，防止鬼畜。
2、px不要忘
在写css或者通过js拼接样式的时候，千万要记住符号不要忘，比如px。
3、offset和pageX，pageY
offset是这个元素窗口相对于浏览器窗口的偏移量，并且offset永远是相对于浏览器窗口，不论是相对定位还是绝对定位，（position是相对于父窗口，默认都是相对于浏览器窗口，添加定位之后就相对于定位的父窗口）而pageX和pageY更多的是用于鼠标的相对于浏览器窗口的位置，这两者的距离不一样，如图：
4、内部插入，外部插入
内部插入是插入的子节点，而外部插入插入的是兄弟节点。
5、index和eq
index可以查找需要的第i个子元素，而eq可以帮助寻找另一个对应的index的子元素。详见选项卡案例。
11、牛刀小试
之前做的那个轮播图，用的是原生js，选择元素和绑定方法什么的比较麻烦，而且在HTML中写了很多事件，这次学习完成jQuery，怎么的也得鸟枪换炮，重写一波，顺便捋一捋常用的操作，记录一下初学者的问题。
1、代码
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/rotation.css"/>
<script src="./js/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id = "background">
<div id="images">
<img src="./images/1.jpg" alt="商品图片">
<img src="./images/2.jpg" alt="商品图片">
<img src="./images/3.jpg" alt="商品图片">
<img src="./images/4.jpg" alt="商品图片">
<img src="./images/5.jpg" alt="商品图片">
</div>
<a class="swiper-button-prev" ></a>
<a class="swiper-button-next" ></a>
<div class="swiper-pagination-bullet">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="./js/rotation.js"></script>
</html>
JS:
var number = 1;
var mytime = null;
// 获取img列表 和 li 列表
var mlist = $("#images img");
var blist = $(".swiper-pagination-bullet:first li");
// 初始第一张图片的圆点导航变化
$(blist[0]).css({"background-color":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"});
//定义函数展示对应的图片
// 还可以把当前block的关上，然后打开number的显示，不需要遍历。
function show(number){
for(var i=0; i<mlist.length; i++){
if(number == i+1){
// 显示对应图片 和 更改小圆点样式
$(mlist[i]).css("display","block");
$(blist[i]).css({"background-color":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"})
}else{
// 隐藏对应图片 和 更改小圆点样式
$(mlist[i]).css("display","none");
$(blist[i]).css({"background-color":"rgba(0,0,0,.4)","border":"2px solid slategray"})
}
}
// $(mlist[number]).show(800,function(){
// $(blist[number]).css({"backgroundColor":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"})
// });
// $("#images img:not(:eq(" + number+ "))").hide();
// $(".swiper-pagination-bullet:first li:not(:eq(" + number+ "))").css({"backgroundColor":"rgba(0,0,0,.4)","border":"2px solid slategray"});
}
// 绑定鼠标移入移出事件
$("#images").hover(function(){
// over stop
if(mytime != null){
clearInterval(mytime);
mytime = null;
}
},function(){
// out start
if(mytime == null){
mytime = setInterval(function(){
number++;
if (number > 5){number = 1}; // 这一句是因为不改的话number会在进行自动播放时变成6，因此特殊处理
show(number);
if(number>=5){
number = 0;
}
}, 3000);
}
})
// 使用trigger激发mouseout事件
$("#images").trigger("mouseout");
// 左右箭头更换图片
// 左箭头
$(".swiper-button-prev:first").click(function(){
number = number - 1;
if (number < 1){
number = 5;
}
show(number);
})
// 右箭头
$(".swiper-button-next:first").click(function(){
number = number + 1;
if (number > 1){
number = 1;
}
show(number);
})
// 给小圆点添加click事件
$(".swiper-pagination-bullet li").click(function(){
// 用index获取是第几个点击了，加1是因为默认从 0 开始
number = $(this).index() + 1;
show(number);
})
CSS:没有变化
/* 清除默认格式 */
div,img,li{margin:0px;padding:0px;}
li{list-style: none;}
/* 背景设置，第一张图片展示，其他隐藏，左右居中 */
#background{width:1226px;height:460px;position: relative;top:100px;left:50%;margin-left: -613px;}
#background #images img{display:none;}
#background #images img:first-child{display:block;width:1226px;height: 460px;}
/* 左右箭头设置 */
.swiper-button-prev, .swiper-button-next{
position: absolute;
width: 41px;
height: 69px;
overflow: hidden;
}
/* 左箭头设置 */
.swiper-button-prev{
background-image: url("../images/icon-slides.png");
background-position:-83px;
top: 195.5px;
left: 0px;
}
/* 右箭头设置 */
.swiper-button-next{
background-image: url("../images/icon-slides.png");
background-position:-123px;
top: 195.5px;
right: 0px;
}
/* 箭头的鼠标悬浮效果 */
.swiper-button-prev:hover{
background-position:0px;
}
.swiper-button-next:hover{
background-position:-41px;
}
/* 右下角圆点设置 */
.swiper-pagination-bullet{
position: absolute;
overflow: hidden;
left:85%;
top:85%;
}
/* 圆点原始形状 */
.swiper-pagination-bullet li{
float: left;
width: 6px;
height: 6px;
background-color:rgba(0,0,0,.4);
border:2px solid slategray;
border-radius: 50%;
margin:4px;
}
/* 圆点鼠标悬浮时的形状 */
.swiper-pagination-bullet li:hover{
cursor: pointer;
background-color:hsla(0,0%,100%,.4);
border:2px solid #fff(0,0%,100%,.4);
}
2、总结
1、$
$不要忘，任何的只要是元素(标签)，想要在后边进行其他操作，都要用$ 把它包裹起来。比如：
var mlist = $("#images img");
$(blist[0]).css({"background-color":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"});
我读取了一组img标签，放到了，这个mlist中，然后通过索引取值，这里也需要用$符。
而且一个重点：mlist不是Array，不是！
2、$中的选择器字符串也可以用+拼接
$(".swiper-pagination-bullet:first li:not(:eq(" + number + "))").css({"backgroundColor":"rgba(0,0,0,.4)","border":"2px solid slategray"});
这样是可以的！因为想从外面传参，不然的话直接eq（数字）就行。
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
