js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

时间:2022-07-11 20:26:21

js介绍

js运行编写在浏览器上的脚本语言(外挂,具有逻辑性)
脚本语言:运行在浏览器上的独立的代码块(具有逻辑性)

操作BOM   浏览器对象盒子
操作DOM   文本对象

js三种引入方式

(1)行间式:书写在代码块写在全局事件属性中

<div id="box" onclick="this.style.backgroundColor = 'red'; "></div>

(2)内联式:书写在body最下方

<div id="temp"></div>

// js引入 <script> temp.onclick = function () { // 完成某一项功能 this.style.width = "400px"; // this => temp } </script>

(3)外联式:书写在cs文件中

<script src="1.js"></script>    书写在body最下方

res.onclick = function () {
    this.style.backgroundColor = 'red';
}

 

 

js选择器(getElementBy() 与 querySelector )

document :所有的文件对象

 

getElement系列选择器

id选择器  :  getElementById("box")

document.getElementById("box").onclick = function () {
    this.style.backgroundColor = 'red';
}

var box = document.getElementById("box");
box.onclick = function () {
    this.style.backgroundColor = 'red';
}

 

类选择器:getElementsByClassName('box')            

var box = document.getElementsByClassName('box');   //获取标签,得到是数组
box[
0].onclick = function () {   this.style.backgroundColor = 'red'; } box[1].onclick = function () {   this.style.backgroundColor = 'red'; }

 

标签选择器:getElementsByTagName

var box = document.getElementsByTagName('box');   // 获取标签,得到的是数组
box[
1].onclick = function () {   this.style.backgroundColor = 'red';
}

 

 
 

querySelector系列选择器

位置选择器 (跟css选择器一样)

var box = document.querySelector( '.bb' );
var box1 = document.querySelectorAll( 'body .bb' );  获取的body下的 类名为bb 的所有选择器

 

 

js四种调试方式

alert()   弹出框
console.log()   浏览器控制台查看
document.write()     写在html页面中

断点调试

 

 

js操作页面文档(三步骤)

(1)获取页面元素对象
(2)为该对象绑定事件
(3)通过事件操作元素对象
var box = document.querySelector(".box");    //获取指定标签

// 绑定事件
box.onclick = function() {
  //操作内容
  this.innerText = "innerText"; // 不能解析html标签
  this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签
}

js修改标签内容

this.innerText = "innerText";  // 不能解析html标签
this.innerHTML = "<i>inn

js修改css样式

this.style.color = "red";

js修改类名

this.className = "box"     将类名改为box
在原类名上添加类名
Cname = this.className
cName = cName + " " + ".box" 将单类名改为双类名

清除类名
this.className = "" ;

js设置属性

var img = document.querySelector('img');
img.setAttribute("src", "https://www.baidu.com/img/baidu_jgylogo3.gif");

js获取属性值

img.getAttribute("src")

 

js获取计算后样式   getComputedStyle()( 获取的是内联式,外联式 )

var box = document.querySelector( '.box' );

getComputedStyle( 元素对象,伪类 ).属性名
ftSize = getComputedStyle( box,null ).fontSize;    //只读内联,外联的样式值
this.style.color = "red"; //修改样式值