当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript学习笔记(6月份)

JavaScript学习笔记(6月份)

2019年07月08日  | 移动技术网IT编程  | 我要评论

由于笔记比较杂，本身学习程度并不理想，所以暂时没有整理这些繁杂的笔记。
ps:博客园markdown用起来和看起来都舒服太多了，这才是我了解的那个markdown，又回来了！

笔记

dom对象 document object model

dom 中节点种类一共有三种

注：在js中所有的节点都是对象
<div title="属性节点">文本内容</div>

<div></div> => 元素节点 
title => 属性节点
文本内容 => 文本节点

查找元素节点方法

  1. document.getelementbyid(id);//通过当前元素节点的id，获取对应元素节点
  • 元素节点对象：
    通过这个节点对象(note)，访问它的一系列属性，以下就是对象名称：
    1. note.tagname 获取元素节点的标签名
    2. note.innerhtml 获取元素节点标签间的内容
    3. note.id
    4. note.classname
    5. note.title
    6. note.style等
  • html属性的属性（对应元素节点的对象）：
    id  
    title  
    style  
    innerhtml  
    classname
    元素节点.属性
    元素节点[属性]
    document.getelementsbytagname()
    node.getelementsbytagname();

  • 从node节点开始，找出符合的标签节点
    参数：标签名；
    功能：获取当前页面上所有符合改标签的元素节点
    返回值：一个装有符合条件的元素节点的数组

  • document.getelementsbyname(); 只能从document调用 ps：许多的name可以一样
    参数：name的值
    返回值：装有符合条件的元素节点的数组

  • document.getelementsbyclassname() ps：可以从某一个元素节点去查找
    参数：class
    返回值：所有符合条件的元素节点组合的数组。
    在第版本的ie浏览器中是不支持的 处理办法
    获取父节点的所有元素，然后进行一一判断，符合classname等于参数class就可以加入数组中。

封装函数·setattribute·childnotes·attributes·parentnode

  • id document.getelementbyid()
  • class document.getelementsbyclassname();
  • name document.getelementsbyname();
  • tagname note.getelementsbytagname();

通过封装函数，简化上述操作。

css选择器

  • #id //通过id获取元素节点
  • .class //通过classname获取元素节点
  • tagname //通过tagname获取元素节点
  • name=xxx //通过name获取元素节点

详情看$()方法 //通过封装css选择器的方法，来快速的获取对应的标签

作用：操作当前元素的某一个属性的

get/setattribute() 获取元素属性的两种方法

removeattribute()

  1. 和点出来的class属性范围区别：点操作是通过元素节点点出classname参数，
    而set/get是通过传入class参数来获取 例如：obtn.classname == obtn.getattribute("class")
  2. 用户自定义属性的支持。自定义xxx="yyyy" obtn.setattribute("xxx","yyy")
    document.getelementsbyid("btn").getattribute("id")

childnotes(); 获取当前节点的所有子节点，包括三种节点类型 nodename,nodetype,nodevalue

dom节点类型
元素节点 属性节点 文本节点
作用:
(1)删除子节点中的空白节点
方法：使用正则表达式进行删除。/^\s+$/.test() 判断是否value为空
删除空白节点的时候必须是倒序删除，原因自己想，想不到撞死，提示：他是一个数组类型

(2)不知道

ownerdocument 结果一般是document
parentnode 父亲节点 previoussibling 同级别的上一个节点 nextsibling 同级别的下一个元素节点

attributes 返回该节点的属性节点,[集合]
集合特点:1.不重复;2.无序
其中一种访问方法：node.attributes.getnameditem("id");

dom创建带文本的元素节点

  • document.write() //写入
  • document.createelement("div") 插入标签
  • note.appendchild()
  • parent.replacechild(newnode,oldnode)
  • note.clonenode() 参数：true则将文本内容传入，否则默认只克隆标签
    ps:系统没有提供同时插入文本和标签的方法
    var note = document.createelement("span")
    var ntext = document.createtextnode("文本内容") 插入文本内容
    note.appendchild(ntext)
    odiv.appendchild(note)

事件

1. 事件基础

访问web界面的用户引起的一系列操作
鼠标事件，键盘事件，html事件
函数：on+事件名称

2. 事件流

事件：捕获，目标，冒泡
阻止冒泡：

    evt.cancelbubble = true //对主流浏览器和ie生效
    evt.stoppropagation() //只对主流浏览器生效

事件委托：利用事件冒泡原理，把本应添加在元素上的事件委托给他的父级（外层）
多个重复的事件，可以把这个事件委托到父级来实现。更加简洁

阻止默认事件
比如<a></a>href跳转标签

  1. onclick 方法里面,return false
  2. evt.preventdefault();
  3. evt.returnvalue = false;

3. dom2级事件

dom2级事件处理程序
添加事件监听器：addeventlistener(事件名，处理函数，布尔值)
移除事件监听器：removeeventlistener(事件名，处理函数)
ie下的事件监听器：attachevent(事件名，处理函数) detachevent(事件名，处理函数)

ps:普通事件中点击事件会被后一个点击事件给覆盖，而二级事件不会被其他事件所覆盖。可以重复添加
布尔值为false的时候，为正常的冒泡事件，true为捕获（从外往内）

  • http协议
  • cookie的概念
  • cookie的基本操作
  • cookie的封装

http：超文本传输协议，用于从web服务器传输超文本到本地浏览器的传输协议，是一个无状态的协议
cookie：缓存存在本地浏览器中的数据，包括增删改查的四个部分

document.cookie = "username=paikle";
//这种方式添加的cookie会随着浏览器的关闭而消失，要设置时间限制的cookie需要在后面添加date限制

设置时间来让cookie过期，从而达到删除的效果。

var odate = new date(); //创建时间
odate.setdate(odate.getdate()+3) //将时间设置为三天之后
document.cookie = "user = paikle;expires="+odate; //将cookie过期时间设置为三天后

cookie的封装

setcookie(name,value,day) //设置cookie
getcookie() //获取cookie
removecookie() //移除cookie

正则表达式

正则表达式是由普通字符和特殊字符组成的对字符串进行过滤的逻辑公式

修饰符 g i

g 表示会全部搜索，返回符合的数字,i 表示忽略大小写

 var reg = /abc/g;
 var str = 'abcabc';

1.test方法

正则表达式方法，检测字符串是否又符合规则的字串，有返回true，无为false

//两种构造方法
var rge = /abc/;
var reg = new regexp("abc");

var str = "ab";

var flag = reg.test(str)

2.match方法 字符串方法

console.log(str.match(reg))

3.search方法 字符串的方法 用于查找符合规则的字串的位置，只返回第一个匹配的位置

var rg = /bc/
console.log(str.search(rg))

4.split方法

5.replace方法

var tmd = /tmd/gi
var str = "abc tmd tmd tmd sabi";
console.log(str.replace(tmd,"*"));

6.exec 正则表达式的方法 将匹配成功的内容放到数组内，没有匹配成功返回null

和match差不多的用法，不过在配置全局匹配的时候不能一次出来

符号 效果
. 除了换行符之外的所有单个字符
var rag = /g..gle/gi;var str = 'googlegole';console.log(rag.test(str))
* 重复多次匹配，匹配任意次数 不管中间多少次（0-n）
+ 至少有一次重复匹配
? 进行0或者1次匹配
[] 一个字母表示可出现的范围，[0-9] [a-z]
\w 数组字母下划线等同于[0-9a-za-z_]
\w 非数字字母下划线
\d 数字0-9
\d 非数字
\s 匹配空格 \s 非空格
{m,n} 至少匹配m次，至多匹配n次
/^开头.*结尾&/
| 或 /a
() 分组 将内容作为一个整体去匹配

es6

  • let的使用
  • 解构赋值
  • 模板字符串
  • 箭头函数
  • set结构和map结构
  • 生成器函数
  • 类class

1.let的使用

用来声明变量。用法类似于var ，但是所声明的变量，只在let命令所在的代码块有效。
存在块级作用域 {}
不存在声明提升
不允许重复声明(包括普通变量和函数参数)
const使用 用来声明常量，不要试图改变常量的值，其他语法参照let

2.解构赋值

    //默认赋值
    let [a,b,c] = [1,2,3]
    [a,b=2] = [3] // a = 3,b = 2
    let c ; //undifined;
    [a=1] = [c] //a = 1
    //对象
    let {a,b} = {a:'100',b:'200'} // a = 100 , b = 200
    let {a:b} = {a:111} // b = 111;
    let {a,b = 4} = {a:1} //a = 1;b = 4

3.箭头函数

  1. 只有一个表达式
  2. 含有多条语句
  3. this的指向问题
    在箭头函数内的this指向定义时的作用域，而不是执行时的作用域。
var name = "作用域1"
    var obj = {
        'name':'jonson',
        'syhello':()=>{
            this.name;//this指向定义的作用域，则返回：作用域1
        }
    }
//ps
var obj = {
    'name':"joson",
    "syhello":function(){
        this.name;//joson
    }
}

3.set结构 & map结构

set

set的值是不能重复的，相当于集合
var set = new set([1,3,2,2,34,1,3])
var arr = [...set] 扩展运算符，将类数组对象转换以逗号分割的序列，set转换为数组的方式
arr 为数组形式
使用for of 遍历set or 数组

for(let et of set){ //et直接代表元素
    console.log(et)
}

set.size 长度 set.add() 添加一个 set.delete() 删除某一个 set.has() 是否包含某一个 set.clear() 清空
keys() 返回键名
values() 返回键值
entries() 返回键值对

foreach()

map

let map = new map([['name':'john'],['age':'30']])
map.set(key,value) 添加元素
map.set(key,value) map.get(key) map.delete() map.has(key) map.clear();

keys() 返回键名
values() 返回键值
entries() 返回键值对
foreach() map.forearch((value,key) => console.log(value*2))

4.生成器函数

5.class

    class person{
        constructor(name){
            this.name = name;
        }
    }

js动画 （7.1记）

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网