js:运行在浏览器的脚本语言

js引入

1.行间式:存在于行间事件中

<div id="div" onclick="this.style.color="red"">文本内容</div>

   <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="div1" onclick="this.style.backgroundColor='yellow'"></div>

</body>

注:onclick单击 background-color,js语法不支持-,支持小驼峰backgroundColor

2.内联式:存在于页面script标签中

<script >

    div.onclick=function(){

this.style.backgroundColor="yellow"}

</script>

<body>

<script>

    div1.onclick = function () {

        this.style.backgroundColor="yellow"}

</script>

</html>

#内联式必须放在标签后面,故一般放在body和/html之间

3.外联式:存在于外部js文件中,通过script标签src属性连接

js文件:

div1.onclick = function () {this.style.backgroundColor="yellow"}

html文件:

</body>

<script src="js/js.js">

    </script>

</html>

ps:还是要将引入语句放在标签后,即放在body和/html之间

js选择器

getElement系列

html中id重复不会报错

但是js解析中重复的id会解析不出来

故id应该唯一

#通过id找元素对象

var box= document.getElementById("box");#此方法可以找到第一个,重复的id不再起作用

<body>

    <div id="div1"></div>

    <div id="div1"></div>

</body>

<script>

         document.getElementById("div1").onclick=function () {

        this.style.backgroundColor="yellow";

    }

</script>

查看查找结果

<script>

    var box = document.getElementById("div1")#有重复id只显示第一个

    console.log(">>>>>>>>",box)

</script>

右击检查,然后打开console部分就可以看到打印结果

#通过类名查找元素对象

<script>

var boxs = document.getElementsByClassName;#Elements要有s,类名可以重复,故要复数,以列表形式保存结果

</script>

    <div class="div1">1</div>

    <div class="div1">2</div>

</body>

<script>

    var boxs = document.getElementsByClassName("div1");

    console.log(">>>>>>>>",boxs)

#通过标签名查找元素对象

var divs = document.getElementsByTagName("div");#Elements要有s,标签名可以重复,故要复数,以列表形式保存结果

var div = document.querySelector(".bb");#只能获取检索到第一个满足条件的元素对象

var divs = document.querySelectorAll(".body .box1.bb")#所有满足条件的元素对象

总结,参数采用的就是css选择器语法,以后就用这两种

事件

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

box.onclick = fuction(){

this.style.color = "red"}

操作页面文档

1.通过选择器获取页面元素对象

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

2.为该对象绑定事件

box.onclick = function(){①|②|③};

3.通过事件中的功能操作元素对象

①修改内容

this.innerText = "innerText";#不能解析html标签

this.innerHTML = "innerHTML";#可以解析html标签,修改内容就用它

②修改样式

修改的是行间式=>优先级高于所有内联外联样式(没有设置!important)

this.style.color = "green";

this.style.fontsize = "12px";

③修改类名

直接修改类名,会丢失之前类名下的属性们

this.className = "box1";

在原类名基础添加类型

this.className += " box1"; #多类名之间用空格隔开,所有做字符串拼接时一定需要添加空格

清除类名

this.className = "";

将类名等于空字符串就是置空类名

计算后样式

```python

内联式和外联式书写的样式都叫计算后样式

如何获取提前设置好的样式属性值

var box = document.querySelector(".div1");

var ftsize = box.style.fontsize;#这种方式永远操作的是行间式

console.log(ftsize)

如何获取计算后样式:#getComputedStyle(元素对象,伪类),属性名,行间式和计算式都可以获取,但是以行间式为主

var box = document.querySelector(".div1");

var ftsize = getComputedStyle(box,null).fontSize;

数据类型

数字类型Number

var al = 10;

var a2 = 3.14;

字符串 String

var s1="123";

var s2='456';

undefined 未定义

var u1;

var u2 = undefined;

Boolean:布尔

var b1 = true

vat b2 = false

typeof()来查看类型

引用类型

Object

var obj ={};

Function

var func = function(){}

Null

var n = null

js事件,操作页面文档,计算后样式,数据类型的更多相关文章

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

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

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

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  3. js闭包 选择器 面向对象 事件 操作页面

    闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer ...

  4. Babylon.js官方性能优化文档中文翻译

    在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...

  5. python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）

    11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...

  6. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  7. 文档对象模型操作xml文档

    简介 :文档对象模型(DOM)是一种用于处理xml文档的API函数集. 2.1文档对象模型概述 按照W3C的定义,DOM是“一种允许程序或脚本动态地访问更新文档内容,结构和样式的.独立于平台和语言的规 ...

  8. Java文件操作系列[3]——使用jacob操作word文档

    Java对word文档的操作需要通过第三方组件实现,例如jacob.iText.POI和java2word等.jacob组件的功能最强大,可以操作word,Excel等格式的文件.该组件调用的的是操作 ...

  9. 用Python操作excel文档

    使用Python第三方库 这一节我们学习如何使用Python去操作Excel文档.如果大家有人不知道Excel的话,那么建议先学一学office办公基础.这里想要操作Excel,必须安装一个Pytho ...

随机推荐

  1. JSON对象 JSON字符串 JSON数组

    JSON对象: var str2 = { "name" :  "andy", "gender" : "man" , &q ...

  2. [BZOJ3128]a+b Problem

    题解 最小割+主席树优化建图 首先看到每个点只有\(0/1\)两种状态就想到最小割 然后由于有一个限制是点\(i\)是黑点且有符合条件的白点就会减去\(p_i\) 所以我们将\(S\)集合设为黑点集合 ...

  3. python入门之运算符

    计算运算符 + 加 - 减 * 乘 / 除 % 取模,返回余数 ** 幂 // 取整除,返回商的整数部分 比较运算符 == 比较是否相等 != 比较是否不等于 <> 比较是否不等于 > ...

  4. Github开源项目单

    以下涉及到的数据统计与 2019 年 5 月 1 日 12 点,数据来源:https://github.com/trending/java?since=monthly . 下面的内容从 Java 学习 ...

  5. 遍历list集合的三种方式

    List<String> list1 = new ArrayList<String>(); list1.add("1"); list1.add(" ...

  6. 《Openstack的搭建》RHEL6.5

    Openstack就是搭建一个较为完整的虚拟化平台,把一个完整的物理机划分成若干个虚拟机来跑,从而实现资源的充分利用. Openstack对硬件的要求很高,要是你的物理机内存是4G的话,虚拟机的内存给 ...

  7. js 学习网站

    1.  Mozilla Developer Network(MDN) 这里你可以找到官方的完整的javascript参考,还有许多有用的指导,教程以及文章,从基本javascript使用到最佳实践以及 ...

  8. 学习typescript(一)

    环境 必装软件 node,推荐 node 8.0 npm,推荐 npm 5.0 git, 最新版 vscode, 编绎器 必装包 tsc: npm install -g typescript typi ...

  9. Eclipse集成Maven环境(出现jar的解析或者缺失问题)(或者出现Invalid classpath publish/export dependency /common. Project entries not supported)的统一整理

    在正确配置完Maven,和Maven IntegrationFor Eclipse之后,新建了一个Maven Project 和一个Maven Module,发现新建的Module项目下的pom.xm ...

  10. 由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时 不一致的bug，各种解决方案。

    由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...