当前位置: 首页 > wzjs >正文

找别人做网站注意什么企业网站推广方案

找别人做网站注意什么,企业网站推广方案,烟台网站制作步骤,汽车之家网页版入口文章目录 js基础js 预解析js变量提升 DOM相关知识节点选择器获取属性节点创建节点插入节点替换节点克隆节点获取节点属性获取元素尺寸获取元素偏移量标准的dom事件流阻止事件传播阻止默认行为事件委托 正则表达式js复杂类型元字符 - 基本元字符元字符 - 边界符元字符 - 限定符元…

文章目录

  • js基础
    • js 预解析
    • js变量提升
  • DOM相关知识
    • 节点选择器
    • 获取属性节点
    • 创建节点
    • 插入节点
    • 替换节点
    • 克隆节点
    • 获取节点属性
    • 获取元素尺寸
      • 获取元素偏移量
      • 标准的dom事件流
      • 阻止事件传播
      • 阻止默认行为
      • 事件委托
  • 正则表达式
    • js复杂类型
    • 元字符 - 基本元字符
    • 元字符 - 边界符
    • 元字符 - 限定符
    • 元字符 - 特殊符号
    • 正则表达式 - 捕获
    • 正则与字符串写法
  • js 类写法 (es6)
  • js 构造函数 (es5)
    • js原型链
      • js面向对象继承 es5
    • es6 类继承

js基础

js 预解析

js 代码的编译和执行

通俗的说,预解析是在代码执行之前,先对代码进行通读和解释 ,之后执行代码

js变量提升

    // 声明式函数var fn = 100;function fn() {console.log('方法执行')}console.log(fn);//100fn()//fn is not a function
  • 变量提升执行步骤
    fn
    fn()
    fn = 100

DOM相关知识

节点选择器

<div id="hbox">强大的内心<div id="box"></div>
</div>
  • childNodes属性 children
  box.childNodes //获取所有节点box.children 所有元素
  • firstChild and firstElementChild
  box.firstChild //获取所有节点中的第一个 包含 text /nbox.firstElementChild 所有元素 标签
  • lastChild lastElementChild
  • previousSibling previousElementSibling //上一个节点的兄弟节点
  • nextSibling nextElementSibling //下一个节点的兄弟节点
  • parentNode parentElement //父节点 parentElement拿不到则为null

获取属性节点

box.getAttribute('index');
console.log(box.attributes[1]);

创建节点

创建之后,直接可以利用 '.'方式更改/添加的属性

const newDiv = document.creatElement('div');
newDiv.className = 'newd';
newDiv.id = 'dd';
newDiv.innerHTML = "玫瑰和王子不属于一个世界";

插入节点

<div id="box"><div id="box1"></div>
</div><script>
box.appendChild(newDiv) //在box下增加一个节点 // insertBefore(要插入的节点,谁的前面)
hbox.insertBefore(newDiv,box);// 删除节点(节点对象)
box.removeChild(newDiv);// 删除自己以及后代
box.remove();
</script>

替换节点

replaceChild(新的节点,老的节点)

<script>
// 替换节点 
const newDiv = document.createElement('div')
newDiv.innerHTML = '替换'
box.replaceChild(newDiv,box1)
</script>

克隆节点

cloneNode() 默认不传参 仅克隆当前j节点

<script>
// 克隆节点 
// cloneNode(true) 克隆包含后代
const clnode = box.cloneNode(true);
clnode.id = 'cloneId';
document.body.appendChild(clnode);
</script>

获取节点属性

节点类型属性名属性值
元素节点nodeType1
属性节点nodeName2
文本节点text3
<script>
const box = document.getElementbyId('box')
console.log(box.nodeType)
</script>

获取元素尺寸

offsetWithoffsetHeight
获取尺寸:内容+padding+border 宽/高 度

clientWidth clientHeight
获取尺寸:内容+padding 宽/高 度

获取元素偏移量

offsetLeft 和 offsetTop

参考点是定位父级 position:relative;
如果元素没有定位,偏移量相对于body

标准的dom事件流

捕获:window -> document -> body -> outer
目标:inner
冒泡:outer -> body -> document -> window

默认情况 只在冒泡触发 按照 dom2事件绑定,并进行配置,才能看到捕获的回调函数被触发

阻止事件传播

// propagation 传播e.stopPropagation();

阻止默认行为

 e.preventDefault();

事件委托

e.target

减少多个函数绑定 的 性能损耗
动态添加li也 有事件处理

可以根据dom流,将事件委托给父组件,在父组件中获取到点击元素

详见示例 caseDomCurd.html 和 caseMouseFollow.html


正则表达式

js复杂类型

  • 字面量 //

字符中包含 连续字符 abc

const reg = /abc/
//验证data.value是否符合表达式规则
reg.test(data.value)
  • 内置构造函数
const reg = new RegExp("abc")

元字符 - 基本元字符

  • \d 包含一位数字(0-9)
  const reg = /\d/console.log(reg.test("abc"))//falseconsole.log(reg.test("123"))//true
  • \D 包含一位 数字
  const reg = /\D/console.log(reg.test("abc"))//trueconsole.log(reg.test("123"))//false
  • \s 包含一位空白 (空格 缩进 换行)
  const reg = /\s/console.log(reg.test("ab c"))//trueconsole.log(reg.test("123"))//false
  • \S 包含一位 空白 (空格 缩进 换行)
  const reg = /\S/console.log(reg.test("ab c"))//falseconsole.log(reg.test("123"))//true
  • \w 包含一位 字母 数字 下划线
  const reg = /\w/const reg2 = /\w\w/ //包含两个console.log(reg.test("123ab c"))//trueconsole.log(reg.test("&*"))//false
  • \W 包含一位 字母 数字 下划线
  const reg = /\W/const reg2 = /\W\W/ //包含两个console.log(reg.test("123ab c"))//falseconsole.log(reg.test("&*"))//true
  • . 任意内容( 换行不算 )

一个符合条件就可以 如果 exec() 截取 只会截取第一个

  const reg = /./console.log(reg.test("\n\n\n"))//falseconsole.log(reg.test("&\naac*"))//true
  • . \转义字符
  const reg = /\d\.\d/console.log(reg.test("1.2"))//trueconsole.log(reg.test("1a2"))//false

元字符 - 边界符

  • ^ 以什么为开头
const reg = /^\d/ //以数字开头
console.log(reg.test('abc'))//false
console.log(reg.test('1abc'))//true
  • $ 以什么为结尾
const reg = /\d$/ //以数字结尾
console.log(reg.test('abc'))//false
console.log(reg.test('abc33'))//true
  • ^开头结尾$
const reg = /^ae$/
console.log(reg.test('abc'))//false
console.log(reg.test('ae'))//true
  const reg = /^a\de$/console.log(reg.test('abc'))//falseconsole.log(reg.test('a2e'))//trueconsole.log(reg.test('a232323e'))//false

元字符 - 限定符

  • * 0到多次
 const reg = /^a\d*c$/;console.log(reg.test('a222222c'))//trueconsole.log(reg.test('a222222'))//f
  • + 1到多次
 const reg = /\d+/;console.log(reg.test('a222222c'))//trueconsole.log(reg.test('a222222'))//fconsole.log(reg.exec('ads222222'))//可以取出符合条件的字符
  • 0-1次
 const reg = /\d?/;console.log(reg.test('a222222c'))//trueconsole.log(reg.test('ac'))//true
  • {n} 指定次数 n
  const reg = /\d{3}/console.log(reg.test('ac'))//falseconsole.log(reg.test('a2c'))//falseconsole.log(reg.test('a232e'))//true
  • {n,m} 指定次数 n < x < m
  const reg = /\d{1,3}/console.log(reg.test('ac'))//falseconsole.log(reg.test('a2c'))//trueconsole.log(reg.test('a232e'))//trueconsole.log(reg.test('a123456e'))//trueconsole.log(reg.exec('a123456e'))//123

元字符 - 特殊符号

  • () 整体
  const reg = /(a){2}/console.log(reg.test('aca'))//falseconsole.log(reg.test('aac'))//true
  • | 或 , 左右是一个整体
  const reg = /a|2/ // a或者是2console.log(reg.test('aca'))//falseconsole.log(reg.test('aac'))//true
  const reg = /(abc|234)/ //abc或者是 234console.log(reg.test('ab234'))//trueconsole.log(reg.test('abc34'))//trueconsole.log(reg.test('abc'))//true
  const reg = /abc|234/ //ab c或2 34console.log(reg.test('ab234'))//trueconsole.log(reg.test('abc'))//trueconsole.log(reg.test('ab34'))//falseconsole.log(reg.test('c23'))//falseconsole.log(reg.test('234'))//true
  • [] 包含其中1个

[a-zA-Z0-9_] 等价于 \w 字母数字下划线

[0-9] <=> \d

  const reg = /[123sad]/console.log(reg.test('abc'))//trueconsole.log(reg.test('234'))//true
  const reg = /[123sad]{3,5}/console.log(reg.test('ba2s'))//trueconsole.log(reg.test('ab2s'))//false 要包含在【】中 连续在一起的为true
  • [^abc] 取反 ^

^ 写在外面 以什么为开头 写在[]中 取反

  const reg = /[^abc]/console.log(reg.test('wabc'))//trueconsole.log(reg.test('abc'))//false 要包含在【】中 连续在一起的为^ 取反

正则表达式 - 捕获

  • exec(‘表达式’)
    截取字符串中,符合正则表达式的内容
    但是是懒惰模式,只会匹配遇到的第一个内容,不会返回多个片段
  const str = 'who say 2025-05-20'const reg = /\d{4}-\d{1,2}-\d{1,2}/console.log(reg.test(str))//trueconsole.log(reg.exec(str)[0])//2025-05-20
  • 标识符 g i

g 全局匹配 global

  const str = 'who say 2025-05-20 is my birthday,my birthday in 2025-6-1';const reg = /\d{4}-\d{1,2}-\d{1,2}/gconsole.log(reg.test(str))//trueconsole.log(reg.exec(str)[0])//2025-05-20

const reg = /(\d{4})-(\d{1,2})-(\d{1,2})/g该表达式 加了()会 将符合的整体单独提取

  const str = 'who say 2025-05-20 is my birthday,my birthday in 2025-6-1';const reg = /\d{4}-\d{1,2}-\d{1,2}/g// const reg = /(\d{4})-(\d{1,2})-(\d{1,2})/g 加了()会 将符合的整体单独提取console.log(reg.test(str))//true 全局模式 会记录此次内容const res1 = reg.exec(str);//2025-6-1',const res2 = reg.exec(str);// null  最上面的console.log 输出一次 调用了reg 匹配 全局g记录了输出的操作,所以 只剩下 第二次的结果

i 忽略大小写 - ignore

  const str = 'who say 2025-05-20 is my birthday,my birthday in 2025-6-1';const reg = /a-z/iconsole.log(reg.test(str))//true
  • 贪婪 非贪婪?

示例

贪婪匹配 匹配 符合条件的最大次数

  const reg = /\d{1,4}/console.log(reg.exec('aca124856'))//1248  贪婪匹配 匹配 符合条件的最大次数

?非贪婪匹配 匹配 符合条件的最小次数

  const reg = /\d{1,4}?/console.log(reg.exec('aca124856'))//1  ?非贪婪匹配 匹配 符合条件的最小次数

常见搭配

*?
+?
??
{n,}? {n,m}?

场景应用

  const str = `<p class='list'> xxxxx <p/>`const reg = /^<p.*>$/const reg = /./ //一个符合条件就可以console.log(reg.exec(str))//<p class='list'> xxxxx <p/>  贪婪匹配
  const str = `<p class='list'> xxxxx <p/>`const reg = /^<p.*?>$/console.log(reg.exec(str))//<p class='list'> xxxxx <p/> >$存在 正则引擎 必须要找到正确的,所以会匹配到 第二个p 。为了满足 $,.*? 会继续扩展直到能匹配到字符串末尾的 >
  const str = `<p class='list'> xxxxx <p/>`const reg = /^<p.*?>/console.log(reg.exec(str))//<p class='list'> 非贪婪匹配

正则与字符串写法

正则.test(字符串)
正则.exec(字符串)
字符串.replace search match

  const str = 'I will marry with my boy friend,I do not want get marry';const reg = /marry/gconsole.log(str.replace(reg, '*'))//I will * with my boy friend,I do not want get marry
  const str = '';const reg = /marry/gconsole.log(str.search(reg))//有返回 开始下标 没有则 -1
  const str = 'I will marry with my boy friend,I do not want get marry';const reg = /marry/gconsole.log(str.match(reg))// ['marry', 'marry'] 

js 类写法 (es6)

本质是 构造函数 class 写法是es6的语法糖 可以用prototype修改

class Hander {constructor(name, adge) {this.name = name;this.adge = adge;}introduce() {console.log('hello', this.name, this.adge)}
}
const obj = new Hander('张三',12)//传递的参数,会被构造函数 construct 接收
obj.introduce();//调用类中的 方法

js 构造函数 (es5)

function Hander(name,age){this.name = name;this.age = age;
}// 节省空间公用内存,将function写在原型prototype上
Hander.prototype.introduce(){console.log('挂在原型上的方法',name,age)
}const obj = new Hander('百里'400);
obj.introduce();

js原型链

每一个对象上都有一个 __proto__
通过 obj.__proto__ 可以获取到上一级方法的构造方法,逐级向上,形成原型链
obj.__proto__ === 构造函数.prototype

这俩的区别是 __proto__是一个内置函数。类似君子协议,以__开头的方法不允许被调用。所以,使用prototype代替
原型链的源头:
可以理解为null 因为 Object.prototype.__proto__ = null
也可以说是 Object.prototype

js面向对象继承 es5

分为构造函数继承 和 原型继承
通过 改变this指向(call || apply),实现远程继承
通过 prototype 改变父类构造函数 实现增强 或 复用

function Person(name,age){this.name = name;this.age = age;
}
function getGrades(){console.log(this.name,this.age,'3年级');
} // 构造函数继承 继承属性
function Student(name,age){// call('this要指向的对象',参数1,...,参数n)Person.call(this,name,age);
}// const obj = new Student('1班','35号')
// console.log(obj)//成功继承 能看到有name 和 age// 对象原型继承 继承方法
Student.prototype = new Person();// 原型增加
Student.prototype.getName = function () {console.log(this.name)
}// 原型增强1 
Student.prototype.getGrades2 = function () {this.getGrades();console.log('增强了原来的方法')
}
// 原型增强2
Student.prototype.getGrades = function () {Person.prototype.getGrades.call(this)// console.log('增强了你的方法',this.name)
}// 原型覆盖
Student.prototype.getGrades = function () {console.log('覆盖了你的方法',this.name)
}const obj = new Student('1班','35号')obj.getGrades();//可以看到 getGrades方法被调用 成功继承// 注意:在原型继承的时候 要在 new 实例化之前

es6 类继承

通常使用super继承父类的变量 和 方法

在子类中,如果是同名方法,父类同名方法会被覆盖。
也可以通过super继承方法,并提升方法

父类代码示例

//父类 father.js
class father{construct(gender){this.gender = gender}getToal(){console.log('父类方法')}
}

子类继承示例

//子类 child.js
class child extends father{construct(gender,name,age){super(gender)//继承父类的属性this.name = name;this.age = age;}
//如果只写 父类同名方法,父类会被覆盖;
//可以使用 super继承父类
getToal(){super.getToal(){console.log('我是子类')}
}
}
http://www.dtcms.com/wzjs/133146.html

相关文章:

  • 北京网站优化页面百度一下 你就知道官方
  • 江西住房和城乡建设部网站首页网站建设网络公司
  • 公众号和网站先做哪个比较好上海优化seo
  • 专业网站建设排名优化设计官方电子版
  • 建筑资料免费下载网站长沙网站建站模板
  • 佛山购物网站建设线下推广渠道和方式
  • 网站建设可行分析性报告品牌建设
  • java做网站的好处深圳优化公司找高粱seo服务
  • 给网站公司做网站国家免费技能培训平台
  • 一个网站的建设流程有哪些百度认证官网申请
  • 网站开发是做什么的搜狗收录批量查询
  • wordpress 样式丢失百度seo多少钱一个月
  • 体育设施 网站模版云盘搜索引擎入口
  • 网站更改备案信息在哪竞价推广运营
  • app下载的视频为什么手机找不到网站推广优化网址
  • wordpress去除手机版页面重庆seo整站优化效果
  • 怎样制作网络平台石家庄seo公司
  • wordpress 大型站免费个人网站平台
  • 西安企业网站开发哪家好百度推广电话销售话术
  • 天津住房和城乡建设委员会网站百度百度一下一下
  • 套用模板网站品牌定位
  • 网站开发项目计划wbs网站点击排名优化
  • 昆明有几个区北京seo加盟
  • 做阿里还是网站精准引流的网络推广方法
  • 有了空间和域名 网站容易做吗微信公众号怎么开通
  • 保险平台seo如何优化排名
  • 中级经济师考试成绩查询刷百度关键词排名优化
  • 校园网站建设意义今天的病毒感染情况
  • 湖南网络公司网站建设链接交换平台
  • 徐州网站建设市场分析北京网站优化seo