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. 设置导航栏 self.navigationItem.titleView 居中

    喜欢交朋友的加:微信号 dwjluck2013-(void)viewDidLayoutSubviews{ [self setDisplayCustomTitleText:@"每日头条&quo ...

  2. mysql状态查询

    在监控中,都是去探测这些状态数据,然后换算到时间刻度上,像zabbix. show status like 'uptime'; --查看select语句的执行数 show [global] statu ...

  3. 转 DG switchover

    I. Pre-Switchover Checks These steps should be completed before the switchover planned maintenance w ...

  4. LM358与TL431验证

  5. php出现Warning: file_put_contents，failed to open stream

    Warning: file_put_contents(D:/wwwroot/jinxiongdi/web/temp/caches/f/index_40F756F0.php) [function.fil ...

  6. hdu4832Chess(dp)

    链接 这题第一想法是矩阵,不过范围太大了,然后就没有思路了.. 之后看到群里的解法,行和列可以分着走,两者是互不影响的,这样就把二维转换成了一维,直接dp求出就可以了. 然后再组合相乘一下. #inc ...

  7. mysql写存储过程并定时调用

    设置一个定时任务:运行以下SQL -- 创建一个表test:字段endtime CREATE TABLE test (endtime DATETIME);   -- 创建函数 :向test插入endt ...

  8. springMVC 与 struts+hibernate+spring优缺点

    springMVC: Spring 框架是高度可配置的,而且包含多种视图技术,例如 JavaServer Pages(JSP)技术.Velocity.Tiles.iText 和POI.Spring M ...

  9. 编写Robotium测试程序

    6.编写Robotium测试程序 1)导包 //导入需要测试的工程 import com.example.android.notepad.NotesList; //robotium提供的测试用类 im ...

  10. eclipse中增加matplotlib、web应用’和pip框架包

    由于python主要应用在Linux下和相关的vc下,对于熟悉eclipse的我来说,这是一个难题,通过在命令行中转pip可以安装python任何信息,具体的插件直接在一下网页中搜索https://p ...