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"; //修改样式值

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

  1. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  2. js事件,操作页面文档,计算后样式,数据类型

    js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...

  3. JavaEE实战——XML文档DOM、SAX、STAX解析方式详解

    原 JavaEE实战--XML文档DOM.SAX.STAX解析方式详解 2016年06月22日 23:10:35 李春春_ 阅读数:3445 标签: DOMSAXSTAXJAXPXML Pull 更多 ...

  4. HTML选择器的四种使用方法

    选择器<style> 为了让.html代码更加简洁,这里引入选择器style 本文总共介绍选择器的四种使用方式 一.选择器的四种形式 1.ID选择器 id表示身份,在页面元素中的id不允许 ...

  5. 操作xml文档的常用方式

    1.操作XML文档的两种常用方式: 1)使用XmlReader类和XmlWriter类操作 XmlReader是基于数据流的,占用极少的内存,是只读方式的,所以速度极快.只能采用遍历的模式查找数据节点 ...

  6. JS判断Android、iOS或浏览器的多种方法(四种方法)

    第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> ...

  7. JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预

      -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写   以下是一段js 作用于 css 的 href的 代码   <link id="l1" rel= ...

  8. css引入的方式有哪些_四种css的引入方式与特点

    在网页中css主要负责html文档的样式显示,目前css主要有4种引入方式:行内式.内嵌式.导入式.链接式. 1.行内式 行内式也叫内联样式,是指标记的style属性中设定CSS样式,这种方式没有体现 ...

  9. 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

随机推荐

  1. Use of Recv-Q and Send-Q

    From my man page: Recv-Q Established: The count of bytes not copied by the user program connected to ...

  2. springboot中,页面访问不到静态资源

    例一,静态资源放在默认的目录,如:resources/static或resources/templates 访问静态资源的时候,路径不应带上默认目录,因为springboot默认从这些目录下开始加载, ...

  3. B. Obtaining the String(模拟)

    比较水的模拟 思路:就是模拟题意 注意:把数组开大点,开始wa了几次就是这个原因 #include<iostream> #include<string> #include< ...

  4. IDEA+API && SPI

    JAVA中API和SPI的区别:https://blog.csdn.net/quanaianzj/article/details/82500019

  5. session和application内置对象

    一.Session内置对象 分析得知request内置对象中的属性只是在当次请求中有效,经过客户端跳转之后就无效,因为客户端跳转属于第二个请求,也就是说request只代表当次请求的对象,如果要让客户 ...

  6. 【原创】JAVA面试解析(有赞一面)

    本文的题目出自博客 http://www.54tianzhisheng.cn/2018/07/12/youzan/ 但是作者没有给出答案,博主斗胆来制作答案版. 引言 说在前面的话: 本文适合人群:急 ...

  7. Django组件 之中间件

    -------------------------------------------------------------------落花不是无情物,待到山花烂漫时. 中间件 中间件的概念 中间件顾名 ...

  8. 04-JavaScript之常见运算符

    JavaScript之常见运算符 1.赋值运算符 以var x=12,y=5来演示示例 运算符 例子 等同于 运算结果 = x=y   x=5 += x+=y x=x+y x=17 -= x-=y x ...

  9. Flask —— 信号(5)

    Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. pip3 install blinker 1. 内置信号 request_started = ...

  10. Visual Studio Code常用设置及快捷键

    1. Visual Studio Code常用设置 { // 控制是否显示 minimap(缩略图) "editor.minimap.enabled": false, // 控制折 ...