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. OS 内存泄漏 导致 整个aix主机block

    问题 aix 主机 1.数据库主机使用vmstat 监控,隔几分钟 就是block 爆满. cpu 没有瓶颈,I/O 显示本地磁盘hdisk0和hdisk 1 是爆满. vmstat 同时显示大量pa ...

  2. node项目 Error: Cannot find module 'mongoose'

    这是因为你部署的项目没有添加mongoose,使用 在自己项目的根目录下:npm install mongoose --save

  3. 洛谷 P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers

    贪婪的送礼者Greedy Gift Givers 难度:☆ Code: #include <iostream> #include <cstdio> #include <c ...

  4. 【javascript】2017-9-12 腾讯笔试小Q升序算法

    刚做完笔试,腾讯笔试系统真的不友好,作为一个前端,我只会用js写编程题,然而,然而腾讯笔试系统连js输入函数都没给,还不准跳出页面,那个调试结果一直显示错误,我一直找不到错误在哪,心累. 只做了一道笔 ...

  5. 详解HTML中的表格标签

    详细代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  6. list control 【转】

    1. CListCtrl 风格 LVS_ICON: 为每个item显示大图标      LVS_SMALLICON: 为每个item显示小图标      LVS_LIST: 显示一列带有小图标的ite ...

  7. uvm_reg——寄存器模型（三）

    uvm_reg 是uvm_reg_field , 包含所有uvm_reg_field 所有的函数.

  8. 用YII实现多重查询(基于tag)

    场景: 有一个饭店表 restaurant,存放所有饭店记录.我需要一个功能,将饭店按照不同的条件进行多重查询.就象这样:   氛围:浪漫 / 商务会谈 / 茅草屋 菜系:川菜 / 鲁菜 / 家常菜. ...

  9. selenium-WebElement接口常用方法

    1.submit()方法用于提交表单. 例如:在收索框输入关键字之后的“回车”操作,就可以通过submit()方法模拟. 例如: from selenium import webdriverdrive ...

  10. 将从SQL2008 r2里备份的数据库还原到SQL2008中

    从标题可以看出这是未解决上一篇遗留问题写的,现在我也不知道这个可不可以成功,方法似乎查到了一种,具体怎样还不清楚:而且,我想说的是“我踩雷了”. 这篇的主角是“Database Publishing ...