jquery
2018-05-07 本文已影响8人
两分与桥
jquery 就是封装 JavaScript 的一个库，相对于 JavaScript 使用起来方便许多
下面是点击显示菜单的程序，点击菜单二，菜单一的 content 就会隐藏，虽然看起来代码很多，但是 jquery 代码就只有两行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.main{
height: 1000px;
}
.menu{
float: left;
height: 600px;
width: 30%;
background-color: cornflowerblue;
}
.content{
float: left;
height: 600px;
width: 70%;
background: gray;
}
.title{
padding-left: 25px;
background: lightgray;
height: 30px;
line-height: 30px;
}
.con{
padding-left: 30px;
margin-top: -15px;
background-color: lightblue;
margin-bottom: -15px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="main">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con">
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<p>222222</p>
<p>222222</p>
<p>222222</p>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<p>333333</p>
<p>333333</p>
<p>333333</p>
</div>
</div>
</div>
<div class="content"></div>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
function show(that) {
$(that).next().removeClass("hide"); //找到点击标签的下一个标签，
//也就是 .con 了，移除 hide，让它显示
$(that).parent().siblings().children(".con").addClass("hide");
//找到它的父标签，的兄弟标签（两个），再各自找到他们的子标签的 .con ，添加隐藏属性
}
</script>
</html>
属性操作：固有属性尽量用prop，如果是自定义的属性就用attr，
val 修改的也是固有属性
jquery 循环便利的两种方式
// 方式一
<script>
a=[11,22,33];
$.each(a,function (x,y) {
console.log(x); // 取出 0 1 2
console.log(y); // 取出 11 22 33
})
</script>
输出结果：
0
11
1
22
2
33
// 方式二
<body>
<p>libai</p>
<p>jquery</p>
<p>loop</p>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("p").each(function () {
console.log($(this).text()) // 循环出 p 的文本
})
</script>
</body>
输出结果：
libai
jquery
loop
jquery 实现全选，取消，反选的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.table{
margin-top: 20px;
margin-left: 40px;
}
.table tr td{
font-size: 20px;
padding: 6px;
}
.button{
margin-top: 20px;
margin-left: 34px;
margin-right: -10px;
width: 50px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<button class="button" onclick="show(this,true)">全选</button>
<button class="button" onclick="show(this,false)">取消</button>
<button class="button" onclick="show(this)">反选</button>
<table border="1px" class="table">
<tr>
<td><input type="checkbox"></td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>33333</td>
<td>33333</td>
</tr>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
function show(that,flag) { // flag 表示的是 true，false，or undefined
// console.log(flag);
// console.log($(that));
$(".table input:checkbox").each(function () {
f = flag;
if (flag==undefined){ // 如果 flag 是 undefined 那就反选了啊
// console.log('反选');
f = !$(this).prop("checked")
}
$(this).prop("checked",f) // 把flag的值赋给 checked
})
}
</script>
</body>
</html>
#寥寥几句 js 代码但是整个html写起来就很多了啊
clone 和 remove 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="test">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
function add(that) {
var $ele = $(that).parent().clone(); // 把触发事件的父标签复制一份
$ele.children("button").text("-"); // 把 + 号改为 -
$ele.children("button").attr("onclick","remove(this)"); // onclick 赋值 remove(this)
console.log($ele);
$(".outer").append($ele) // 添加
}
function remove(that) {
$(that).parent().remove(); // 把触发事件的标签移除
}
</script>
</body>
</html>
鼠标滑动事件，和返回按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer1{
height: 1000px;
background: lightseagreen;
}
.outer2{
height: 1000px;
background: lightblue;
}
.returnTop{
position: fixed;
right: 30px;
bottom: 30px;
width: 90px;
height: 50px;
line-height: 50px;
color: white;
background-color: gray;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer1"></div>
<div class="outer2"></div>
<div class="returnTop hide" onclick="back()">返回顶部</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
window.onscroll=function () { // 这是window自动监听的事件，滑动一段就会触发
console.log($(window).scrollTop());
if ($(window).scrollTop()>800){
$(".hide").removeClass("hide");
}
else{
$(".returnTop").addClass("hide");
}
};
function back() {
$(window).scrollTop(0); // 返回顶部
}
</script>
</body>
</html>
javascript 动态添加的标签并不能加上我们之前绑定的效果，就像下面的程序中，事先为 li 绑定的 click 事件，之后动态添加的 li 标签并没有效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<button onclick="add()">点击添加</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("ul li").click(function () {
alert(555)
});
function add() {
len = $("ul li").length;
$ele = $("<li>");
$ele.text((len+1)*111111);
$('ul').append($ele)
}
</script>
</body>
</html>
点击后来添加的标签 并没有效果。
可以用 事件委托 来解决动态添加的标签效果，就像下面的
$("ul").on("click","li",function () {
alert(3333);
});
jquery 内置了显示和隐藏的方法，
function f1() {
$("ul").show(1500) // 显示，1500是代表毫秒
}
function f2() {
$("ul").hide(1500) // 隐藏
}
function f3() {
$("ul").toggle(1500) // 切换，也就是显示变为隐藏，隐藏变为显示
}
还有一些
滑动 slideDown，slideUp，slideToggle；
淡入淡出 fadeIn， fadeOut，fadeToggle，fadeTo；
这些函数都可以绑定回调函数，在执行完动作之后调用回调函数，如下
function f2() {
$("ul").hide(1500,function () {
alert("hide")
})
最后一个内容就是为 jquery 添加 自定义方法，这个我就不贴了。
下面是练习，轮播图，有很多重复代码，不过效果看起来还是挺不错的，哈哈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.3.1.min.js"></script>
<title>Title</title>
<style>
.inner{
width: 800px;
height: 500px;
background-image: url("a/1.jpg");
}
.outer{
width: 800px;
height: 500px;
margin-top: 30px;
margin-left: 300px;
}
.button_left{
float: left;
margin-top: 230px;
background-color: grey;
width: 0;
height: 60px;
}
.button_right{
float: right;
margin-top: 230px;
background-color: grey;
width: 0;
height: 60px;
}
.title{
position: absolute;
text-align: center;
width:800px;
height: 50px;
line-height:50px;
font-size: 20px;
}
.little_rad{
float: left;
margin-left: 310px;
margin-top: -60px;
}
.little_rad ul{
list-style: none;
}
.little_rad ul li{
display: inline-block;
margin-right: 5px;
}
.little_rad ul li a{
width:20px;
height:20px;
background-color: white;
border: 1px solid red;
border-radius: 10px;
display: inline-block;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="button_left button" onclick="func_left()"></div>
<div class="button_right button" onclick="func_right()"></div>
<div class="inner"></div>
<div class="little_rad">
<ul>
<li><a href="#" onclick="f(1)"></a></li> // 这个就是下面的小圆圈了
<li><a href="#" onclick="f(2)"></a></li>
<li><a href="#" onclick="f(3)"></a></li>
<li><a href="#" onclick="f(4)"></a></li>
<li><a href="#" onclick="f(5)"></a></li>
</ul>
</div>
<div class="title">
<span>picture : </span>
<span>1</span>
<span style="margin-left: 30px">终于完成了</span>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var ret;
url_list=['a/1.jpg','a/2.jpg','a/3.jpg','a/4.jpg','a/5.jpg']
ret = setInterval(func_right,2500);
f(1);
$(".outer").mouseenter(function () { // 鼠标出现在 .outer 上触发的事件
$(".button").animate({ // 动画效果，width 从 0 变为 40
width: "40px"
},"slow");
if (ret!=undefined){ // 当定时器有值时才清除
clearInterval(ret); // 清除定时器，定时器就是自动轮流切换图片
ret=undefined;
}
});
$(".outer").mouseleave(function () {
$(".button").animate({ // 鼠标移除效果，width 从 40 变为 0
width: "0"
},"slow");
if (ret==undefined){
ret = setInterval(func_right,2500);
// 为了避免定义多余的定时器，（我们只需要一个，）要检测 ret 的值，定时器时常2500毫秒
}
});
function func_left() {
word = $(".inner").css("background-image");
// console.log(word);
// word 就是一个URL字符串，url("http://localhost:63342/begin/a/2.jpg")
var get_str = word.substr(34,7); // 截取出 a/2.jpg
for (var i in url_list){ // 遍历url_list 找出 下标（略有多余）
if (url_list[i]==get_str){
var next_pic=i;
if (next_pic==0){
next_pic=5;
}
}
}
var test = word.replace(get_str, url_list[parseInt(next_pic)-1]); // 替换字符
$(".inner").css({"background-image":test});
console.log($(".inner").css("background-image")); //显示更改之后的img url
$(".title span").eq(1).html(next_pic); //这个是图片下面显示的图片标号
f(parseInt(next_pic)); // 跳转 小圆圈的显示
}
// func_right 大部分跟 func_left 一样
function func_right() {
word = $(".inner").css("background-image");
// console.log(word);
var get_str = word.substr(34,7);
for (var i in url_list){
if (url_list[i]==get_str){
var next_pic=i;
if (next_pic==4){
next_pic=-1; // 左切换和右切换不同
}
}
}
var test = word.replace(get_str, url_list[parseInt(next_pic)+1]);
$(".inner").css({"background-image":test});
console.log($(".inner").css("background-image"));
$(".title span").eq(1).html(parseInt(next_pic)+2);
f(parseInt(next_pic)+2);
}
function f(num) { // 传入数字 更改 图片和小图标，显示文本
console.log(num);
word = $(".inner").css("background-image");
$(".inner").css("background-image",word.replace(word.substr(34,7),url_list[num-1]));
$(".little_rad ul li a").css("background-color",'white');
$(".little_rad ul li a").eq(num-1).css("background-color",'black');
$(".title span").eq(1).html(num)
}
</script>
</body>
</html>
下面这个是正版，写的非常简洁易懂，主要代码就只有两句，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.3.1.min.js"></script>
<title>Title</title>
<style>
.outer{
width: 800px;
height: 500px;
margin: 80px auto;
position: relative;
}
.outer .img li{
position: absolute;
top: 0;
right: 0;
list-style: none;
}
.num{
position: absolute;
bottom: 20px;
left: 290px;
}
.num li{
display: inline-block;
list-style: none;
width: 20px;
height: 20px;
background-color: white;
margin: 5px;
border-radius: 50%;
}
.btn{
display: none;
position: absolute;
bottom: 50%;
margin-top: -40px;
width: 30px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 40px;
background-color: lightgrey;
opacity: 0.6;
}
.left{
left:0;
}
.right{
right:0;
}
.outer:hover .btn{
display: inline-block;
}
.num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="a/1.jpg" alt=""></li>
<li><img src="a/2.jpg" alt=""></li>
<li><img src="a/3.jpg" alt=""></li>
<li><img src="a/4.jpg" alt=""></li>
<li><img src="a/5.jpg" alt=""></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="btn left"> < </div>
<div class="btn right"> > </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var len = $(".outer ul li img").length;
var i=0;
for (var j=0; j<len; j++){
$("<li>").appendTo($(".num"))
}
$(".num li").eq(0).addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i = $(this).index();
$(this).css("background","red").siblings().css("background","white");
// 把 触发事件的css该为红色，其他改为白色
$(".outer ul li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut();
// Query stop() 方法用于停止动画或效果，在它们完成之前。
// stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
// fadeIn 和 fadeOut 为淡入淡出效果
// copy 自 w3school
});
// 自动轮播
var clock = setInterval(func_right,1500);
function func_right() {
i++;
if (i==len){i=0};
$(".num li").eq(i).css("background","red").siblings().css("background","white");
$(".outer ul li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut();
}
function func_left() {
i--;
if (i==-1){i=4};
$(".num li").eq(i).css("background","red").siblings().css("background","white");
$(".outer ul li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut();
}
$(".outer").hover(function () {
clearInterval(clock);
},function () {
clock = setInterval(func_right,1500)
});
// 按钮 定播
$(".right").click(func_right);
$(".left").click(func_left);
</script>
</body>
</html>
效果图
yuan 老师的博客：http://www.cnblogs.com/yuanchenqi/articles/6070667.html
