知识点总结

JavaScript

1.抽奖图片

<script type="text/javascript"> 
            var pics=[
                "img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg",
                "img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg",
            ];
            var a=document.querySelector("#small-pic");
            var c=document.querySelector("#big-pic");
            var d=document.querySelector("#begin");
            var e=document.querySelector("#out");
            var timer;
            function start(){
                timer=setInterval(function(){
                    begin.disabled=true;
                    out.disabled=false;
                    //b取到0~9（如果取值0~2，可以是Math.floor(Math.random()*3)，以此类推）
                    var b=Math.floor(Math.random()*10);
                    a.src=pics[b];
                },100);
            }
            function stop(){
                clearInterval(timer);
                begin.disabled=false;
                out.disabled=true;
                c.src=a.src;
            }
        </script>

总结：

1.1disabled属性：disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止

1.2Math.floor() 返回小于或等于一个给定数字的最大整数。注：可以理解 **Math.floor()**为向下取整。

1.3Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1）

2.页面文字的复制

<script>
                // 添加 copy 事件
                document.oncopy = myCopy;
                
                var normal_title = document.title;
                document.addEventListener("visibilitychange",function(){
                    if (document.visibilityState == 'hidden') {
                        normal_title = document.title;
                        document.title = "别走啊...o(╥﹏╥)o";
                    } else{
                        document.title = normal_title;
                    }
                });
                
                function myCopy(){
                    // 获取选中的内容
                    //toString()转换为字符串
                    var select = document.getSelection().toString();
                    // 修改选中内容
                    var content = select + " ---作者赠送: 只为遇见你" ;
                    
                    // 创建一个元素
                    var div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.left = "-9999999px";
                    // 设置元素的内容
                    div.innerHTML = content;
                    // 添加到网页中去
                    document.body.appendChild(div);
                    
                    // 添加到选中内容中去
                    document.getSelection().selectAllChildren(div);
                    
                    // 删除 div 
                    setTimeout(function(){
                        document.body.removeChild(div);
                    },100);
                }
            </script>

总结：

2.1 visibilitychange 页面可见性改变事件

document.visibilityState属性，目前有四个可能的值：

• visible : 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。
• hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。
• prerender : 网页内容被预渲染并且用户不可见。
• unloaded : 如果文档被卸载，那么这个值将被返回。

2.2 document.getSelection() 该方法的功能等价于 window.getSelection()方法；

​ 其返回一个 Selection 对象，表示文档中当前被选择的文本。

2.3 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

2.4 selectAllChildren( )把指定元素的所有子元素设为选中区域，并取消之前的选中区域

2.5 removeChild() 方法指定元素的某个指定的子节点。以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

jQuery

1.基本概念

1.1入门

下载

官网下载地址：http://jquery.com

jquery-3.4.1.js ：开发版本 提供良好缩进格式和注释，方便开发者阅读

jquery-3.4.1.min.js ：生产版本 将代码进行压缩，方便网络传输和程序解析

页面引入

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">  </script>

2.练习

<script src="jquery.js" type="text/javascript" charset="utf-8">
    </script>
    <script>
        $(function(){
            //选取0以后的偶数行
            $("tr:gt(0):even").css("backgroundColor","red");
            //选取0以后的奇数行
            $("tr:gt(0):odd").css("backgroundColor","blue");
        })
    
    </script>

总结：

2.1 :gt() 选择器 选取 index 值大于指定数字的元素。

​ index 值从 0 开始。

​ 最常见的用法：与其他选择器一起使用，选取指定组合中特定序号之后的元素

2.2 . 偶数选择器

​ 语法： :even 偶数，从 0 开始计数

​ 奇数选择器

​ 语法： :odd 奇数，从 0 开始计数

心得体会

第七次课，今天主要是jQuery的基本语法。首先解决了上次课程的作业问题，完善了作业中的小毛病。之后做了两个练习，学习了一些不会的方法。最后是jQuery的基本概念，之前没有学过，完全不会写，就做了一下课堂的练习，照着写。