2021-08-20 WEB前端课堂笔记Day06

最新推荐文章于 2021-08-21 20:22:19 发布

weixin_47509934

最新推荐文章于 2021-08-21 20:22:19 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/weixin_47509934/article/details/119831283

版权

1 BOM（浏览器对象模型）

BOM 提供了独立于内容，可以与浏览器窗口进行互动的对象结构

对象层级：
请添加图片描述

1.1 BOM的作用

弹出新的浏览器窗口
移动和关闭窗口以及调整窗口大小
页面的前进和后退

1.2 常用属性

history 关于客户访问过的URL信息

location 当前的URL信息

// 使用语法
window.属性名 = "属性值";
window.location = "http://www.baidu.com";

2.3 常用方法

名称	描述
prompt()	提示用户输入的对话框
alert()	显示一个带有提示信息和确定按钮的警告框
confirm()	显示一个带有提示信息确定取消按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口加载给定的URL所指定的地址
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（毫秒）来调用函数或表达式

alert()、prompt()、confirm()的区别

alert 有一个参数，仅起警告作用，无返回值，不改变脚本

prompt 有两个参数，收集用户关于特定问题的信息反馈，有确认和取消按钮，有返回值

confirm 一个参数，对用户的操作进行二次确认，有确定和取消按钮，有返回值

2.4 History对象

常用方法

名称	描述
back()	加载history对象列表中的前一个url
forward（）	加载history对象列表中的下一个url
go()	加载history对象列表中的某个具体的url

histiry.back()------等价于----history.go(-1) 就是浏览器的后退

history.forward()-----等价于-----history.go(1) 就是浏览器的前进

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页 （重新加载当前页面的url）</a>  
//控制超链接a不跳转页面  取消的默认行为
href="javascript:void(0)"(推荐)
href="#"

2.5 定时器

setTimeout

setInterval

 //  在指定的时间（3000毫秒）之后 执行函数  而且只执行一次
            setTimeout("alert('3 seconds')",3000);
           //  在指定的时间（3000毫秒）之后 执行函数   会循环执行 两次执行之间的时间间隔为（3000毫秒）
            setInterval("alert('3 seconds')",3000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>

        function getTime(){
            var now = new Date();//获取系统当前时间
            var  h = now.getHours();
            var m = now.getMinutes();
            var s = now.getSeconds()
            document.getElementsByTagName("h1")[0].innerHTML ="现在是北京时间：" +h+":"+m+":"+s;
        }
        // 设定定时器并开始计时
        var clock = setInterval("getTime()",1000);
        // 如果定时器是setTimeout定时器  则取消定时器使用clearTimeout();
        function endTime(){
                clearInterval(clock);
        }
    </script>
</head>
<body>
    <input type="button" value="结束" onclick="endTime()">
    <h1></h1>
</body>
</html>

3 JQuery

是目前最流行的JavaScript类库，是对JavaScript对象和函数的封装

版本：压缩版（实用环境）未压缩版（开发环境）

各版本的差异：

JQuery 1.X 兼容性强，兼容IE 5/6/7/8

JQuery 2.X 不再支持IE 5/6/7/8

JQuery 3.X 全面支持HTML5和CSS3

JQuery 2.0以上版本都不再支持IE 6/7/8

3.1 JQuery的使用

第一种：使用网络资源

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

第二种：使用本地资源

请添加图片描述

3.2 JQuery的作用

访问和操作DOM元素
控制页面
对页面事件进行处理
扩展新的JQuery插件
与AJAX技术完美结合

3.3 优势

体积小，压缩后小于100k
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
可以使用隐式迭代简化编程
插件丰富

JQuery的入口函数

   $(document).ready(function(){
        $("li:even").css("background-color","#e8f0f2");
        $("li:odd").css("background-color","red");
    })
// 简化写法
     $(function(){// window.οnlοad= function(){}
         $("li:even").css("background-color","#e8f0f2");
         $("li:odd").css("background-color","red");
     })

3.4 $(document).ready 和 window.onload 的区别

	window.onload	$(document).ready
执行时机	必须等待网页中所有的内容（图片视频 flash等）加载完毕后才能执行	网页中所有的DOM文档结构绘制完毕即刻执行
编写的个数	在一个页面中不能同时编写多个	同一页面中可以同时编写多个
简化形式	无	$(function(){ })

3.5 语法结构

$(选择器).action()

工厂函数$()：将DOM对象转换为JQuery对象

选择器selector：获取需要操作的DOM元素

方法action()：JQuery提供的方法，包括时间处理方法

3.6 页面元素的操作

addClass() 给元素添加样式

    <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
        // 使用ID选择器，#idName
        // 添加的样式必须在css中存在
            $("#apple").addClass("red");
        })
      </script>

css() 给元素设置样式

    <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 使用ID选择器
            $("#apple").addClass("red");
            //元素选择器
            $("li").mouseover(function(){
                $(this).css({"background":"green","color":"yellow"});
            })
            $("li").mouseout(function(){
                $(this).css({"background":"#fff","color":"#000"});
            })
        })
	</script>

show()和hide() 设置元素的显示和隐藏

$(function(){
    //同时给li绑定鼠标进入和鼠标离开事件  链式编程
    $("li").mouseover(function(){
        $(this).css({"background":"orange"})
        $(this).children("div").show();//显示div
    }).mouseout(function(){
        $(this).css({"background":"rgb(222,0,0)"})
        $(this).children("div").hide();//隐藏div
    })

3.7 代码风格

链式操作：

//多一个对象进行多重操作，并将操作结果返回给该对象
$("h2").css("background-color","#CCFFFF").next().show();

隐式迭代：

<script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 隐式迭代
             $("li").css({"font-weight":"bold","color":"red"});
        })
      </script>

3.8 DOM对象和JQuery对象

DOM对象就是直接使用JS获取的结点对象

var li  = document.getElementById("title")

JQuery对象使用JQuery包装DOM对象后产生的对象就是JQuery对象它能够是用JQuery的方法

var li  = document.getElementById("title");
var $li = $(li)  // 将dom对象转换为JQuery对象  jquer对象命名一般以$开头
var li  = document.getElementById("title")innerHTML;
$(li).html();  //  相同

在事件中经常会使用$(this) this就是触发事件的对象

JQuery对象转换为DOM对象

JQuery对象是一个类似于数组的对象，可以通过索引[index]方法得到对应的DOM对象，除此之外还可以使用JQuery提供的get方法来获取的相应的DOM对象

var $li = $("li");
var firstLi = $li[0];// 得到了一个DOM对象
var firstLi = $li.get(0);// 得到了一个DOM对象

weixin_47509934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-20 WEB前端课堂笔记Day06

1 BOM（浏览器对象模型）BOM 提供了独立于内容，可以与浏览器窗口进行互动的对象结构对象层级：1.1 BOM的作用弹出新的浏览器窗口移动和关闭窗口以及调整窗口大小页面的前进和后退1.2 常用属性history 关于客户访问过的URL信息location 当前的URL信息// 使用语法window.属性名 = "属性值";window.location = "http://www.baidu.com";2.3 常用方法名称描述prompt()提示用
复制链接

扫一扫