JavaScript基础及函数，BOM，DOM的节点及DOM节点操作

Posted 2020-11-02 fylong

使用js的三种方式

 

1.直接在html标签中，使用事件属性，调用js代码:

<button onclick="alert(‘点我呀‘)">点我啊！<tton>

2.在页面的任意位置，使用script标签

<script type="text/javascript">
　　alert(‘哈哈哈‘)
</script>

3.外部：使用script标签 src属性选择外部地址， type属性选择"text/javascript"  charset="utf-8"

<script src="js/01-js.js" type="text/javascript" charset="utf-8">
</script>

注意事项:

1.js代码可以放在页面的任意位置使用，但是放置的位置不同将影响执行的顺序。

2.引入的外部script标签，不能再包含任何的js代码。

 

 

js中的变量

 

1.变量的声明:

var num1=1;  //使用var声明的变量，是局部变量，在函数内可用

num2="哈哈哈哈"; //直接声明的是全局变量。全局可用。

var a=1,b,c=2; //使用一行代码，声明多个语句，其中b为undefined；

 

js中声明变量的注意事项

1.js中声明变量的关键字 var，类型取决于赋值类型，默认值 undefined；

2.js中同一个变量可以在多次赋值中被修改数据类型。

3.变量可以使用var声明，也可以直接赋值声明;var声明的为局部变量;直接声明的为全局变量。

4.js中 变量可以重名，相当于后边的覆盖前边的。

 5.变量名区分大小写。大小写不同不是同一变量。

 

js中的(6种)数据类型:

null:空，表示空的引用;

Undefined: 使用var声明，但是为赋值的变量;

Number: 数值类型，包含整型和浮点型;

Boolean:真假;

String:字符串;

Object:对象。

js中没有字符，单引号和双引号都是字符串。

 

常用数值函数

①isNaN 用于检测一个变量是不是一个非数值(Not a Number)

在检查时会先调用Number函数,尝试将变量转化为数值类型如果最终结果能转化为数值则不是NaN

 

②Number      用于将各种数据类型转化为数值类型

　　>>>  Undefined无法转换返回NaN

　　>>>  null 转为0

　　>>>  Boolean  true转为1  false转为0

　　>>>  String 如果字符串是纯数值字符串,则可以转换

如果字符串包含非数字字符,则不可以转换 返回NaN 

如果是空字符串转为0,可以是空格

 

③parseInt     将字符串转化为数值类型

　　>>>如果是空字符串不能转    ""-->NaN

　　>>>如果是纯数值类型字符串,则可以转换且小数点直接舍去,不保留     "123.9"-->123   "123"-->123

　　>>>如果包含非数字字符,则将非数值前面的整数进行转换    "123a"-->123   "a123"-->NaN

 

④parseFloat     转换机制与parseInt相同,不同的是转换数值字符串时,如果字符串为小数则可以保留小数点

　　　　"123.9"-->123.9   "123"-->123

 

⑤typeof    检测一个变量的数据类型

　　　　字符串-->string   数值-->number   true/false-->boolean  未定义-->Undefined       对象/null-->Object  函数-->function

 

 

常用的输入输出

alert()  　　   弹窗输出

prompt();　　弹窗输入   尽收两部分参数,①输入提示内容 ②默认框的默认文本 (两部分都可以省略)   输入的内容默认都是字符串

document.write("<h1>12345</h1> <h5></h5>") 在浏览器屏幕上打印

console.log("2222")   浏览器控制台打印

 

JS中的运算符

①除号 无论符号两边是整数还是小数,出完后都将按照实际结果保留小数

② ===   要求等式的两边的数据,类型和值都必须相同,如果类型不同,直接返回false

③==只判断两边的数据,并不关心两边的数据类型是否相同

④!==不全等      !=不等

⑤条件运算符    a>b?true:false

 

在JS中,只能进行按位运算,如果两边不是数据类型,将转化为数字类型在运算

&& 进行逻辑运算

 

js中的真假判断

 

1.Boolean   true为真   false 为假

2.数值类型     0为假    非0为真

3.字符串类型    ""为假     非空字符串为真

4.null/Undefined/NaN   全为假

5.object  全为真

 

switch结构的()中可以放各种数据类型

比对时采用===进行判断 要求类型和值都必须相同

 

 

js中的函数的声明与调用

 

函数声明的格式

function函数名(参数1,参数2...){
    //函数体代码
    return 返回值;
}

 

 

1.函数调用

①直接调用    函数名(参数1,参数2...);

 

②通过事件调用   在HTML标签中,通过事件属性进行调用

<button onclick="focus(‘123‘,‘345‘)">点</button>

 

 

2.函数的声明与调用的注意事项

 

①函数中有没有返回值,只取决于函数中有没有return     无需刻意声明   在JS中,有返回值可以不接收   没有返回值也可以接收,结果为Undefined

 

②JS中函数的形参列表与实参列表  没有任何关联     也就是说  有参数可以不赋值(未赋值Undefined),没有参数也可以赋值.   函数的实际参数个数取决于实参列表

 

③JS中  函数是变量的唯一作用域     那么,函数的形参就是属于函数的局部变量

 

④函数的声明与调用语句没有先后之分,即,可以先写调用语句,再声明函数  func();    function func() {}

 

匿名函数的声明与使用

1.匿名函数表达式   var func=function(){}                调用函数      func();

注意,函数的调用语句,必须放在声明语句之后

 

2.直接将匿名函数,赋值给一个事件

      window.onload=function () { }    //文档就绪函数,确保函数中的代码,在HTML文档加载完成之后执行

      document.getElementById("btn2").onclick=function () { }

           

3.自执行函数

①!function(){ }();  开头用!表明这是自执行函数

 

②(function(){}());   用()将匿名函数声明与调用包裹在一起

 

③(function(){})();   用()将匿名函数声明语句进行包裹;

 

JS代码的执行顺序

JS代码的执行分为两个阶段      检查编译阶段   代码执行阶段

 

检查编译阶段  主要检查语法的错误   变量的声明   函数的声明 等声明操作

  执行的操作  var num;    function func1() {}   var func2;

代码执行阶段    变量的赋值,函数的调用等执行语句   属于代码执行阶段

执行的操作 console.log(num);   num=1;   func1();   func2();   func2=function () {};

 

console.log(num);
var num=1;
func1();  
function func1() {}
func2();  
var func2=function () {}

 

arguments对象

1.作用用于保存函数的所有实参

　　>>>但函数存在实参时,可以使用数组下标访问函数的所有实参

　　>>>alert(arguments[4])

2.arguments中元素的个数,取决于实参列表,与形参个数无关

 

3.一旦函数调用时,传入了实参,那么对应位数的形参,将与arguments对应的元素进行绑定

　　修改形参,arguments中对应的元素将被改掉,反之也成立

　　但是,如果莫一位置没有传入实参,那么该位置的形参和arguments将不进行关联

 

4.arguments.callee();执行当前函数的引用,用于在函数中使用递归调用自身

 

BOM

 

screen对象

console.log(window.screen);
console.log(screen);
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);//可用宽度
console.log(screen.availHeight);//可用高度=screen.height-底部任务栏高度

 

location对象

console.log(location);
console.log(location.href); //完整的URL路径
console.log(location.protocol);        //协议名
console.log(location.hostname);     //主机名
console.log(location.port); //端口号
console.log(location.host); //主机名+端口号
console.log(location.pathname);     //文件路径
console.log(location.search); //从?开始的参数部分
console.log(location.hash); //从#开始的锚点位置

 

 

使用location进行页面跳转

function gotobaidu(){
     ①   location="http://www.baidu.com";
     ②   window.location.href="http://www.baidu.com";
}

 

跳转页面,加载新界面之后可以点击回退按钮返回

function gotobaiduByAssign(){
location.assign("http://www.baidu.com"); }

 

跳转页面,加载新界面之后没有回退按钮,无法返回

function gotobaiduByReplace(){
location.replace("http://www.baidu.com"); }

 

刷新当前页面

location.reload(); 刷新页面  如果本地有缓存,将从缓存中读取  相当于按F5
location.reload(true);强制刷新  ,无论是否有缓存,都将请求后台加载最新数据,相当于Ctrl+F5

 

 

history 对象

console.log(history);
console.log(history.length);//用于记录当前页面跳转的历史页面个数

 

 

点击去前一页 相当于浏览器的前进按钮

function forward(){
history.forward(); }

 

点击去后一页相当于浏览器的后退按钮

function back(){
history.back(); }

 

表示跳转到浏览历史的任意一个界面

+1 表示前面一页 -1 表示后面一页     0  表示当前页 因此history.go(0);相当于刷新页面

function go(){
history.go(); }

 

 

navigator 对象

返回关于浏览器的各种系统信息

console.log(navigator);

 

输出浏览器的所有插件 

for (var i=0;i<navigator.plugins.length;i++) {
console.log(navigator.plugins[i].name); }
 

 

window对象的常用方法

①prompt()弹窗输入

②alert() 弹窗输出

 

③confirm() 待确定删除的提示框  分别返回true  false

 

④close()  关闭当前浏览器窗口

 

⑤open()   打开一个新窗口 参数一 新窗口的地址   参数二 新窗口的名字 没啥用   参数三 新窗口的各种配置属性 scrollbars=yes表示是否显示滚动条 只在IE有用

window.open("http://www.baidu.com","百度","width=600px, height=600px,top=100px,left=100px,scrollbars=yes");

 

 

⑥setTimeout  延时器,表示延时多少ms执行一个函数

　　参数一 可以传入匿名函数,也可以传入函数名

　　参数二 延时的毫秒数

　　参数三到参数n 传给回调函数的参数

　　setTimeout(function(num1,num2){},2000,"哈哈哈",123,456,47)

 

⑦setInterval  定时器 表示每隔多少ms执行一遍函数

　　其他用法与setTimeout完全相同

 

⑧clearInterval   清除定时器

⑨clearTimeout    清除延时器

　　声明定时器时可以接受返回的id 并将id返回给clearInterval即可清除

 

 

DOM数的节点

 

DOM节点分为三大类 元素节点(标签节点) 属性节点 文本节点

属性节点 文本节点都属于元素节点的子节点,因此操作时,需先选中元素节点,再修改属性和文本

 

查看元素节点

1.使用getElement系列方法

var  li=document.getElementById("first")
var  list1=document.getElementsByClassName("cls")
var  list2=document.getElementsByName("name")
var  list3=document.getElementsByTagName("li")

 

注意事项

①id不能重名 如果id重复,只能取到第一个

 

②获取元素节点时,必须等到DOM树加载完成后才能获取 两种方式  将js写在文档最后  将代码写入window.onload函数中

 

③通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不能直接对数组进行操作

　　document.getElementsByClassName("cls").click()=function(){};  错误

　　document.getElementsByClassName("cls")[0].click()=function(){}; 正确

 

④这一系列方法,也可以先选中一个DOM节点,从选中的DOM节点中,选择需要的节点

　　document.getElementById("first").getElementsByTagName("li");

 

2. 通过querySelector系列方法

 

①传入一个选择器名称,返回第一个找到的元素,通常用于查找id     var dq1=document.querySelector("#id")

 

②传入一个选择器名称,返回所有找到的元素无论找到几个,都返回数组格式      var  dqs1= document.querySelectorAll("#div1 li")

 

查看修改属性节点

 

查看属性节点     .getAttribute("属性名")

 

设置属性节点     .setAttribute("属性名","属性值")

 

注意事项      .setAttribute()在老版本IE中存在兼容问题,可以使用.符号代替

　　　　　　document.getElementById("first").classname="haha";

 

 

 

 

JS修改css的多种方式

 

1.使用setAttribute设置class和style

document.getElementById("first").setAttribute("class","class1")
document.getElementById("first").setAttribute("style","color:red")

 

 

2.使用.className添加一个class选择器

document.getElementById("first").className="class1"

 

 

3.使用.style.样式名 直接修改单个样式,注意样式名必须使用驼峰命名法

document.getElementById("first").style.color="red";
document.getElementById("first").style.fontSize="18px";

 

 

4.使用.style或者.style.cssText添加一串行级样式

 

  document.getElementById("first").style="color:red";   //IE不兼容
  document.getElementById("first").style.cssText="color:red";

 

 

查看设置文本节点

 

.innerHTML取到或设置一个节点中的HTML代码

document.getElementById("first").innerHTML
document.getElementById("first").innerHTML="<a href=‘‘>hah</a>"

 

 

 

.innerText取到或设置一个节点中的文本,不能设置HTML代码

document.getElementById("first").innerText

 

 

层次节点操作

1.   .childNodes获取当前节点的所有子节点 包括元素节点和文本节点

 　　 .children获取当前节点的所有元素子节点   不包括文本节点

   

2. .parentNode获取当前节点的父节点

   

3. .firstChild获取第一个子节点包括回车等文本节点

　　.firstElementChild 获取第一个元素节点 不含文本节点

 

　　.lastChild  .lastElementChild   获取最后一个

 

4. .previousSibling获取当前节点的前一个兄弟节点   包括文本节点

　　.previousElementSibling获取当前节点的前一个元素兄弟节点

 

 　　 .nextSibling   .nextElementSibling   获取后一个

 

5.    .attributes获取当前节点的所有属性节点  返回数组格式

 

创建并新增节点

 

1. .document.createElement("标签名") 创建一个新节点,并将创建的新节点返回    需要配合.setAttribute为新节点设置属性

 

2.父节点.insertBefore(新节点,目标节点) 在父节点中将新节点插入到目标节点之前     父节点.appendChild(新节点)在父节点的内部最后,插入一个新节点

 

3.源节点.cloneNode() 克隆一个节点     传入true表示克隆源节点以及源节点的所有子节点      传入false或者不传,表示只克隆当前节点,而不克隆子节点

 

 

 

删除替换节点

 

1.父节点.removeChild(子节点) 从父节点中,删除指定子节点

 

2.父节点.replaceChild(新节点,老节点) 在父节点中用新节点替换老节点