王宇凡_20210119王宇凡

知识点总结

random() 方法可返回介于 0(包含) ~ 1(不包含) 之间的一个随机数。

用随机数实现图片的抽奖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 100px;
            }
            #box1{
                margin: 0 auto;
                width: 600px;
                height: 500px;
                border: 1px solid;
            }
            .boximg{
                width: 100%;
                height: 100%;
            }
            .box1img{
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: 1s;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/1.jpg" class="boximg">
            <button id="start" onclick="start()">开始</button>
            <button id="stop" onclick="stop()" disabled="disabled">停止</button>
        </div>
        <div id="box1">
            <img src="img/1.jpg" class="box1img">
        </div>
        <script type="text/javascript">
            var imgs = [
                "img/1.jpg",
                "img/2.jpg",
                "img/3.jpg",
                "img/4.jpg",
                "img/5.jpg",
                "img/6.jpg"
            ];
            var timer ;
            var lastindex;
            var startBtn = document.querySelector("#start");
            var stopBtn = document.querySelector("#stop");
            var boximg = document.querySelector(".boximg");
            var box1img = document.querySelector(".box1img");
            function start(){
                box1img.style.opacity = 0;
                startBtn.disabled = true ;
                stopBtn.disabled = false ;
                timer = setInterval(function(){
                    var index = Math.floor(Math.random() * 6) ;
                    boximg.src = imgs[index];
                    lastindex = index ;
                },100);
            }
            function stop(){
                clearInterval(timer);
                startBtn.disabled = false ;
                stopBtn.disabled = true ;
                box1img.style.opacity = 1 ;
                box1img.src = imgs[lastindex];
            }
        </script>
    </body>
</html>

jQuery

JQuery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Ajax功能,强大的选择器功能,出色的DOM操作封装,出色的浏览器兼容性,可靠的事件处理机制,隐式迭代和链式编程操作,免费开源的库

jQuery方式监听页面的加载:

    1.函数内部的代码页面加载(HTML)完毕之后执行
    2.调用N次,会执行N次
    3.jQ监听的代码可以简写

jquery定义活动模板

$(function(){

})

css方法

第一种:$("元素名称").css(' name') 获取第一个匹配元素的样式属性。

第二种:$("元素名称").css(' name','value') 设置样式属性

第三种:是以对象的形式写多种样式

  $("").css({       
        ' name':'value',
        'backgroundColor': '#ddd',
        'fontWeight': '', 
     })

addClass方法

语法:$("p").addClass('属性名1 属性名2'); 给某个元素添加一个类名,可以是多个类名

removeClass方法

语法:语法:$("p").addClass('属性名1 属性名2'); 给某个元素删除一个类名,可以是多个类名

toggleClass方法

语法:$("元素名称").toggleClass(“class”) 如果存在类就删除,如果没有就添加一个类

获取内容和修改内容的方法 text()和html()
$("元素名称").text()  如果没有内容则获取到元素的内容,

$("元素名称").text('value') 有内容则修改该元素的内容为value

$("元素名称").html() 如果没有内容则获取到该元素的内容,

$("元素名称").html('value') 有内容则修改该元素的内容为value

区别:

一:html()操作的是innerHtml属性节点的内容

text() 操作的是innerText属性节点的内容

二:html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容

text传递参数是标签,则以文本形式展示

三:html方法没有传参,获取第一个标签的节点内容

text方法没有传参,获取所有标签的文本内容拼接在一起返回

个人心得

今天了解了Jquery的基本内容,它轻量级。jQuery非常轻巧,允许开发者使用从CSS1-CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择权。jQuery封装了大量常用的DOM操作,对发生在同一个jQuery对象上的操作,可以直接连写而无重复获取对象。开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。使各个方面的开发人员各司其职,互不干涉。有完善的文档。让平时的开发更加高效。

标签

评论


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