js 的基础知识
一、弱类型意识
js变量是没有类型的
var a = 1; //a 就是一个变量 不要提什么类型
变量可以赋任何类型的值
类型仅仅是值的性质 与变量无关
Js的基本类型
变量未赋值时,其值为undefined
只有一个number类型表示数字 不区分整数还是小数
二、动态语言
动态语言针对的不是变量
而是值 尤其是对象
Var obj={name:”changwei”,age:3}; //对象字面量
= 后面的值是什么类型?
别提什么弱类型,因为弱类型是针对变量的
此处问的是值是什么类型!
Js是动态语言, 可以随意创建对象
而不需要有与之对应的类
Js中没有class(ES6中新加了class
但它实际上与Java中的class不一样)
动态语言不仅可以随意创建对象 而且可以随意向对象中
还可以从对象中删除属性及方法、添加属性、方法等成员
这个特性对Java来说是不可想象的
三、函数式编程
函数(方法)可以作为参数传递给另一个函数 [函数也是值]
函数实际上也是一个普通变量
普通变量也可以附一个函数作为值
函数实际上是一个对象,这个对象中包含了它的源代码
函数名 以及调用这个源代码的方法
function add(a,b){
return a+b;
}
add 是变量吗? 是
函数是个对象吗? 是
函数是一个特殊的对象
原型
原型存在的原因是因为js中没有class
无法共享方法及静态成员
原型是一个容器(对象) 可以存放被大量对象共享的方法及属性
Js定义了一条寻找属性/方法规则:
先在对象本身上找 找到就是用
找不到就去原型中找
原型找不到 就去原型的原型中找
..............
直到穷尽所有原型为止(原型链);
DOM
Document Object Model 文档对象模型
使劲就是给网页上的标签建立的,模型
每一个都用一个对像来表示
每一类标签都是一个类
给网页上标签建模的目的是为了让js能够
以编程的方式控制
生成网页
DOM 是控制网页的api
第一类api :获取标签对象
document.getElementById(“id”)
document.getElementsByTagName(“tagName”)
document.getElementsByName(“name”)
document.getElementsByClassName(“className”)
H5时代新增的2个方法
document.querySelector(css筛选器) 返回一个标签
document.querySelectorAll(CSS筛选器) 返回要找到所有标签
第二类API: 操作标签的属性
tag.属性名=值
var value = tag .属性名
tag.setAttribute(属性名,值)
var value = tag.getAttribute(属性名)
第三类: 控制标签的样式
tag.style.color=”red”;
tag.style.fontSize=’12px’
Tag.style.font-size ((不可用))
tag.style[‘font-size’]=’12px’
样式类
Tag.className=”样式类1,样式类2”;
Tag.classList.add(“样式类1”) 往上加
Tag.classList.remove(“”) 去掉
Tag.classList.togggle(“”) 没有就加上
有的话就去掉
Tag.classList.contains(“”) 判断是否有指定的样式类
第四类:创建 添加
删除标签对象的API
Var tag = document.createElement(“标签名”)
tag.属性名=值;
Tag.setAttribute(属性名 值)
parentTag.appendChild(tag) 追加到父类的标签中
tag.insertBefore();
tag.insertAdjecentElemrnt(“四种位置”,newTag);
tag.insertAdjecentHTML(‘四种位置’,文本字符串);
tag.remove();
第五类:标签之间的关系:
tag.parentNode 上级标签
tag.childdren 下级标签
tag.childNodes 下级节点
tag.previousSibling 前面的兄弟标签
tag.nextSibling 后面的兄弟标签
第六类:事件监听
鼠标事件 click(单击) dbclick(双击) context(右击)
Mouseover(在上面) mouseout(不在上面)
mouseenter(进入) mouseleave(离开)
Mousemove(移动) mousewheel(滚动)
衍生出的拖拽事件Drag dragstart dragenter dragleave drop
衍生出的触控事件Touchstart touchend touchleave
键盘事件
Keyup(按键弹起) keydown(按下,不放手会连续触发) keypress
窗口事件: resize close
打印事件
动画事件
事件对象:当事件发生时,浏览器会生成一个事件对象
将事件相关的数据都放入这个对象中 如哪个标签触发了事件 事件发生时
鼠标的位置 键盘按键的状态(Ctrl/shift等是否按下 按下那个键?)
监听事件:
tag.on 事件名= function(){
事件发生时会执行函数
}
// 只能挂接一个监听函数
tag.addEventiListener(‘事件名’,function(){
})
//可以为一个事件挂接多个监听函数
tag.remoceEventiListener(‘事件名’)
js 的基础知识的更多相关文章
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- 001/Node.js(Mooc)--基础知识
一.Node.js基础知识 node.js用C++语言编写. 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时 ...
- node.js的基础知识
第一部分知识: .命令行窗口(小黑屏).CMD窗口.终端.shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令: dir 列出当前目录下的所有文件 c ...
- js的基础知识笔记
目录 一.基本数据类型 二.函数 三.面向对象 一.基本数据类型 1.使用var声明变量.使用;结尾.使用{}表示代码块.使用驼峰式命名 2.变量是弱类型的,即并不严格要求声明变量的类型,一个变量可以 ...
- 【JS】基础知识
引言 在互联网的演化过程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主. 2005年以后,互联网进入了Web2.0时代,各类似桌面软件的Web应用大 ...
- 二、js中基础知识
该篇文章主要是强化一下自己javaScript的基础,让写代码变得更轻松些.基础好的请忽略. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解 ...
- JS的基础知识
前言:写前端代码时的各种取值纠结,让我决定我必须要好好学一下js............加油~ $("#tr"+id).remove() 删除某一行,而不用刷新页面 HightCh ...
- js函数基础知识
[函数的声明及调用] function 函数名(参数1,参数2,....){ //函数体代码 return返回值: } 1.函数的调用: ①直接调用:函数名(参数1的值,参数2的值,....) ②事件 ...
- three.js引擎基础知识—摄像机、场景及渲染器
一.three.js采用右手坐标系: x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外,如下图右: 二.3D编程三要素:场景.渲染器.摄像机 1.场景:创建的物品和模型都需放入场景中 threejs ...
- JS常用基础知识
前言:在js中dom和bom是我们操作的基本,在最初接触时候我也懵,但是后来慢慢发现其实bom就是操作浏览器,而dom就是操作文本框节点.
随机推荐
- css3-rem
http://www.w3cplus.com/css3/define-font-size-with-css3-rem https://mp.weixin.qq.com/s/DpLXJhfCHsgrbg ...
- python使用pyqt写带界面工具
上篇介绍的使用python自带tkinter包,来写带界面的工具. 此篇介绍使用pyqt来开发测试工具. tkinter的好处是python官方自带,上手容易(但手写控件复杂),布局和摆放都不直观和容 ...
- OC中Runtime浅析
近期了解了一下OC的Runtime,真的是OC中非常强大的一个机制,看起来比較底层,但事实上能够有非常多活用的方式. 什么是Runtime 我们尽管是用Objective-C写的代码,事实上在运行过程 ...
- Java实现匿名内部类的简单应用
在查看数码相片时,通常会使用一款图片查看软件,该软件应该能遍历文件夹下的所有图片并进行显示.编写程序,实现一个图片查看软件,它可以支持6张图片,通过单击不同的按钮就可以查看不同的图片. 思路分析:就是 ...
- DATAGUARD的搭建
ORACLE Data Guard 理论知识 请查看此blog :http://blog.csdn.net/haibusuanyun/article/details/11519241 Oracle D ...
- BugHD 与你的应用一起成长
BugHD 新增功能 1.新增安装量.启动量的统计功能 BugHD SDK 1.3.0新增安装量.启动量的统计功能,在崩溃分析页面右上角可看到安装量和启动量. BugHD 体验优化 1.Android ...
- ListView实现多种item布局的方法和注意事项
这篇文章的效果也是大家常见的,各种通讯应用的对话列表都是这种方式,像微信.whatsapp.易信.米聊等.我们这篇文章也权当为回忆,形成简单的笔记.这篇文章参考了2009年Google IO中的< ...
- [OSX] 使用 MacPorts 安装 Python 和 pip 指南
Mac OS 未预装任何在 Unix/Linux 中常见的命令行包管理工具,Mac OS 中的 App Store 和自身的软件升级功能可以下载更新许多比较好的应用,但这些应用多数是满足普通消费者需求 ...
- thinkjs 中增加过期时间
使用thinkjs搭建的项目需要实现一小时后过期的功能:于是对比了新建项目与原有项目的不同之处: 官网中给的介绍:https://thinkjs.org/zh-cn/doc/2.2/a ...
- iOS - 扩展UIButton的响应区域
扩展UIButton的响应区域 引言 通常在iOS开发中通常会遇到产品说按钮的响应区域不大 而UI给我们的设计是按钮的面积 而不是按钮的响应面积 所以在这种情况下需要我们自己去扩展按钮的响应区域 思考 ...