JavaScript 随意整理2

08.29

# 全局对象
* escape/unescape()     对特殊字符编码/解码
* encodeURI / decodeURL    对url进行编码/解码
* encodeURIComponent / decodeURIComponent   对URL解码/解码
* eval()    把字符串当做代码执行


# JSON对象
* parse()  把josn字符串转换为对象
* stringify()  把对象转换为json字符串

 

08.30

# BOM(浏览器对象模型)
## window
#### 定义
* window是js在浏览器环境中 全局变量
* 函数就是window的方法
* 全局变量就是window的属性


#### 属性
* document
* location
* history
* screen
* navigator
* innerWidth   文档区域宽度
* innerHeight  文档区域高度
* outerWidth   浏览器窗口宽度
* outerHeight  浏览器窗口高度
* name 窗口的名字
* parent  父窗口
* top       顶层窗口
* length  子窗口的数量
* frames   子窗口的集合

 

cursor:pointer;光标为呈现一只手的样子;

<button οnclick="window.open('01s.html/网址','是本窗口的打开的话对本窗口命名写上名字','width=400,height=400')">对打开的窗口设置宽高</button>
#### 方法
* alert()   警告框
* confirm()   确认框
* prompt()   可输入弹框
* setInterval()
* clearInterval()
* setTimeout()
* clearTimeout()
* open() 打开新窗口
* close()  关闭窗口
* print()   打印


## location (地址位置)
#### 属性
* href  完整的url
* protocol   协议
* hostname  主机名
* port   端口号
* host    主机名和端口号
* pathname  文件路径
* search   查询部分
* hash     锚点部分
#### 方法
* reload() 重新加载当前文档。
* assign() 保存记录
* replace()不保存记录

 


## history (历史记录)
#### 属性
* length  历史记录的数量

#### 方法
* back()  回退一步
* forward()  前进一步
* go(n)  前进/后退 n步

 


## screen (屏幕)
#### 属性
* width  屏幕宽度
* height 屏幕高度

 



## navigator (导航)
#### 属性
* userAgent    平台、浏览器相关的信息
* platform      平台

 





# DOM (文档对象模型)



# 补充
### 浏览器内核
* 内核应该包含 渲染引擎 \ JS引擎
* 渲染引擎负责渲染HTML和CSS, JS引擎负责运行JS
* 现在提到浏览器内核也可以单指渲染引擎

### 常见的浏览器内核
* webkit   (chrom safari)
* blink      (webkit的改型,  chrome、opera)
* trident     IE
* Gecko    Firfox
* Kestrel  老欧朋

### URL URI 区别
* URI 标准  中包含 URN 和 URL
* URI:  统一资源标示符
* URN:统一资源命名符
* URL: 统一资源定位符

 

08.31

# 事件基础
### 绑定事件
* 把事件当做HTML元素的属性
    
     `<button οnclick="code...">`
* 把事件当做dom对象的方法
    
     `dom.onclick = function(){code....}`

*  事件监听方式
    * addEventListener(eventName, fn, true/false)
    * attachEvent(eventName, fn)


### 解除事件的绑定
* 绑定方式: 把事件当做html元素属性 / 把事件当做dom对象的方法
    
     重新绑定一个空的function,覆盖前面

* 绑定方式 是 事件监听方式
    * removeEventListener(event, fn)
    * detachEvent(event, fn)                                                 

### this的用法
* 循环给一组元素绑定事件的时候
* 事件作为html元素属性的时候,函数调用,传this表示 该元素


# 事件类型
### 鼠标事件
* click  单击
* dblclick   双击
* contextmenu  右击
* mouseover   鼠标进入元素
* mouseout    鼠标离开元素
* mousedown  鼠标按键按下
* mouseup       鼠标按键抬起
* mousemove   鼠标移动

### 键盘事件
* keydown  键盘按键按下
* keyup      键盘按键抬起
* keypress  键盘按键按下, 并不是所有的按键都可以触发(只有可以输入字符的按键)


# Event 对象
* clientX
* clientY
* keyCode

 

09.04

# Event对象
### Event种类
* mouseEvent
* keyboardEvent
* focusEvent

### 属性
* clientX
* clientY
* keyCode
* target    具体触发事件的元素


### 方法
* stopPropagation()   阻止冒泡
* preventDefault()      阻止默认动作

### 事件的冒泡和捕获





# 节点
### 节点分类
* document      9
* element         1
* attr            2
* text               3
* comment      8

### 属性
* nodeName
* nodeValue
* nodeType


# 从HTML获取元素
### 通过ID
* getElementById()
* 一个元素具有ID属性,会自动生成与之同名的全局变量

### 通过Name属性
* getElementsByName()
* IE9+ 所有的元素都有name属性
* IE9-   个别元素有name属性

### 通过标签名
* getElementsByTagName()
* docuemnt.images
* document.links
* document.anchors
* document.forms


### 通过class类型
* getElementsByClassName()
* IE9+

### 通过选择器
* document.querySelector()
* document.querySelectorAll()

### document.all
* 文档中所有的元素




# 文档节点的结构
### 节点的关系
* 父节点     父元素
* 子节点      子元素
* 兄弟节点    兄弟元素
* 祖先节点    祖先元素
* 后代节点   后代元素

### 节点相关属性
* parentNode
* childNodes
* firstChild
* lastChild
* nextSibling
* previousSibling


### 元相关元素
* parentElement
* children
* firstElementChild  IE9+
* lastElementChild   IE9+
* nextElementSibling    IE9+
* previousElementSibling   IE9+
* childElementCount   子元素的数量  IE9+
* ownerDocument     IE9+

 

09.05

# 属性
### 内置属性
* js对象和html标签有映射关系

### 自定义属性
* getAttribute()
* setAttribute()
* hasAttribute()
* removeAttribute()

### H5新增的自定义属性操作操作
* HTML:  `<tag data-attr="">`
* JS :  element.dataset.attr

### 把属性当做属性节点
* getAttributeNode(attrname)



# 元素的内容
### 作为HTML的元素内容
* innerHTML
* outerHTML

### 作为纯文本的元素内容
* innerText    会忽略多余的空格
* textContent   IE9+

### 作为Text节点操作




# 元素操作(节点)
### 创建元素
* document.createElement(tagName)

### 添加元素(给父元素添加子元素)
* appendChild(node)
* insertBefore(newNode, oldNode)

### 删除元素
* removeChild(node)

### 替换元素
* replaceChild(newNode, oldNode)

### 克隆节点
* cloneNode(false)



# 元素的尺寸大小
### 元素的位置
* getBoundingClientRect()
* offsetLeft/offsetTop
* clientLeft/clientTop
* offsetParent

### 元素的尺寸
* getBoundingClientRect()
* offsetWidth/offsetHeight
* clientWidth/clientHeight
* scrollWidth/scrollHeight


### 滚动距离
* scrollLeft
* scrollTop


# docuemnt 
### 属性
* URL    只读
* domain   只读

转载于:https://www.cnblogs.com/lwwnuo/p/7449783.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css scale 缩放基准点

使用transform-origin来进行控制 在使用transform方法进行文字或图像的变形时&#xff0c;是以元素的中心点为基准点进行的。使用transform-origin属性&#xff0c;可以改变变形的基准点。 用法&#xff1a;transform-origin: 10px 10px; 共两个参数&#xff0c;表示相对左上角…

闪回区设置问题

oracle10g提供了一个叫做闪回恢复区(Flashback recovery area)的新特性&#xff0c;可以将所有恢复相关的文件&#xff0c;比如flashback log,archive log,backup set等&#xff0c;放到这个区域集中管理。 查看闪回区内容及使用情况&#xff1a; select * from v$flash_recov…

多主机Docker容器的VLAN划分

原文发表于cu&#xff1a;2016-06-06 参考文档&#xff1a; Docker网络的4种模式&#xff0c;pipework/ovs的简单使用等&#xff1a;http://www.infoq.com/cn/articles/docker-network-and-pipework-open-source-explanation-practice Dockerpool全文档&#xff1a;https://yea…

css p 文本不换行,超出文字显示省略号

.text {// 文本强制不换行white-space: nowrap;// 文本溢出显示省略号text-overflow: ellipsis;// 溢出的部分隐藏overflow: hidden; }

oracle监听无法启动常用解决办法

在cmd下使用lsnrctl start无法启动监听程序提示&#xff1a;TNS-12560: TNS: 协议适配器错误在cmd下进入lsnrctl&#xff0c;输入start提示&#xff1a;TNS-12557: Message 12557 not found; No message file for productNETWORK, facilityTNSns secondary err code: 12560请检…

mongodb 高级查询 统计记录条数

使用count()方法查询表中的记录条数&#xff0c;例如&#xff0c;下面的命令查询表users的记录数量&#xff1a; db.users.find().count();

SQL语句优化

【数据库优化的目的】 1.避免出现页面访问错误 由于数据库连接timeout产生页面5XX错误。 由于慢查询造成页面无法加载。 由于阻塞造成数据无法提交。 2.增加数据库的稳定性 很多数据库问题都是由于低效的查询引起的。 3.优化用户体验 流畅的访问速度。 良好的网站功能体验。 【…

ORA-27101 shared memory realm does not exist 错误处理

ORA-27101 错误处理 racle Database的主机被异常关机&#xff0c;重新启动电脑&#xff0c;Database报ORA-27101 shared memory realm does not exist 错误&#xff0e;可能是windows的oracle service 损坏&#xff0c;可以重建service试试是否可以修复。删除Service&#xff1…

js 获取 当天凌晨时间

需要进行时间比较的时候&#xff0c;一般会遇到从凌晨开始算 new Date(new Date().setHours(0, 0, 0, 0))

移动数据文件、控制文件、日志文件

1. ALTER DATABASE方法&#xff1b;-- 此方法要求关闭数据库-- 用此方法&#xff0c;可以移动任何表空间的数据文件。STEP 1. 下数据库&#xff1a;$ sqlplus /nologSQL> CONNECT INTERNAL;SQL> SHUTDOWN;SQL> EXIT;STEP 2.用操作系统命令移动数据文件&#xff1a;-- …

angular的性能分析 -随记

$watch 的实现原理和性能分析 只有双向绑定的 scope 才会被加入$watch队列&#xff0c;或者手动绑定$watch的$scope所有放在 $scope 中的变量或函数都被加入到了$watch队列当中&#xff0c;每次只要$scope中的一个变量的值发生变化&#xff0c;Angular就会自动调用$apply或者$d…

mongoose 联表、及联查询 使用populate

mongoose 中 使用 populate 进行多表联合查询 drawApply new Schema({salesId: { type: Schema.ObjectId, ref: sales },money: Number,status: { type: Number, default: 0 },createTime: { type: Date, default: Date.now } });sales new Schema({name: { type: String, r…

数据泵使用心得

数据泵在数据的导入、导出方面突出了它特有的优势&#xff0c;给数据库管理人员提供了极大的方便expdp导出数据 expdp常用参数介绍ATTACH 连接到现有作业, 例如 ATTACH [作业名]。COMPRESSION 减小有效的转储文件内容的大小关键字值为: (METADATA_ONLY) 和 NONE。CONTENT 指定要…

[2016-03-15]rabbitmq notes

安装 系统&#xff1a;CentOS 6 环境&#xff1a; rabbitmq 依赖的Erlang环境包 wget https://www.rabbitmq.com/releases/erlang/erlang-18.1-1.el6.x86_64.rpm Server&#xff1a;rabbitmq-server安装包 wget https://www.rabbitmq.com/releases/rabbitmq-server/v3.5.7/rabb…

mongoose 定义经纬度数据类型

本来想用Double在mongoose中直接定义经纬度的。但是发现mongoose的数据类型只有下面几种。 String Number Date Buffer Boolean Mixed ObjectId Array Decimal128 Map所以我们使用Decimal128来定义经纬度 const LocationsSchema new mongoose.Schema({latitude: {type: mong…