贺佳磊_20210119贺佳磊

知识点总结

1、eg:图片翻转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片翻转</title>
        <style type="text/css">
            .box {
                width: 155px;
                height: 155px;
                overflow: hidden;
            }
            .flash {
                position: relative;
                top: 0px;
                transition: all 1s linear;
            }
            img {
                width: 100%;
                float: left;
                height: 155px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="flash" onmouseover="stop()" onmouseout="start()">
                <img src="img/0.jpg" />
                <img src="img/1.jpg" />
                <img src="img/2.jpg" />
            </div>
        </div>
        <button type="button" onclick="qian()">上一页</button>
        <button type="button" onclick="hou()">下一页</button>
        <script type="text/javascript">
            var box = document.querySelector(".box");
            var flash = document.querySelector(".flash");
            var imgs = document.querySelectorAll(".flash img");
            var t = 0;
            var height = box.offsetHeight;
            var max = height*imgs.length;
            var timer;
            tesk();
            function tesk(){
                timer=setInterval('down()', 2000);
            }
            function down(){
                t = t - height;
                if (Math.abs(t) >= max) {
                    t = 0;
                    flash.style.transition = "0s";
                }else{
                    flash.style.transition = "1s";
                }
                flash.style.top = t + "px";
            }
            function up(){
                if (Math.abs(t) == 0) {
                    t = -max+155;
                    flash.style.transition = "0s";
                }else{
                    t=t+height;
                    flash.style.transition = "1s";
                }
                flash.style.top = t + "px";
            }
            function stop(){
                clearInterval(timer);
            }
            function start(){
                tesk();
            }
            function qian(){
                clearInterval(timer);
                up();
            }
            function hou(){
                clearInterval(timer);
                down();
                tesk();
            }
        </script>
    </body>
</html>

2、抽奖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>抽奖</title>
        <style type="text/css">
            #box{
                float: left;
            }
            #small-box{
                width: 200px;
                height: 200px;
                
            }
            #small-box,#big-box img{
                width: 100%;
                height: 100%;
            }
            #big-box{
                width: 400px;
                height: 400px;
                border: 1px solid;
                margin: 0 auto;
            }
            .img2{
                transition: 1s;
                opacity: 0;;
            }
        </style>
    </head>
    <body>
        <div id="box">
        <div id="small-box">
            <img src="img/0.jpg" class="img1"/>
        </div>      
        <button onclick="start()" id="start" >开始</button>
        <button onclick="stop()" id="stop" disabled="disabled">暂停</button>
        </div>
        <div id="big-box">
            <img src="img/0.jpg"  class="img2"/>
        </div>      
        <script type="text/javascript"> 
                var imgs=[
                "img/0.jpg",
                "img/1.jpg",
                "img/2.jpg",
                ];
            var timer;
            var img=document.querySelector(".img1");
            var kaishi=document.querySelector("#start")
            var zanting=document.querySelector("#stop")
            var bigimg=document.querySelector(".img2");
            function start(){
                bigimg.style.opacity = 0;
                timer=setInterval(function(){
                    kaishi.disabled=true;
                    zanting.disabled=false;
                    var index = Math.floor(Math.random() * 3);
                    img.src=imgs[index];
                },100)
            }
            function stop(){
                kaishi.disabled=false;
                zanting.disabled=true;
                clearInterval(timer);   
                bigimg.src=img.src;
                bigimg.style.opacity = 1;
                }
            
        </script>
    </body>
</html>

3、JQuery

(1)简介、概述、自定义JS框架
(2)jQuery与JS区别
  1. ###### jQuery对象与js对象相互转换

js --> jq

$(js对象) 或 jQuery(js对象)

jq --> js

jq对象[索引] 或 jq对象.get(索引)

注意:jq对象本质上是js数组

  1. ###### 页面加载事件

js

window.onload=function(){}

jq

$(function(){})

$(document).ready(function(){})

区别

js:只能定义一次,如果定义了多次,后加载的会覆盖先加载的

jq:可以定义多次

  1. ###### 事件绑定

js

js对象.onclick=function(){}

jq

jq对象.click(function(){}) 回调函数

  1. ###### css样式设置:通过对象直接修改

js

js对象.style.样式名=样式值

jq

jq对象.css('样式名','样式值')

jq对象.addClass()

样式名:驼峰式,css横杠 都支持

(3)jQuery选择器

基本选择器、层级选择器、属性选择器、基本过滤选择器、表单过滤选择器、

4、jQuery的DOM操作

内容操作、属性操作、css样式操作、文档CRUD操作

5、综合案例

eg:表格隔行换色
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格隔行换色</title>
        <style type="text/css">
            table{
                margin: 200px auto;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th>姓名</th>
                <th>年龄</th>             
            </tr>
            <tr>
                <td>哈哈</td>
                <td>3</td>              
            </tr>
            <tr>
                <td>嘿嘿</td>
                <td>5</td>              
            </tr>
            <tr>
                <td>呵呵</td>
                <td>7</td>              
            </tr>       
        </table>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script>        
            $(function(){
                $('tr:gt(0):even').css('background-color','lightblue');
                $('tr:gt(0):odd').css('background-color','lightgreen');
            })
        </script>
    </body>
</html>

eg: 复选框全选全不选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复选框全选全不选</title>
        <script src="js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="checkbox" name="goods"/>苹果
        <input type="checkbox" name="goods"/>香蕉
        <input type="checkbox" name="goods"/>橘子
        <input type="checkbox" name="goods"/>葡萄
        <hr />
        <input type="checkbox" id="check"/>全选/全不选
        <script>
            $(function(){
                $('#check').click(function(){
                    $('input[name="goods"]').prop('checked',$(this).prop('checked'));
                    })
            })
        </script>
    </body>
</html>

心得体会

又是脑子懵懵的一天,早上老师讲了剩下的JavaScript知识,做了几个例子,下午开始讲jQuery,完全没有接触过jQuery的我一下午像听天书,脑子乱乱的,学的很吃力,语法啥的都不知道,自己知道要实现怎样的效果,但就是不会自己写代码,太生了。唉,还是加油吧!

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1