博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端知识 备忘录
阅读量:6939 次
发布时间:2019-06-27

本文共 4065 字,大约阅读时间需要 13 分钟。

HTML

  • input类型的checkbox和radio,还有select类型一样显示文字写在外面
  • input属性的按钮类型则不同,包括button和submit,其value属性就是显示值。
  • 但是file按钮不同,file类型也算是一个按钮。其只需要一个name属性即可,value属性无用
  • input是file类型按钮的话,表单属性必须是如下

JavaScript

详细参考手册,点击

位置选择: 为了用户更加快捷的打开网页,增加友好度。  把js放在body标签内的最下面 
基本数据类型数字  数字就包括了整型和浮点型,略

 

字符串

obj.length 长度

obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号

数组

obj.length 数组的大小

obj.push(ele) 尾部追加元素

obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(起始位置, 删除个数, 值, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序

"分隔符".join(['X','XX']) # python中

['X','XX'].join('分隔符') # JavaScript中

字典  #var arr = {fff:'dddd'}; ,注意不用键值不用''号也可以。

this 解析

总结:一句话,谁调用这个函数,函数内部的this就是谁。需要注意的是,若原生js函数里面有jquery函数,例如ajax,外层this会被内层this所覆盖。

原生JavaScript中的this对象分三种情况
-在类中,表示实例化本身
-在普通函数中:一般为window对象。但对于事件函数,如果是函数名绑定,例如<a οnclick=func> </a>,则是标签本身,否则还是window对象
-直接写在标签的响应事件中,标签本身的对象。 <input value='ddd' οnclick='console.log(this);'>

function Car(color, door) {                alert(this)                this.showColor = function () {                    alert(this)                };            } // object object                    (function () {                      alert(this);        })()  //windows object

元素查找

document.getElementById('i1') 根据ID获取一个元素

document.getElementsByTagName('div') 根据标签名获取标签集合
document.getElementsByClassName('div') 获取class多个元素(列表)
document.getElementsByName 获取name多个元素(列表)

querySelector()

接收CSS选择符,返回匹配到的第一个元素,没有则null

querySelectorAll()

接收CSS选择符,返回一个数组,没有则返回[]

parentNode          // 父节点childNodes          // 所有子节点firstChild          // 第一个子节点lastChild           // 最后一个子节点nextSibling         // 下一个兄弟节点previousSibling     // 上一个兄弟节点parentElement           // 父节点标签元素children                // 所有子标签firstElementChild       // 第一个子标签元素lastElementChild        // 最后一个子标签元素nextElementtSibling     // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

文本操作

innerText    所有的纯文本内容,包括子标签中的文本innerHTML    所有子节点(包括元素、注释和文本节点)appendData()    追加 value 值  input value获取当前标签中的值; select 获取选中的value值 ; textarea value获取当前标签中的值

‘类’的操作

tag.className='c1' 直接整体做操作tag.classList.add('c2') 添加指定样式tag.classList.remove('c2') 删除指定样式

样式操作

通过元素节点的style属性访问document.getElementById("p2").style.color="blue"style.cssText    CSS模式的修改style.length     · 批量改变属性例子tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性 

属性操作

可以看作JavaScript的反射

 
  • 元素节点和以下操作之一,若有则访问,若无则增加

1、“.” 操作

2、“[ ]”操作

 
attributes   //字典列表var x=document.getElementById("myHeader");x.attributes["onclick"].nodeValue="alert('dd')"   alert(x.attributes["onclick"].nodeValue);setAttribute(key,value) // 设置标签属性removeAttribute(key) // 移除标签属性attributes // 获取所有标签属性getAttribute(key) // 获取指定标签属性

重要方法

console.log                // 输出框alert                      // 弹出框confirm                    // 确认框// URL和刷新location.href              // 获取当前URLlocation.href = "url"      // 设置URL 重定向location.reload()          // 重新加载,刷新// 定时器setInterval                // 多次定时器clearInterval              // 清除多次定时器setTimeout                 // 单次定时器clearTimeout               // 清除单次定时器 document.getElementById("f1").submit() //提交表单

绑定事件的两种方式

a. 直接标签绑定 οnclick=’xxx()’ onfocus
b. 先获取Dom对象,然后进行绑定
document.getElementById(‘xx’).onclick
document.getElementById(‘xx’).onfocus

 

javascript原型的作用是节省内存,具体做法是将函数都定义成一份,不用每个对象重复定义函数,

function Foo(n){

this.name = n;
}
// Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
}

转载于:https://www.cnblogs.com/ziyide/p/9096113.html

你可能感兴趣的文章
python ----列表、字符串、元组之间转换小结
查看>>
python基础之socket编程
查看>>
NYOJ 45( 分治,大数)
查看>>
网络语音技术
查看>>
【酷熊科技】工作积累 ----------- C#自动添加using引用命名空间
查看>>
通达信公式-涨幅限制
查看>>
VMware-Linux(RedHat 6.7)增加数据库使用空间(Linux&Linux LVM)
查看>>
左神算法进阶班3_1构造数组的MaxTree
查看>>
SQL Server中的锁类型及用法(转载)
查看>>
CodeVS 1008 选数(DFS)
查看>>
SQL Server日常积累
查看>>
C++强制类型转换
查看>>
搭建FTP服务器 window7
查看>>
并发编程下的性能定律(翻译)
查看>>
cssText文本格式化
查看>>
新建koa2项目
查看>>
Phoenix 索引生命周期
查看>>
I,P,B帧和PTS,DTS的关系
查看>>
JavaOO练习:违规管理系统
查看>>
继续开始列车式的生活
查看>>