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. css实现发光的input输入框

    效果图截图: 案例代码示下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. 应用日志获取-web系统

    1 场景 应用使开发写的,但应用使部署再服务器上,而开发没有ssh登陆服务器的权限. so,开发总是请运维查日志,下载日志. so and so,运维要花很多时间帮开发去搞日志. 这是件很没意义的事, ...

  3. 模拟IO 读写压力测试

    #### 本实验室通过创建一个测试表myTestTable ,分配在一个足够大小的表空间. ###然后通过 insert select 方式,创建100个后台进程进行读写操作,每个后台进程预计时间20 ...

  4. 转 PHP 正则表达式 以及案例

    2．Perl兼容的语法扩充 Perl兼容的正则表达式的模式类似于Perl中的语法,表达式必须包含在定界符中,除数字.字母.反斜线外的任何字符都可以作为定界符.例如,表达式’/^(?i)php[34]/ ...

  5. 142. O(1)时间检测2的幂次

    用 O(1) 时间检测整数 n 是否是 2 的幂次. 您在真实的面试中是否遇到过这个题? Yes 样例 n=4,返回 true; n=5,返回 false. class Solution { publ ...

  6. JS语法学习笔记

    JS语法: JS知识点一览图 JS知识点一览图 在function中写this,在本function中可以显示,写Person则显示undefined. 在function中写Person,在func ...

  7. 闹心的CSDN

    近来搜索技术文章时,每次来到csdn上时,显示全文就提示登陆. 唉登陆就登陆吧,记不清账号了,就用手机号获取验证码.然后更改密码.我靠,密码居然要8位以上,要有大小写字母.数字和标点符号的组合... ...

  8. Linux中yum、rpm、configure使用介绍

    安装程序命令介绍 安装包选择策略:能上外网:yum方式.绿色方式->不能上外网:rpm方式.configure方式 1.yum命令yum安装包时,会包所依赖的包也会安装到系统,将源换成163的源 ...

  9. Session 机制和 Cookie 机制

    Session 机制和 Cookie 机制 HTTP协议是无状态的, 而Cookie和Session都是在无状态的基础上希望实现有状态的效果, 两者是在客户端或者是服务端使用缓存等手段来实现状态的维护 ...

  10. UVA 427 The Tower of Babylon 巴比伦塔（dp）

    据说是DAG的dp,可用spfa来做,松弛操作改成变长.注意状态的表示. 影响决策的只有顶部的尺寸,因为尺寸可能很大,所以用立方体的编号和高的编号来表示,然后向尺寸更小的转移就行了. #include ...