js事件,操作页面文档,计算后样式,数据类型

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;

数据类型python

数字类型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

原文地址:https://www.cnblogs.com/robert-zhou/p/10305968.html

时间: 2024-11-06 09:55:24

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

js仿百度文库文档上传页面的分类选择器_第二版

仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器: 此版本把HTML,CSS,以及图片都封装到"category.js"中,解决因文件路径找不到样式及图片的问题: 源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577 初始状态,一个页面使用两个,可以初始化之前选中的分类: 选择状态: 当选中一个分类后,会触发"onChange"事件,如上图中的"您选择的分类编

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

闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer() { var num =10; function inner() { //1.在inner函数中,使用了outer的局部变量num return num; } return inner; } var innerFn = outer(); //2.借助闭包,将局部变量num的声明周期提升了 var

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

在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 Table of contents 内容列表 How To Optimize Your Scene 如何优化你的场景 Use TransformNode instead of AbstractMesh or empty meshes 使用变换节点代替抽象网格或者空网格 Changing per me

javascript DOM操作HTML文档

文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的HTML和XML对象集,并有一个标准接口来访问并操作他们,即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制. 1. DOM概述 文档对象模型定义了JavaScript可以进行操作的浏览器,描述了文档对象的逻辑结构及各个功能组件的标准接口.主要包括以下内容: 核心Jav

文档对象模型操作xml文档

简介 :文档对象模型(DOM)是一种用于处理xml文档的API函数集. 2.1文档对象模型概述 按照W3C的定义,DOM是“一种允许程序或脚本动态地访问更新文档内容,结构和样式的.独立于平台和语言的规范化接口.DOM是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口,它以树状结构表示HTML和XML文档,定义了遍历这个树和检查.修改树的节点的方法和属性. DOM的核心API还允许你创建和填充文件.加载文档并保存. 2.2DOM实现 微软的net框架在Systemx.x

ElasticSearch常用操作:文档篇

[TOC] 1 新建文档 1.1 指定id PUT my_blog/article/1 { "id":1, "title":"elasticsearch", "posttime":"2017-05-01", "content":"elasticsearch is helpfull!" } 返回: { "_index": "my_blog&

C#工具类:使用iTextSharp操作PDF文档

iTextSharp是一个用于操作PDF文件的组件DLL程序,在C#程序中可以引用iTextSharp组件,用于开发与PDF文件相关的报表等功能,利用iTextSharp组件提供出来的方法接口,我们可以实现很多与PDF文档有关的操作,如打开PDF文档对象.往PDF文档中添加段落.添加图片链接等等,功能非常的强大.这边简单对iTextSharp类进行了封装,提供一些常用的PDF操作方法. iTextSharp官网:http://www.itextpdf.com/ (英文好的建议直接查看原始文档).

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

使用Jquery 操作 sharepoint2013文档库(增删改查)

使用Jquery 操作 sharepoint2013文档库(增删改查) [html] view plaincopyprint? //https://xxx.sharepoint.com/AAA/_api/web/GetFolderByServerRelativeUrl('/AAA/SingtelLaunchProcess')/Files //https://xxx.sharepoint.com/AAA/_api/web/GetFolderByServerRelativeUrl('Document