JQUERY案例

电梯导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入文件 -->
    <script src="index.js"></script>
    <script src="jQuery.min.js"></script>
</head>
<style>
    *{
        list-style: none;
        padding:0;
        margin:0;
    }
.w{
width: 500px;
/* height: 1000px; */
margin:0 auto;
background: #fff;
}
h3{
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
.floor{
    margin-bottom:100px;
}
.floor img{
    width: 500px;
    height: 700px;
    margin:0 auto;
}
.dianti{
    display: none;
    /* 不能随着页面滚动而上升，采取fixed定位 */
    position: fixed;
    top: 300px;
    left: 100px;
    height: 200px;
    width: 100px;
    background-color: #fff;

}
.dianti ul li:first-child{
border-top:1px solid black ;

}
.dianti ul li{
font-size: 14px;
overflow: hidden;
line-height: 64px;
text-align: center;
color: black;
border-bottom:1px solid black ;

cursor: pointer;
}

/* 再加一个类，提高优先级，不然字体和颜色都不会生效 */
.dianti .current{
    color: #fff;
    background-color: #c81623;
    font-weight: 700;
}
#recom{
   
    margin:0 auto;
width: 500px;
height: 200px;
background-color: #c81623;
}
.footer{
    width: 500px;
    height: 400px;
    background-color: #c81623;
}
.footer h3{
    
    font-size: 30px;
    text-align: center;
    line-height: 400px;
}
.tuijian{
   
    margin:0 auto;
    background-color: aqua;
    width: 500px;
    height: 300px;
}
</style>
<body>
    <div class="tuijian"></div>
    <div  id="recom"><h3>电梯导航的使用</h3></div>
    
    <div class="w">
        <div class="floor ">
            <div class="w img1"  >
                <img src="img/水蜜桃.jpg" alt="">
            </div>
        </div>
        <div class="floor">
            <div class="w img2">
                <img src="img/水蜜桃2.jpg" alt="">

            </div>
        </div>
        <div class="floor">
            <div class="w img3">
                <img src="img/水蜜桃3.jpg" alt="">

            </div>
        </div>
         <div class="floor">
            <div class="w img4">
                <img src="img/水蜜桃4.jpg" alt="">

            </div>
        </div> 
        <div class="floor">
            <div class="w img5">
                <img src="img/水蜜桃5.jpg" alt="">

            </div> 
        </div>
        <div class="footer">
            <h3>底部</h3>
        </div>
    </div>
    <!-- 电梯导航 -->
<div class="dianti">
    <ul>
       
        <li class="current">图片一</li>
        <li>图片二</li>
        <li>图片三</li>
        <li>图片四</li>
        <li>图片五</li>

       
    </ul>
</div>
</body>
<script>
    $(function() {
    //点击li，此时不需要执行页面滚动事件里面的li的背景选择添加current
    //节流阀 互斥锁
    var flag=true;
    //到达一定位置，自动出现
    var toolTop=$("#recom").offset().top;
    toggleTool();
    function toggleTool(){
        if($(document).scrollTop()>=toolTop){
            $(".dianti").fadeIn();
        }else {
            $(".dianti").fadeOut();
        
        }
    }
   $(window).scroll(function(){
    toggleTool();
    // 页面滚动到响应区域,电梯导航也随之变化
    if(flag===true){
        $(".floor .w").each(function(i,ele) {
            if($(document).scrollTop()>=$(ele).offset().top){
                $(".dianti li").eq(i).addClass("current").siblings().removeClass("current")
            }
    
        })
    }
});
// 点击电梯导航页面可以滚动到对应区域
$(".dianti li").click(function() {
    flag=false;
//     index() 方法返回指定元素相对于其他指定元素的 index 位置。
// 这些元素可通过 jQuery 选择器或 DOM 元素来指定
    console.log($(this).index());
    //每次点击li，就需要计算页面要去往的位置
   var current= $(".floor .w").eq($(this).index()).offset().top;
//页面动画滚动效果
$("body,html").stop().animate({
    scrollTop : current,
},function() {
    flag=true;
});
$(this).addClass("current").siblings().removeClass("current")
})


})
</script>
</html>

在这里插入图片描述

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 2000px;
    }
    .top{
        margin: 0 auto;
        width: 700px;
        height: 600px;
        background-color: khaki;

    }
    .back{
        margin: 0 auto;
        width: 700px;
        height: 600px;
        background-color: pink;
       
    }
    .container{
        position: absolute;
        top:800px;
        right: 50px;
        width: 80px;
        height: 80px;
        background-color: rebeccapurple;
        font-size:30px;
        overflow: hidden;
        text-align: center;
        display: none;
    }
</style>
<body>
    <div class="top">顶部</div>
    <div class="back">中间</div>
    <div class="container">
返回顶部
    </div>
</body>
<script src="jQuery.min.js"></script>
<script>
$(function() {
    //直接赋值，刷新直接跳到指定位置
    // $(document).scrollTop(100);
    var boxTop=$(".back").offset().top;
    $(window).scroll(function() {
        // console.log("你好")
        $(document).scrollTop();
        console.log($(document).scrollTop());
        if($(document).scrollTop()>=boxTop){
            // $(".container").css("display","block");
            // $(".container").show();
            $(".container").fadeIn()
        }else {
            $(".container").fadeOut()

        }
    })
// 返回顶部功能
$(".container").click(function() {
    //不带有动画
    // $(document).scrollTop(0);
    // 动画必须是页面元素在进行操作【document不行】：
    $("body,html").stop().animate({
        scrollTop:0
    },700)

})
})
</script>
</html>

尺寸位置操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding:10px;
            border:15px solid red;
            margin:20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script src="jQuery.min.js"></script>
<script>
    $(function() {
        // 改变宽度
        // $("div").width(300);
        // $("div").css("width",400);

        // width:只测出原始盒子大小,不包括边框
        console.log($("div").width());
        // innerWidth:包含内边距
      console.log($("div").innerWidth());
    //   包含内边距和边框
    console.log($("div").outerWidth());
     //包含内外边距以及边框
     console.log($("div").outerWidth(true));
    })
   
</script>
</html>

购物车操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
      
    </style>
</head>

<body>
    <div class="father" > <input type="checkbox" checked>
    <span class="price">￥12.80</span><button class="de">-</button><input type="text" value="1" class="tex"><button class="in">+</button> <span class="price1">￥12.80</span><button class="del">删除</button>
    <!-- <span class="price">￥12.80</span><button class="de">-</button><input type="text"value="1" class="tex"><button class="in">+</button> <span class="price1">￥12.80</span><br>
    <span class="price">￥12.80</span><button class="de">-</button><input type="text"value="1" class="tex"><button class="in">+</button> <span class="price1">￥12.80</span> -->
    <div class="choose">已选择&nbsp;<span>1</span>&nbsp;件商品</div>
    <div class="sum">总价：<span>￥12.80</span>&nbsp;元</div>
</div>
</body>
<script src="jQuery.min.js"></script>
<script>
// 文本框里面的值获取使用val(),普通元素里面的值获取使用text()
$(".in").click(function() {
    var n=$(this).siblings(".tex").val();
    // console.log(n);
    n++;
    $(this).siblings(".tex").val(n);
    var price =$(this).siblings(".price").html();
    // console.log(price)
    //截取字符串
    p=price.substr(1);
// console.log(p)
$(this).siblings(".price1").html('￥'+(p*n).toFixed(2));
getSum()
})

$(".de").click(function() {
    var n=$(this).siblings(".tex").val();
    // console.log(n);
    if (n == 0) {
        return false;
    }
    n--;
    $(this).siblings(".tex").val(n);
    var price =$(this).siblings(".price").html();
    // console.log(price)
    //截取字符串
    p=price.substr(1);
// console.log(p)
$(this).siblings(".price1").html('￥'+(p*n).toFixed(2));
getSum()
})
// 用户直接修改文本框的值  不过需要离开焦点后才能触发
$(".tex").change(function() {
   var n= $(this).val();
    var price =$(this).siblings(".price").html();
    p=price.substr(1);
$(this).siblings(".price1").html('￥'+(p*n).toFixed(2));
getSum()
})
//封装一个函数，用于计算总计和总额
getSum();
function getSum(){
    var count=0;
    var money=0;
    $('.tex').each(function(i,ele) {
        count+=parseInt($(ele).val());
    });  
    $(".choose").children("span").text(count);
    $(".price1").each(function(i, ele) {
        money += parseFloat($(ele).text().substr(1));
    });
    $(".sum").children("span").text('￥'+money.toFixed(2));
}
$(".del").click(function() {
    $(this).parents(".father").remove();
})
// 选中添加背景颜色
// if($("input").prop("checked")){
//     $(".father").addClass("bc");
// }
// else {
//     $(".father").removeClass("bc");
// }
</script>
</html>

全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
      
    </style>
</head>

<body>
    <div class="father" > <input type="checkbox" checked>
    <span class="price">￥12.80</span><button class="de">-</button><input type="text" value="1" class="tex"><button class="in">+</button> <span class="price1">￥12.80</span><button class="del">删除</button>
    <!-- <span class="price">￥12.80</span><button class="de">-</button><input type="text"value="1" class="tex"><button class="in">+</button> <span class="price1">￥12.80</span><br>
    <span class="price">￥12.80</span><button class="de">-</button><input type="text"value="1" class="tex"><button class="in">+</button> <span class="price1">￥12.80</span> -->
    <div class="choose">已选择&nbsp;<span>1</span>&nbsp;件商品</div>
    <div class="sum">总价：<span>￥12.80</span>&nbsp;元</div>
</div>
</body>
<script src="jQuery.min.js"></script>
<script>
// 文本框里面的值获取使用val(),普通元素里面的值获取使用text()
$(".in").click(function() {
    var n=$(this).siblings(".tex").val();
    // console.log(n);
    n++;
    $(this).siblings(".tex").val(n);
    var price =$(this).siblings(".price").html();
    // console.log(price)
    //截取字符串
    p=price.substr(1);
// console.log(p)
$(this).siblings(".price1").html('￥'+(p*n).toFixed(2));
getSum()
})

$(".de").click(function() {
    var n=$(this).siblings(".tex").val();
    // console.log(n);
    if (n == 0) {
        return false;
    }
    n--;
    $(this).siblings(".tex").val(n);
    var price =$(this).siblings(".price").html();
    // console.log(price)
    //截取字符串
    p=price.substr(1);
// console.log(p)
$(this).siblings(".price1").html('￥'+(p*n).toFixed(2));
getSum()
})
// 用户直接修改文本框的值  不过需要离开焦点后才能触发
$(".tex").change(function() {
   var n= $(this).val();
    var price =$(this).siblings(".price").html();
    p=price.substr(1);
$(this).siblings(".price1").html('￥'+(p*n).toFixed(2));
getSum()
})
//封装一个函数，用于计算总计和总额
getSum();
function getSum(){
    var count=0;
    var money=0;
    $('.tex').each(function(i,ele) {
        count+=parseInt($(ele).val());
    });  
    $(".choose").children("span").text(count);
    $(".price1").each(function(i, ele) {
        money += parseFloat($(ele).text().substr(1));
    });
    $(".sum").children("span").text('￥'+money.toFixed(2));
}
$(".del").click(function() {
    $(this).parents(".father").remove();
})
// 选中添加背景颜色
// if($("input").prop("checked")){
//     $(".father").addClass("bc");
// }
// else {
//     $(".father").removeClass("bc");
// }
</script>
</html>

each操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
<script src="jQuery.min.js"></script>
<script >
    $(function() {
        var sum=0;
        var arr=["red","greed","yellow"]
        $("div").each(function(index,domEle) {
            // domEle是一个DOM对象，必须转化为jq对象才能进行操作
            console.log(index);
            $(domEle).css("color",arr[index]);
            sum+=parseFloat($(domEle).text());
          
        })
        console.log(sum)

        $.each(arr,function(i,ele){
            console.log(i);
            console.log(ele);
        })
    })
</script>
</html>

祖宗选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">孙子</div>
            </div>
        </div>
    </div>
</body>
<script src="jQuery.min.js"></script>
<script>
    console.log($(".four").parents(".one"));
</script>
</html>