BOM, 定时器, jQuery基础

BOM

概述

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
比如：刷新浏览器、后退、前进、在浏览器中输入URL等

BOM顶级对象

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name

对话框

<script>
        alert("警告框");
        // 返回输入的内容
        var content = prompt("请输入密码");

        // 确定返回true,取消返回false
        var flag = confirm("确定退出吗?");

        window.onload=function(){
            
        }
    </script>

window.location

<script>
    // 地址栏上(浏览器最上边)#后面的内容
    console.log(window.location.hash);
    // 主机名和端口号  localhost:52332  注意: 需要Ctrl+1 直接在vscode里打开浏览器才可以  直接复制路径是不行的
    console.log(window.location.host);
    // 主机名   localhost
    console.log(window.location.hostname);
    // 文件的路径---相对路径  
    console.log(window.location.pathname);
    // 端口号
    console.log(window.location.port);
    // 协议
    console.log(window.location.protocol);
  </script>

history

<script>
  // 跳转到test.html

  $("#btn1").click(
    function () {
      window.location.href = "test.html";
    }
  );
  // 前进
  $('#btn2').click(() => {
    window.history.forward()
  });
  $('btn3').click(() => {
    window.history.back()
  }
  );
</script>

window.navigator

<script>
    // 通过userAgent 可以判断浏览器的类型
    console.log(window.navigator.userAgent);
    // 通过platform可以判断浏览器所在的系统平台类型
    console.log(window.navigator.platform);
  </script>

定时器

setTimeout

<script>
        // 1 setTimeout : 多久后执行(单位毫秒(1秒=1000毫秒)),并且只执行一次
        // setTimeout(做什么(回调函数),多久之后);
        setTimeout(() => {
            console.log(1111);
        }, 2000);
        // 上面和下面同时执行,异步,就是定时器会开启一个新线程,来运行该程序
        console.log(22222);

        window.onload = function () {
            // 需求 : 点击按钮的时候,绑定一个定时器,1秒之后面向页面输出1
            // 并返回一个true/false,如果返回true,再追加输出一个2,如果false,输出3
            $("#btn").click(() => {
                var flag;

                setTimeout(() => {
                    document.write(1);
                    flag = true;
                    return flag;
                }, 1000);
                if (flag) {
                    document.write(2);
                } else {
                    document.write(3);
                }
            });
        }

    </script>

setInterval

 <script>
        // 2 setInterval : 没隔多久  做什么事
        // setInterval(做什么,间隔时间);
        var count = 0;
        // 返回定时器的ID,可以根据这个ID 清除这个定时器
        var timer = setInterval(() => {
            document.write(count++ + "<br>");
            if (count >= 10) {
                // return是不能清除这个定时器的
                // return;
                // 清除定时器
                clearInterval(timer)
            }
        }, 2000);
        console.log(timer);
    </script>

jQuery基础

jQuery基础语法

<!-- 引入jQuery函数库 -->
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        // dom树加载完就可以执行,可以写多个
        jQuery(document).ready(()=>{
            console.log('ready-1');
        });
        jQuery(document).ready(()=>{
            console.log('ready-2');
        });
        // $ = jQuery 在jQuery内容,为了使用方便,用$ 和jQuery是一样,定义了$这个变量
        // 如果$和其他框架冲突,就要使用jQuery了
        $(document).ready(()=>{
            console.log('ready-3');
        });
        // 简单写法
        $(()=>{
            console.log('ready-4');
        })
       
    </script>

基础选择器

<script>
        // 得到ID为xxx的jQuery对象,并不是DOM
        // jQuery对象中封装的是DOM,如果需要用到DOM对象的话,就需要通过[下标] 取出
        $("#xxx");
        // 根据类名获取
        $(".className");
        // 根据标签名获取
        $("标签名");
        // 并集选择器
        $("div.className");
        // 交集选择器
        $("div,p,#xxx,.xxx");
        // 子代
        $("div>p>.class");
        // 后代
        $("div p");
        // 属性 : 有type属性的input
        $("input[type]");
        // 属性 : type属性值为password的input
        $("input[type='password']");
        // 属性 : href属性值以http打头的a标签
        $("a[href^=http]");
        // 属性 : href属性值以com结尾的a标签
        $("a[href$=com]");
    </script>

过滤选择器

<script>
        $(() => {
            // CSS函数的使用
            // 1 一个参数, 如果是对象, 则对所有DOM对象设置多个样式, 支持链式调用
            // 2 一个参数, 不是对象, 就认为是属性, 则返回第一个DOM对象的属性的值, 不支持链式调用
            // 3 两个参数, 第一个attr是属性, 第二个value是属性对应的值, 则对所有DOM设置该样式和值
            
            // 从0开始 获取所有li标签,然后只要第 2个 (下标为0开始)
            $("li:eq(2)").css({'color':'red','background-color':'green'});
            
            // 获取所有li,然后只要奇数 (0开始,0算偶数)
            $("li:odd").css("color","blue");
            // 同上,取偶数
            $("li:even").css("color","pink");
            // 获取小于2的,0开始
            $("li:lt(2)").css("background-color","yellow");
            // 获取大于2的,0开始
            $("li:gt(2)").css("background-color","black");
        });
    </script>

筛选选择器

<script>
        $(()=>{
            // 获取所有子标签
            $("div").children().css("color","red");
            // 获取指定子标签 (子代,h2中的span不会被选择)
            $("div").children("span").css("color","blue");
            // find 就是查找后代
            $("div").find("span").css("color",'green');

            // 获取所有子标签,然后只要第二个,下标 0 开始
            $("div").children().eq(2).css("color",'pink');

            // 获得兄弟节点(同级) (当前作用域中,非自己的标签 )
            $('h2').siblings().css('background-color','red');
            // 获取下一个标签(同级)
            $('h2').next().css('background-color','black');
            // 获取 下一个标签(同级),并且下一个标签必须是h3标签才行,如果不是h3,就不获取
            $('h2').next('h3').css('background-color','blue');

            // 获取后面的标签(同级)
            $('h2').nextAll().css('background-color','blue');

            // 获取所有子标签,然后通过not进行筛选,不要span标签、h3标签、class属性值为h的标签
            $('div').children().not('span,h3,.h').css("font-size",'50px');
        });

事件

<script>
        $(()=>{
            var p = $("p");
            // 点击
            // 箭头函数的上下文环境是window
            p.click(function(e) {
                // this 是jQuery对象中封装的DOM对象
                console.log(this);
                console.log(this.innerText);
                // 通过$(DOM对象) 就可以把DOM对象转换为jQuery对象
                // text函数 等于 innerText , 无参是获取,有参是设置
                console.log($(this).text());
                // 事件源得到的也是DOM对象
                console.log(e.target.innerText);
            });
            // 双击
            p.dblclick(function(){
                // 隐藏,参数可以不写,不写没有动画效果,写就是毫秒数,多长时间内隐藏完成
                $(this).hide(1000);
            });
            // 移入
            p.mouseenter(function(){
                $(this).css("color",'red');
                console.log('移入...');
            });
            // 移出
            p.mouseleave(function(){
                $(this).css("color",'');
                console.log('移出...');
            });
            $("#btn").click(function(){
                // 显示 , 同hide
                $("p").show(1000);
            });
            $("#btn1").click(function(){
                // 切换.显示就隐藏,隐藏就显示,同hide
                $("p").toggle(1000);
            });
        });
    </script>

class操作

<script>
        $(function(){
            var add = $("#add");
            var remove = $("#remove");
            var toggle = $("#toggle");
            var p = $("p");
            var btns = $("button");

            add.click(function(){
                // 添加class  
                p.addClass('g');
                console.log(btns.index(this));
            });
            remove.click(function(){
                // 删除class  
                p.removeClass('g');
                console.log(btns.index(this));
            });
            toggle.click(function(){
                // 切换class,有就删除,没有就添加  
                p.toggleClass('g');
                console.log(btns.index(this));
            });
        });
    </script>