JavaScript基础以及JavaScript操作BOM&&DOM

最新推荐文章于 2022-08-25 19:16:36 发布

绿萝蔓蔓绕枝生

最新推荐文章于 2022-08-25 19:16:36 发布

阅读量1.1k

点赞数 13

本文链接：https://blog.csdn.net/qq_42578036/article/details/109496815

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JavaScript

JavaScript 是一种基于对象和事件驱动的脚本语言，简称 js

1、JavaScript 作用

表单验证；减轻服务器压力
制作页面特效
动态改变页面内容

2、JavaScript 特点

交互、脚本语言、解释性语言(不需要编译)
边执行边解释
跨平台(不依赖与操作系统)

3、JavaScript组成

JavaScript 由 ECMAScript、BOM、DOM 组成

ECMAScript：一种语法标准(规范),编码遵循ECMAScript标准
BOM：Browser Object Model(浏览器对象模型),提供了独立于内容与浏览器窗口进行交互的对象
DOM：Document Object Model(文档对象模型),是HTML文档对象模型定义的一套标准方法,用来访问和操作HTML文档

二、JavaScript 的使用

1、JavaScript 基本结构

JavaScript 语句放在<script></script>标签中

    <script type="text/javascript">
        JavaScript 语句;
    </script>

2、js内嵌式使用

<script></script>标签一般放在</html>标签之后，可以放在<head>、<body>标签中

    <input type="button" onclick="myFunction()" value="点我"/>
    <script>
        function myFunction(){
            window.alert("你好，我是一个警告框")
        }
    </script>

3、js外链式使用

引入 js 文件

    <script src="js/test.js"></script>

4、js在标签中使用

<input type="button" value="点我" onclick="javascript:alert('hello');">

三、JavaScript 基础

1、执行原理

浏览器输入
发送请求
解析HTML标签和JavaScript
从服务器端下载含JavaScript的页面
返回响应

2、语法

（1）变量的声明和赋值

		//1.先声明变量,再赋值
		var width;
		width=10;
		//2.同时声明和赋值变量
		var userName="六月";
		var i,j,k=15;
		//3.不声明直接赋值
		userName="六月";
		i=1;

（2）数据类型

undefined：未定义的(变量声明未赋值、赋值为undefined)
null：空值
number：数值型
boolean：布尔型(true或false)
string：字符串(单引号双引号都可以)

（3）注释

单行注释以//开始，以行末结束
多行注释以/*开始，以*/结束

（4）运算符

算术运算符：+ - * / % ++ --
赋值运算符：=
比较运算符：> < >= <= == !=
逻辑运算符：&& || !

（5）++、--的使用

当++、--单独成句时，++、--在前和在后面没有影响
++在后，先拿变量去用，用完了再自加
++在前，先自加，再拿自加后的变量去使用

四、JavaScript 操作 BOM&DOM

1、JavaScript 的组成

ECMAScript

一种语法标准（规范），编码遵循 ECMAScript 标准

BOM（Browser Object Model）

浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

DOM（Document Object Model）

文档对象模型，是 HTML 文档对象模型定义的一套标准方法,用来访问和操作 HTML 文档

2、JavaScript 操作 BOM

浏览器对象模型

对象模型	作用
window	窗口对象，可以用来控制当前窗口，或打开新窗口
screen	屏幕对象，获取相关屏幕信息
navigator	浏览器对象，通过这个对象可以判定用户所使用的浏览器
history	历史对象，用来前进或后退一个页面
location	地址对象，可以用来获取当前URL的信息
JavaScript 计时事件	在一个设定的时间间隔之后来执行代码，而不是在函数被调用时立即执行
localStorage SessionStorage	存储对象，用来存储数据，和cookie相似，区别是它是为了更大容量存储设计的，在使用上也更加方便

JavaScript 弹窗

以下window.可省略

窗口	语法	作用
警告框	window.alert()	用于确保用户可以得到某些信息
确认框	window.confirm()	用于验证是否接受用户操作
提示框	window.prompt()	用于提示在进入页面前输入某个值

	<input type="button" onclick="myFunction()1" value="点我"/>
	<input type="button" onclick="myFunction()2" value="点我"/>
	<input type="button" onclick="myFunction()3" value="点我"/>
    <script>
        function myFunction1(){
            window.alert("你好，我是一个警告框")
        }
        function myFunction2(){
            window.confirm("你好，我是一个确认框")
        }
        function myFunction3(){
            window.prompt("你好，我是一个提示框")
        }
    </script>

window.location 对象

用于获取当前页面地址（URL），并把浏览器重定向到新页面

对象	作用
location.href	返回当前压面的URL
location.pathname	返回URL的路径名
location.assign()	加载新的文档

<script>
    document.write(location.href)	//当前页面的URL
    "<br/>"
    document.write(location.pathname)//当前URL的路径名
	"<br/>"
    function myFunction(){
        window.location.assign("http://www.w3cschool.cc");
    }
</script>

JavaScript 计时事件

事件	含义
setlnterval()	间隔指定的毫秒数不停地执行指定的代码(一直执行)
clearlnterval()	用于停止 setlnterval() 方法执行的函数代码
setTimeout()	暂停指定的毫秒数后执行指定的代码(只执行一次)
clearTimeout()	用于停止执行 setTimeout() 方法的函数代码

3、JavaScript 操作 DOM

查找HTML元素

（1）通过id属性获取对象

<button id="btn1">按钮2</button>1
<button id="btn2">按钮3</button>2
    <script>
        var btn=document.getElementById("btn1");
        btn.onclick=function (){
            alert("1");
        }
    </script>

（2）通过获取标签名获取对象

<button class="btn">按钮2</button>1
<button class="btn">按钮3</button>2
    <script>
        var btn=document.getElementsByTagName("button")[1]
        btn.onclick=function (){
            alert("1");
        }
    </script>

（3）通过class属性获取对象

<button class="btn">按钮2</button>1
<button class="btn">按钮3</button>2
    <script>
        var btn=document.getElementsByClassName("btn")[1]
        btn.onclick=function (){
            alert("1");
        }
    </script>

改变 HTML

（1）改变HTML输出流

		document.write()

（2）改变HTML内容

		对象.innerHTML=新的HTML

（3）改变HTML属性

		对象.attribute=新属性值

示例：

<script>
    document.write("你好！")
    document.getElementById("newText").innerHTML="新文本"
    document.getElementById("img").src="../images/2.jpg";
</script>

改变CSS样式
通过id属性获取对象

		对象.style.property=新样式

示例：

    document.getElementsByTagName("p")[0].style.background="red";
    document.getElementsByTagName("p")[0].style.fontSize="40px";

绿萝蔓蔓绕枝生

关注

13
点赞
踩
62

收藏

觉得还不错? 一键收藏
2
评论
JavaScript基础以及JavaScript操作BOM&&DOM

一、JavaScriptJavaScript 是一种基于对象和事件驱动的脚本语言，简称 js1、JavaScript 作用表单验证；减轻服务器压力制作页面特效动态改变页面内容2、JavaScript 特点交互、脚本语言、解释性语言(不需要编译)边执行边解释跨平台(不依赖与操作系统)3、JavaScript组成JavaScript 由 ECMAScript、BOM、DOM 组成ECMAScript：一种语法标准(规范),编码遵循ECMAScript标准BOM：Browser
复制链接

扫一扫

专栏目录