js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
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样式,修改属性)的更多相关文章
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- js事件,操作页面文档,计算后样式,数据类型
js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...
- JavaEE实战——XML文档DOM、SAX、STAX解析方式详解
原 JavaEE实战--XML文档DOM.SAX.STAX解析方式详解 2016年06月22日 23:10:35 李春春_ 阅读数:3445 标签: DOMSAXSTAXJAXPXML Pull 更多 ...
- HTML选择器的四种使用方法
选择器<style> 为了让.html代码更加简洁,这里引入选择器style 本文总共介绍选择器的四种使用方式 一.选择器的四种形式 1.ID选择器 id表示身份,在页面元素中的id不允许 ...
- 操作xml文档的常用方式
1.操作XML文档的两种常用方式: 1)使用XmlReader类和XmlWriter类操作 XmlReader是基于数据流的,占用极少的内存,是只读方式的,所以速度极快.只能采用遍历的模式查找数据节点 ...
- JS判断Android、iOS或浏览器的多种方法(四种方法)
第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> ...
- JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预
-任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel= ...
- css引入的方式有哪些_四种css的引入方式与特点
在网页中css主要负责html文档的样式显示,目前css主要有4种引入方式:行内式.内嵌式.导入式.链接式. 1.行内式 行内式也叫内联样式,是指标记的style属性中设定CSS样式,这种方式没有体现 ...
- 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
随机推荐
- 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 ...
- springboot中,页面访问不到静态资源
例一,静态资源放在默认的目录,如:resources/static或resources/templates 访问静态资源的时候,路径不应带上默认目录,因为springboot默认从这些目录下开始加载, ...
- B. Obtaining the String(模拟)
比较水的模拟 思路:就是模拟题意 注意:把数组开大点,开始wa了几次就是这个原因 #include<iostream> #include<string> #include< ...
- IDEA+API && SPI
JAVA中API和SPI的区别:https://blog.csdn.net/quanaianzj/article/details/82500019
- session和application内置对象
一.Session内置对象 分析得知request内置对象中的属性只是在当次请求中有效,经过客户端跳转之后就无效,因为客户端跳转属于第二个请求,也就是说request只代表当次请求的对象,如果要让客户 ...
- 【原创】JAVA面试解析(有赞一面)
本文的题目出自博客 http://www.54tianzhisheng.cn/2018/07/12/youzan/ 但是作者没有给出答案,博主斗胆来制作答案版. 引言 说在前面的话: 本文适合人群:急 ...
- Django组件 之中间件
-------------------------------------------------------------------落花不是无情物,待到山花烂漫时. 中间件 中间件的概念 中间件顾名 ...
- 04-JavaScript之常见运算符
JavaScript之常见运算符 1.赋值运算符 以var x=12,y=5来演示示例 运算符 例子 等同于 运算结果 = x=y x=5 += x+=y x=x+y x=17 -= x-=y x ...
- Flask —— 信号(5)
Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. pip3 install blinker 1. 内置信号 request_started = ...
- Visual Studio Code常用设置及快捷键
1. Visual Studio Code常用设置 { // 控制是否显示 minimap(缩略图) "editor.minimap.enabled": false, // 控制折 ...