JavaScript视频总结

最新推荐文章于 2021-11-09 15:29:26 发布

杨晓尚

最新推荐文章于 2021-11-09 15:29:26 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/qq_41306240/article/details/91126213

版权

前言

最近把JavaScript传智播客得视频看完了，视频中得小例子也都全部实现，Java Script的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。这里重点讲了BOM、DOM和jQuery。

BOM

BOM是浏览器对象模型，用来获取或设置浏览器得属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。BOM得核心就是window对象，表示浏览器得一个实例。BOM赋予了JS操作浏览器得能力，即window操作。BOM没有正式得标准，导致各浏览器对于BOM方法得支持各有不同，因此需要具体问题具体对待。
BOM包括：

1 弹出新浏览器窗口的功能。

2 移动、缩放和关闭浏览器窗口的功能。

3 提供浏览器所加载页面的详细信息的navigator对象。

4 提供浏览器所加载页面的详细信息的location对象。

5 提供用户分辨率详细信息的screen对象。

6 对cookies的支持。

7 像XMLHttpRequest和IE的ActionXobject这样的自定义对象。

DOM

BOM得内容不多，主要还是DOM。由于DOM的操作对象是文档，所以dom和浏览器没有直接关系。
当页面被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被结构化为对象树。
对象的HTML DOM树

在这里插入图片描述

通过HTML DOM，JavaScript能够访问和改变HTML文档的所有元素：
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

JavaScript DOM的基本操作如下：
在这里插入图片描述

jQuery

JQuery是一个JavaScript函数库。或者说是JavaScript中最流行的一种框架。
1.什么是js库？

就是使用js代码封装为一些文件，使用时只要引用进来即可。

2.常见的js库有哪些？

Perototype、YUI、ExtJS、JQuery等

3.优势

写得少，做得多
兼容性
体积少
链式编程
隐式迭代、控件丰富、开源、免费

4.如何使用jQuery进行开发？
->配置环境
->1.首先新建一个网站
->2.新建一个文件夹，命名为Scripts
->3.将js文件放在文件夹中
->书写页面，使用jQuery文件
->1.新建一个html页面
->2.导入js脚本

->3.在导入js脚本的下方，即可使用jQuery

5.使用jQuery做以前的例子会变得简单很多。
例如做之前做过得计算器
不用jQuery

<!DOCTYPE html>
<html>
    <head>
	      <title>js计算器</title>
		  <style type="text/css">
		  
		  </style>
		  <script type ="text/javascript">
			  onload = function(){
				var btn =document.getElementById("btn");
				btn.onclick = function(){
				  var oper =document.getElementById("oper");
				  var op = oper.value;
				  var n1 = parseInt(document.getElementById("num1").value);
				  var n2 = parseInt(document.getElementById("num2").value);
		  
		  var res =0;
		  switch(op){
		    case  "add"   :   res =n1+n2; break;
		    case  "sub"   :   res =n1-n2;  break;
			case  "multi" :   res =n1*n2;   break;
		    case  "divi"  :   res =n1/n2;   break;
		     }
				document.getElementById("res").value = res;
			}; 
		  };
		  </script>
		</head>
		<body>
		  <input type="text" id="num1"/>
		  <select id="oper">
		  <option value="add" selected>+</option>
		  <option value="sub">-</option>
		  <option value ="multi">*<option>
		  <option value="divi">/</option>
		   </select>
		   <input type ="text" id="num2"/>
		   <input type="button" id="btn" value="="/>
		   <input type="text" id="res" />
		 </body>
</html>

用jQuery以后

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#btnEquals").click(function () {
                var num1 = parseFloat($("#num1").val());
                var num2 = parseFloat($("#num2").val());
                var oper = $("#oper").val();
                var res;
                //$("#res").val(res);
                //第二种方法
                res = new Function("return " + num1 + oper + num2)();
                $("#res").val(res);
            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" id="num1"/>
    <select id="oper">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" name="name" value="" id="num2" />
    <input type="button" name="name" value ="=" id="btnEquals" />
    <input type="text" name="name" value="" id="res" />
</body>
</html>

明显代码量会少很多。

总结

JavaScript得内容不止这些，还需继续学习。

杨晓尚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
8
评论
JavaScript视频总结

前言最近把JavaScript传智播客得视频看完了，视频中得小例子也都全部实现，Java Script的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。这里重点讲了BOM、DOM和jQuery。BOMBOM是浏览器对象模型，用来获取或设置浏览器得属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。BOM得核心就是window对象，表...
复制链接

扫一扫