前端06 /JavaScript

昨日内容回顾

js的引入

  1. 方式一:
  2. <script>
  3. 	js代码
  4. </script>
  6. 方式二:
  7. <script src='xxxx.js'></script>

js的编程要求

  1. 结束符 ;
  2. 注释 // 单行注释
  3.     /*多行注释*/

变量

  1. 声明 var
  2. 变量的命名 : 数字 字母 下划线 $
  3.            不能用js中的保留字

输入输出

  1. alert('弹出的警告框')
  2. console.log('在控制台里打印')
  4. var inp = prompt('请输入内容 :')

基础数据类型

number
  1. 整数和小数都属于number类型
  2. toFixed(2) 保留两位小数
string
  1. '字符串'   "字符串"
  2. 属性 :length
  3. 方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n个值)
  4.      toLowerCase(),toUpperCase()
boolean
  1. true  [] {}
  2. false undefined null NaN 0 ''

null

  1. 设置为空

undefined

  1. 未定义 当一个变量只声明 不赋值的时候

转换

  1. parseInt('123') 字符串转数字
  2. parseFloat('1.235') 字符串转小数
  3. String(undefined) 小数转字符串(推荐)
  4. var a = 123
  5. a.toString() 数字转字符串
  6. Boolean(数据类型) 任意类型转换成boolean

内置对象类型

array
  1. var a = [1,2,3,4]
  2. var a = new Array([1,2,3,4])
  3. 属性:length
  4. 方法:push() pop() shift() unshift()
  5.     slice() reverse() join('sep') sort() splice(1,2,'新的值') concat()
自定义对象
  1. var obj = {'alex':'name'} //对象
json数据类型序列化
  1. '{"key":18,"123":[1,2,3]}'
  2. 自定义对象 = JSON.parse(json字符串)
  3. json字符串 = JSON.stingify(自定义对象)

运算符

  1. 算数运算符 : + - * / ** % ++ --    var b = ++a  varb = a++
  2. 赋值运算符 : = += -= *= /= %=
  3. 比较运算符 : > < >= <= == !=  === !==
  4. 逻辑运算符 : &&与 ||或 !非

流程控制

条件判断
  1. if(条件){
  2.     //满足条件之后要执行的代码
  3. }else if(条件){
  4.     //满足条件之后要执行的代码
  5. }else{
  6.     //都不满足之后要执行的代码
  7. }
  9. switch(值){
  10.     case 值1:
  11.     	代码;
  12.     	break
  13.     case 值2:
  14.     	代码;
  15.     	break
  16. 	default:
  17.     	代码
  18. }
循环
  1. while(条件){
  2.     循环体
  3. }
  5. for(var i=0;i<10;i++){
  6.     循环体
  7. }
  9. for(i in arr){
  10.     i是索引,arr[i]是具体的值
  11. }
  13. for(vari=0;i<arr.length;i++){
  14.     i是索引,arr[i]是具体的值
  15. }
三元运算符
  1. var 值 = 条件 ? 条件为true返回的内容:条件为false返回的内容

函数

  1. function 函数名(参数){
  2.     函数体
  3.     return 返回值   //返回值的个数必须是一个,如果返回多个值,放在数组中返回
  4. }
  5. 函数名(参数)
  6. arguments 函数中内置的动态单数,可以接收所有的参数
  8. 匿名函数
  9. var 变量名 = function(参数){
  10.    				 函数体
  11.    				 return 返回值
  12. 			}
  13. 自调用函数
  14. (function(形参){
  15.    	函数体
  16.    	return 返回值
  17. })(实参)

今日内容

1.BOM

  1. location对象
  2.     location.href  获取URL
  3.     location.href="URL" // 跳转到指定页面
  4.     location.reload() 重新加载页面,就是刷新一下页面
  6. 定时器
  7.     1. setTimeOut()  一段时间之后执行某个内容,执行一次
  8.         示例
  9.             var a = setTimeout(function f1(){confirm("are you ok?");},3000);
  10.             var a = setTimeout("confirm('xxxx')",3000);  单位毫秒
  11.         清除计时器
  12.             clearTimeout(a);
  13.     2.setInterval()  每隔一段时间执行一次,重复执行
  14.         var b = setInterval('confirm("xxxx")',3000);单位毫秒
  15.         清除计时器
  16.             clearInterval(b);

2.DOM

2.1 什么是dom

  1. document object modle 文档对象模型
  2. 整个文档就是一颗树
  3. 树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
  4. 在页面上还有一些动作效果:
  5. 	根据人的行为改变的 点击 鼠标悬浮
  6. 	自动在改变的

2.2 js是怎么给前端的web加上动作的呢?

  1. 1.找到对应的标签
  2. 2.给标签绑定对应的事件
  3. 3.操作对应的标签

2.3 查找标签

1.直接查找
  1. var a = document.getElementById('baidu')           //根据ID获取一个标签，直接返回一个元素对象
  2. console.log(a)
  3. var sons = document.getElementsByClassName('son')  //根据class属性获取，返回元素组成的数组
  4. console.log(sons)
  5. sons[0] //获取到一个标签对象
  6. var divs = document.getElementsByTagName('div')    //根据标签名获取标签合集，返回元素组成的数组
  7. console.log(divs)
  9. 示例:
  10. 	<!DOCTYPE html>
  11.     <html lang="en">
  12.     <head>
  13.         <meta charset="UTF-8">
  14.         <title>Title</title>
  15.     </head>
  16.     <body>
  17.         <div class="c1" id="d1">
  18.             are you ok?
  19.         </div>
  21.         <div class="c1 c2">
  22.             div2
  23.         </div>
  24.     </body>
  25.     </html>
  27. 操作:
  28. 	var divEle = document.getElementById('d1');
  29. 	var divEle = document.getElementsByClassName('c1');
  30. 	var divEle = document.getElementsByTagName('div');
2.间接查找
  1. parentElement            父节点标签元素
  2. children                 所有子标签
  3. firstElementChild        第一个子标签元素
  4. lastElementChild         最后一个子标签元素
  5. nextElementSibling       下一个兄弟标签元素
  6. previousElementSibling   上一个兄弟标签元素
  7. 示例:
  8. 	<!DOCTYPE html>
  9.     <html lang="en">
  10.     <head>
  11.         <meta charset="UTF-8">
  12.         <title>Title</title>
  13.     </head>
  14.     <body>
  16.         <div class="c1" id="d1">
  17.             are you ok?
  19.             <span id="s1">span1</span>
  20.             <span id="s2">span2</span>
  21.             <span id="s3">span3</span>
  22.         </div>
  24.         <div class="c1 c2">
  25.             div2
  26.         </div>
  27.     </body>
  29. 操作:
  30. 	var divEle = document.getElementById('d1');
  31. 	找父级:divEle.parentElement;
  32. 	找儿子们:divEle.children;
  33. 	找第一个儿子:divEle.firstElementChild;
  34. 	找最后一个儿子:divEle.lastElementChild;
  35. 	找下一个兄弟:divEle.nextElementSibling;
3.标签操作
  1. 创建标签:重点
  2. 	var aEle = document.createElement('a');
  3. 	//aEle就是一个新创建出来的标签对象
  5. 添加标签
  6.     追加一个子节点（作为最后的子节点）
  7.     somenode.appendChild(newnode)；
  8. 	示例:
  9. 		var divEle = document.getElementById('d1')
  10. 		divEle.appendChild(aEle)
  12.     把增加的节点放到某个节点的前边。
  13.     somenode.insertBefore(newnode,某个节点);
  14. 	示例:
  15. 		var divEle = document.getElementById('d1'); 找到父级标签div
  16. 		var a = document.createElement('a');  创建a标签
  17. 		a.innerText = 'baidu';  添加文本内容
  18. 		var span2 = document.getElementById('s2'); 找到div的子标签span2
  19. 		divEle.insertBefore(a,span2); 将a添加到span2的前面
  21. html文件代码:
  22. 	<!DOCTYPE html>
  23.     <html lang="en">
  24.     <head>
  25.         <meta charset="UTF-8">
  26.         <title>Title</title>
  27.     </head>
  28.     <body>
  30.     <div class="c1" id="d1">
  31.         are you ok?
  33.         <span id="s1">span1</span>
  34.         <span id="s2">span2</span>
  35.         <span id="s3">span3</span>
  36.     </div>
  38.     <div class="c1 c2">
  39.         div2
  40.     </div>
  42.     </body>
  43.     </html>
删除节点
  1. 获得要删除的元素，通过父元素调用该方法删除。
  2. somenode.removeChild(要删除的节点)
  3. 示例: 删除span2标签
  4.     var divEle = document.getElementById('d1');
  5.     var span2 = document.getElementById('s2');
  6.     divEle.removeChild(span2);
替换节点：
  1. somenode.replaceChild(newnode, 某个节点);
  2. somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉
标签的复制
  1. 节点.cloneNode()     //只克隆一层
  2. 节点.cloneNode(true) //克隆自己和所有的子子孙孙
  3. 注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
4.文本节点操作
  1. var divEle = document.getElementById("d1")
  2. divEle.innerText  #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
  3. divEle.innerHTML  #获取的是该标签内的所有内容，包括文本和标签
  4. 取值示例:
  5. 	div2.innerText;  不识别标签
  6.     	"are you ok? span1 span2 span3"
  7.     div2.innerHTML;  识别标签
  8.         "
  9.             are you ok?
  11.             <span id="s1">span1</span>
  12.             <span id="s2">span2</span>
  13.             <span id="s3">span3</span>
  14.         "
  15. 设置值:
  16. 	var div1 = document.getElementById('d1');
  17.     div1.innerText = 'xxx';
  18.     div1.innerText = '<a href="">百度</a>';
  19. 	div1.innerHTML = '<a href="">百度</a>';

2.4 属性操作

  1. var divEle = document.getElementById("d1");
  2. divEle.setAttribute("age","18")  #比较规范的写法
  3. divEle.getAttribute("age")
  4. divEle.removeAttribute("age")
  6. // 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
  7. imgEle.src
  8. imgEle.src="..."
  10. 示例:
  11. 	<a href="http://www.baidu.com">百度</a>
  12. 	操作
  13. 		var a = document.getElementsByTagName('a');
  14. 		a[0].href;  获取值
  15. 		a[0].href = 'xxx'; 设置值

2.5 获取值操作

  1. 输入框 input
  2. 	获取值
  3. 		var inpEle = document.getElementById('username');
  4. 		inpEle.value;
  5. 	设置值
  6. 		inpEle.value = 'alexDsb';
  8. select选择框
  9. 	获取值
  10. 		var selEle = document.getElementById('select1');
  11. 		selEle.value;
  12.      设置值
  13.      	selEle.value = '1';

2.6 类操作

  1. className  获取所有样式类名(字符串)
  3. 首先获取标签对象
  4. 标签对象.classList; 标签对象所有的class类值
  6. 标签对象.classList.remove(cls)  删除指定类
  7. classList.add(cls)  添加类
  8. classList.contains(cls)  存在返回true，否则返回false
  9. classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
  11. 示例:
  12. 	var divEle = document.getElementById('d1');
  13. 	divEle.classList.toggle('cc2');
  14. 	var a = setInterval("divEle.classList.toggle('cc2');",30);
  16. 	判断有没有这个类值的方法
  17. 		var divEle = document.getElementById('d1');
  18. 		divEle.classList.contains('cc1');

2.7 css设置

  1. 1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
  2. 2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
  4. 设置值:
  5. 	divEle.style.backgroundColor = 'yellow';
  6. 获取值
  7. 	divEle.style.backgroundColor;

3.事件

  1. 简单示例:
  2. 	<html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  7.         <style>
  8.             .cc1 {
  9.                 width: 100px;
  10.                 height: 100px;
  11.                 background-color: red;
  12.             }
  13.             .cc2{
  14.                 background-color: green;
  15.             }
  17.         </style>
  18.     </head>
  19.     <body>
  21.     <div class="cc1 xx xx2" id="d1">
  23.     </div>
  25.     <script>
  26.         var divEle = document.getElementById('d1');
  27.         divEle.onclick = function () {
  28.             divEle.style.backgroundColor = 'purple';
  29.         }
  31.     </script>
  32.     </body>
  33.     </html>

绑定事件的方式

  1. 方式1:
  2.     <script>
  3.         var divEle = document.getElementById('d1');  1.找到标签
  4.         divEle.onclick = function () {       2.给标签绑定事件
  5.             divEle.style.backgroundColor = 'purple';
  6.         }
  7.     </script>
  9.     	下面的this表示当前点击的标签
  10.         var divEle = document.getElementById('d1');
  11.         divEle.onclick = function () {
  12.             this.style.backgroundColor = 'purple';
  13.         }
  15. 方式2
  16. 	标签属性写事件名称=某个函数();
  17. 	<div class="cc1 xx xx2" id="d1" onclick="f1();"></div>
  19.     <script>
  20.     	js里面定义这个函数
  21.         function f1() {
  22.             var divEle = document.getElementById('d1');
  23.             divEle.style.backgroundColor = 'purple';
  24.         }
  25.     </script>
  27.     获取当前操作标签示例,this标签当前点击的标签
  28.     	<div class="cc1 xx xx2" id="d1" onclick="f1(this);"></div>
  29.         function f1(ths) {
  30.             ths.style.backgroundColor = 'purple';
  31.         }
  33. 绑定方式:
  34. <button id="btn">点击一下</button>
  35. 方式一:
  36.     var btn = document.getElementById('btn')
  37.     btn.onclick = function () {
  38.         alert('点我干嘛')
  39.     }
  40. 方式二:
  41. 	btn.onclick = clik
  42.     function clik() {
  43.         alert('不要点')
  44.     }
  45. 方式三:
  46. 	<button id="btn" onclick="clik()">点击一下</button>
  47. 	function clik() {
  48.         alert('不要点')
  49.     }

前端06 /JavaScript之BOM、DOM的更多相关文章

  1. JavaScript：BOM&DOM

    BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...

  2. javascript （BOM DOM）

    BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...

  3. JavaScript之BOM+DOM

    BOM 浏览器对象模型, 用于把浏览器相关的组件封装为对象进行操作. BOM是包含了DOM的. window对象 弹出框相关 确认: 取消: 与打开关闭window有关的方法 定时器相关 暂停选老婆 ...

  4. 前端--javaScript之BOM和DOM

    BOM和DOM概述 BOM(Browser Object Model):是指浏览器对象模型,它使js有能力和浏览器进行"对话". DOM(Document Object Model ...

  5. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  6. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  7. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  8. 前端学习笔记之BOM和DOM

    前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  9. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

随机推荐

  1. PuTTY通过SSH连接上Ubuntu20.04

    在PuTTY中连接到Ubuntu20.04大致需要几个步骤(不一定对应文本中的序号):1) 安装opensh-server (Ubuntu安装好之后 ,一般openssh-client自动已经安装好) ...

  2. 分析ThreadLocal的弱引用与内存泄漏问题

    目录 一.介绍 二.问题提出 2.1内存原理图 2.2几个问题 三.回答问题 3.1为什么会出现内存泄漏 3.2若Entry使用弱引用 3.3弱引用配合自动回收 四.总结 一.介绍 之前使用Threa ...

  3. postman获得时间戳和md5加密的方法

    注意点:记得用postman.setGlobalVariable设置全局变量,不然{{strmd5}}这种变量取不到值

  4. python基础--程序交互、格式化输出、流程控制、break、continue

    在此申明一下,博客参照了https://www.cnblogs.com/jin-xin/,自己做了部分的改动 (1) 程序交互 #!/usr/bin/env python # -*- coding: ...

  5. 东方步进电机马达驱动板CVK系列说明书

    东方步进电机马达驱动板CVK系列说明书

  6. HTTP Request Smuggling 请求走私

    参考文章 浅析HTTP走私攻击 SeeBug-协议层的攻击--HTTP请求走私 HTTP 走私漏洞分析 简单介绍 攻击者通过构造特殊结构的请求,干扰网站服务器对请求的处理,从而实现攻击目标 前提知识 ...

  7. MySQL语句的使用

    进入数据库  mysql -u root -pmysql    (u用户名,p密码)#如果不想让其他人看到就直接一个p然后回车再打密码 select version();   查看数据库版本 sele ...

  8. WeChair项目Alpha冲刺(1/10)

    团队项目进行情况 1.昨日进展    因为是Alpha冲刺第一天,所以昨日进展无 2.今日安排 前端:完成前端页面的首页html+css部分 后端:搭建好SpringBoot项目以及完成实体类代码的编 ...

  9. Elasticsearch系列---生产集群的索引管理

    概要 索引是我们使用Elasticsearch里最频繁的部分日常的操作都与索引有关,本篇从运维人员的视角,来玩一玩Elasticsearch的索引操作. 基本操作 在运维童鞋的视角里,索引的日常操作除 ...

  10. Java基础-Java中transient有什么用-序列化有那几种方式

    此文转载于知乎的一篇文章,看着写的非常全面,分享给大家. 先解释下什么是序列化 我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术. Java序列化 ...