Python学习 Day 047

主要内容:

1.BOM
2.jQuery
3.jQuery的选择器(获取DOM)
4.jQuery的动画介绍

1.BOM

1.1BOM介绍

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

(1)什么是BOM

BOM：Browser Object Model，浏览器对象模型。

BOM的结构图:

从上图也可以看出：

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
DOM是BOM的一部分。

window对象：

window对象是JavaScript中的顶级对象。
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时，可以省略window。

1.2 BOM 的常见内置方法和内置对象。

(1) 弹出系统对话框

alert();    //不同浏览器中的外观是不一样的
confirm();  //兼容不好
prompt();   //不推荐使用

(2)打开窗口,关闭窗口

//打开窗口
window.open(url,target)
//url:要打开的地址,   target :新窗口的位置。可以是：_blank 、_self、 _parent 父框架

(3)代码示例

    <title>Title</title>
</head>
<body>
        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
        <button>打开百度</button>
        <button onclick="window.close()">关闭</button>
        <button>关闭</button>

</body>
<script type="text/javascript">
    var oBtn = document.getElementsByTagName("button")[1];
    var closeBtn = document.getElementsByTagName("button")[3];

    oBtn.onclick =  function(){
        //在当前页中打开
        // open("https://www.baidu.com","_self");

        //打开空白页面
        open('about:blank',"_self")
    };
    closeBtn.onclick = function(){
        if (confirm("是否关闭?")){
            close()
        }
    }
</script>

1.3 location对象

(1)location对象的属性

href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议一般是http、https
search 查询字符串

location.herf 属性举例

</head>
<div> asdlfaf</div>
<body>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onclick = function (){
        //点击div时，跳转到指定链接 当前网页打开网址
        location.href =  "http://www.baidu.com"
        //  window.open("http://www.baidu.com","_blank");  //方式二
    }
</script>
</body>

5秒后自动跳转到百度。

有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：

<script>

    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

(2)location 对象方法

location.reload(): 重新加载

<script>
    console.log(2222);
    // console.log(window.location);
    setInterval(function(){
        //页面全局刷新 不建议 使用 可以用它调试
        //更希望的是 局部刷新（ajax技术 与后端交互的核心技术）
        location.reload();
    },2000)
</script>

(3)navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

userAgent：系统，浏览器)
platform：浏览器支持的系统，win/mac/linux

例子：

    console.log(navigator.userAgent);
    console.log(navigator.platform);

(4)history对象

1、后退：

history.back()
history.go(-1)：0是刷新

2、前进：

history.forward()
history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮：

1.4 client offset scroll 系列

(1)client系列

2.jQuery

(1) jQuery的介绍

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，
事件处理动画和Ajax更加简单。通过多功能性和可扩展性的结合，
jQuery改变了数百万人编写JavaScript的方式。

jquery 中 98%的都是方法
只有两个属性:
    索引
    length

(2) 为什么要使用jquery?

JavaScript书写代码的不足

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

(3)jQuery的下载

https://jquery.com/ 下载对应的jQuery
https://www.bootcdn.cn/ 通过cdn的方式引入
https://www.npmjs.com/ npm 包管理器下载(未来讲)

(4) jQuery的使用

<div id = "box" class="box"></div>
<script type="text/javascript" src="./libs/jquery-3.3.1.js"></script>

<script>
    (function(a,b){
        alert(1)
    })(1,2);
    console.log($);
    console.log(jQuery)
</script>

(5)jQuery的入口函数

    <script>
                /*
        //window.onload有事件覆盖
        window.onload = function () {
            alert(1)
        }
         window.onload = function () {
            alert(2)
        }
        */
    </script>
</head>
<body>
<script src="./libs/jquery-3.3.1.min.js"></script>
<script>
    // $(document).ready(function(){
    //     alert(1)
    // })
    // ;
    //  $(document).ready(function(){
    //     alert(2)
    // });

    // $(window).ready(function(){
    //     alert(2)
    // })
    
    $(function(){
        alert(1)
    })
</script>
</body>

小结:

//入口函数 文档加载完成之后 会调用
$(document).ready(function(){
})
//等待图片加载完成之后 才执行
$(window).ready(function(){
})
//简便写法 文档加载完成之后 会调用
$(function(){
})

3.jQuery的选择器(获取DOM)

3.1 基础选择器

    <title>Title</title>
</head>
<body>
<div class = "box" id = "wrap">
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
</div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function(){
        //jQuery的选择器(获取DOM对象 注意,它获取的是jQuery对象而不是jsDOM对象)
        $("div")[0].style.backgroundColor = "red";
        console.log($("#wrap")); //id选择器
        console.log($(".box"));  //类选择器
        console.log($("#wrap .active"));  //后代选择器
        // 获取到jQuery对象,click时间
        $("#wrap .active").click(function(){
            // console.log(this.innerText); //错误写法因为获取到的是jQuery对象而不是结束DOM对象
            // //isdom =>jQuery对象
            // console.log($(this));

            console.log($(this).text()); //点击获取jqery对象的text值
            $(this).text("haha");   //将获取当前点击的jQuery值修改
            console.log($(this).text("haha"));
        })
})

</script>
</body>

小结:

- 标签选择器 $('div')
- id选择器$('#box')
- class选择器
- 后代
- 子代
- 组合
- 交集
- 兄弟 + ~

3.2基本过滤器

    <title>Title</title>
</head>
<body>
<ul>
    <li>天龙八部</li>
    <li>射雕英雄传</li>
    <li>神雕侠侣</li>
    <li>倚天屠龙记</li>
</ul>
<input type="text">
<script src="./libs/jquery-3.3.1.js"></script>

<script>
    $(function(){
        //获取值 ,eq()的使用
        console.log($("li:eq(1)").css("color"));
        //设置单个值或者多个值
        // $("li:eq(1)").css("color","red");

        //通过字典的形式给对象设置多个值
        $("li:eq(1)").css({
            "color":"red",
            "background-color":"blue"
        });
        //属性选择器
        $("input[type='text']").css({
            backgroundColor:"yellow"
        })
    })
</script>

小结:

- eq(index) index从0开始 选取匹配的元素
- gt(index) 大于index的元素
- lt(index) 小于index的元素
- odd 奇数
- even 偶数
- first 第一个
- last 最后一个

3.3 筛选选择器

<ul>
    <li>天龙八部</li>
    <li class="item">
        <a href="">萧峰</a>
    </li>
    <li>倚天屠龙记</li>
    <li>射雕英雄传</li>
</ul>

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function(){
        //查的是后代,
        console.log($("ul").find("a"));
        //查找的是亲儿子 如果指定亲儿子,就在children('选择器'),想获取所有的亲儿子 不用写参数
        console.log($("ul").children());
        //查找的是亲爸
        console.log($("a").parent());
        //$(`li:eq(${index})`)
        console.log( $('ul li').eq());
    })
</script>

小结:

- find() 查找的是后代
- children()查找的是亲儿子
- eq() 选择匹配的元素
- siblings() 选取兄弟元素(除了自己本身)
- parent() 查找的是亲爹

siblings()方法的用途

    <title>Title</title>
    <style>
        div{
            display: none;
        }
        div.active{
            display: block;
        }
    </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <div class="active">
             1
    </div>
    <div>
        2
    </div>
    <div>
        3
    </div>
    <div>
        4
    </div>
    <div>
        5
    </div>
    <script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                console.log($(this).css("backgroundColor","red"));
                //获取索引
                let i = $(this).index()
                //返回了jquery对象
                //链式编程
                $(this).css("backgroundColor","red").siblings("button").css("backgroundColor","#666");
                $("div").eq(i).addClass("active").siblings("div").removeClass("active");
            })
        })
    </script>

另外:升级版的选项卡

    <title>Title</title>
</head>
<body>
<ul>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
</ul>
<script src ="./libs/jquery-3.3.1.js"></script>
<script>
    $(function(){
        $("ul li").click(function(){
            $(this).find("a").css("color","red").parent().siblings("li").find("a").css("color","blue");
        })
    })
</script>