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. Codeforces Round #541 (Div. 2) C.Birthday

    链接:https://codeforces.com/contest/1131/problem/C 题意: 求给的n个数,相邻差值最小的排列方式.1-n相邻. 思路: sort后隔一个取一个,取到底后再 ...

  2. 命令行视频下载工具 you-get 和 youtube-dl

    you-get 和 youtube-dl 都是基于 Python 的命令行媒体文件下载工具,完全开源免费跨平台.用户只需使用简单命令并提供在线视频的网页地址即可让程序自动进行嗅探.下载.合并.命名和清 ...

  3. 《深入理解java虚拟机》笔记（1）运行时数据区域

    1.Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”,墙外面的人想进去,墙里面的人却想出来. 2.运行时数据区域划分 java虚拟机在执行java程序的过程中会把它所管理的内存划 ...

  4. android开发学习 ------- 【转】 android中的单例模式 （详解）

    https://blog.csdn.net/u011418943/article/details/60139644     这篇文章 前因后果 都说出来了 ,值得学习. https://blog.cs ...

  5. session 跟 cookie 关系

    面试经验: 谈到Session的时候就侃Session和Cookie的关系:Cookie中的SessionId. 和别人对比说自己懂这个原理而给工作带来的方便之处.   客户第一次发送请求给服务器,此 ...

  6. tomcat在idea中启动乱码

    server,localhost log,catalina log分别乱码 打开tomcat/conf/目录下修改logging.properties 找到"utf-8"行更改为 ...

  7. java面试题（基础部分）

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  8. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）

    4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...

  9. Spring MVC系列[2]——参数传递及重定向

    1.目录结构 2.代码 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&qu ...

  10. vue.js学习总结

    下面使用的命令工具为git bash 使用命令行工具搭建vue.js项目 vue.js官网命令行工具安装 为了提升安装速度,建议将 npm 的注册表源设置为国内的镜像 1.输入命令:npm insta ...