js_高级

js高级

js组成

  • ECMAScript js的语法规范
  • dom Document Object Model 为我们提供一套完整的api(applicement programming interface)
  • bom Browser Object model

    window.open() 打开窗口

    window.navigator.userAgent() 查看打开的浏览器

    js类型

    基本数据类型

    number boolean string

    引用数据类型

    array function 对象 Boolean

    空数据类型

    null 变量不能直接输出null类型,只能输定输出
    undefind 定义变量输出

    全等和等于的区别

    === 值相等并且数据类型相等
    == 值相等

    in关键字

  • 使用for in 循环
  • 判断对象属性是否存在对象属性当中

新建对象

值类型和引用数据类型

值类型和引用数据类型的特征

值类型和引用数据类型在函数数据的使用

对象的动态特征

创建对象后,添加对象的属性或方法

逻辑中断(短路运算)

delete的使用

  • delete用来删除对象的属性和未使用var声明的变量
  • delete用来作为关键字有返回值,用来判断删除属性是否成功
  • 如果删除不存在的属性,返回true
  • 如果删除原型中的属性,返回true,但属性不能被删除(忘记如果创建类)

ajax

ajax执行步骤

Ajax简介

1.2 Ajax所包含的技术

1.3 Ajax的工作原理

1.4 XMLHttpRequest 对象的三个常用的属性

  1. onreadystatechange 属性

  2. readyState 属性

  3. responseText 属性

1.5 xmlhttprequst的方法

  1. open() 方法

  2. send() 方法

Ajax编程步骤

2.1 创建XMLHttpRequest对象

2.2 设置请求方式

2.3 调用回调函数

2.4 发送请求

js基础语法

js基础

js的来源

94年 网景公司开发了 script
95年 sun公司开发了 java
sun 和网景公司开发了javascript

W3C标准

  • 结构标准=>html
  • 表现标准=>css
  • 行为标准=>js

    今天js承担的责任

  • 2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。
  • 2004年JavaScript命运开始改变了,那一年谷歌公司,开始带头使用Ajax技术了,Ajax技术就是JavaScript的一个应用。并且,那时候人们逐渐开始提升用户体验了。
  • 2010年的时候,人们更加了解HTML5技术了,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript
  • 2011年,Node.js诞生,使JavaScript能够开发服务器程序了。
  • 今天,JavaScript工程师是绝对的吃香,能够和iOS、Android工程师比肩,毫不逊色的

    js介绍

  • js是运行在网页客户端的编程语言

    js组成部分

  • ECMAscript –>js标准
  • dom –>js操作网页元素
  • bom –>api操作浏览器

    js特点

  • 简单易用
  • 解释执行
  • 基于对象
    备注:解释执行和编译执行
    编译执行 java c# 转化为.dll可执行文件==>电脑读取.dll可执行文件

使用范围

表单验证
轮播特效
开发游戏

js书写位置

内嵌式

1
2
3
<script>
alert(1)
</script>

外链式

1
<script src="1.js"></script>

js输出方式

alert()对话框,页面弹出对话框信息

alert(0)

confirm() 对话空输出 ,if条件判断

confirm(1)

console.log()控制台输出语句

console.log(hello)

prompt()对话框,用户输入信息

prompt(“请输入用户名”)

docment.write()页面输出信息

document.write(“hmj你最棒“)

hexo主题

hexo开始使用

更改主题

通过地址github下载,安装

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

修改config.yml中的主题

theme:Yelee;

主题更新

cd themes/yelee
git pull

语言切换(theme/yelee/_config.yml)

language: zh-Hans

hexo基础设置

个人图像

默认配置

默认头像存储于 yelee/source/img/icon.png

默认路径

avatar: /img/icon.png

主菜单(theme/yelee/_config.yml)

menu:
主页: /
所有文章: /archives/
标签云: /tags/
关于我: /about/

文章摘要

方法一:

小程序简介

小程序:

  • 支付宝小程序(自己开发)
  • 微信小程序(提供了外部接口)

小程序的特点

  • 适合使用频率低的应用
  • 适合简单的用完即走的应用
  • 适合性能要求不高的应用

dom操作--操作属性,方法

HTML DOM 是:

1
2
3
HTML 的标准对象模型
HTML 的标准编程接口( HTML 元素被定义为对象,而编程接口则是对象方法和对象属性)
W3C 标准

属性

  • url: html文档位置
  • title: 文档标题
  • images: html中图片
  • form表单: html表单
  • body标签: html中的标签
1
2
3
4
5
6
7
8
//文档标题,可以修改标题
document.write="hello";
//获取所有表单
console.log(document.forms);
//获取所有图片
console.log(document.images);
//获取body
console.log(document.body);

方法

1.获取方法

  • 1.通过id获取(只获取一个元素)

    1
    document.getElementById("id名")
  • 2.通过标签名获取(结果是数组)

    1
    document.getElementsByTagName("标签")
  • 3.通过类名获取(结果是数组)–ie9及以上识别

    1
    document.getElementsByClassName("类名")
  • 4.通过name属性获取(结果是数组)–常用于表单

    1
    document.getElementsByName()
  • 5.通过css选择器获取(只获取一个元素)–ie8及以上识别

    1
    document.querySelect("css选择器")
  • 6.通过css选择器获取(结果是一个数组)–ie8及以上识别

    1
    document.querySelectAll("css选择器")

修改元素内容

    1. innerHTML–1识别标签,2可以访问,可以修改
      1
      元素.innerHTML='修改后的结果'
    1. innerText–输出纯文本
      1
      元素.innerText='修改后的结果'
    1. textContent–输出纯文本,保留文本格式
      1
      元素.textContent='修改后的结果'

修改样式

1.通过修改类名—ie9以下不能用

  • 1.通过className获取

    1
    2
    元素.className='类名 //会覆盖原有的类名
    元素.className+='类名' //类不会覆盖,只会叠加
  • 2.通过classList属性

    1
    2
    3
    4
    元素.classList.add('类名')//添加类名,不覆盖原有类名
    元素.classList.remove('类名')//移除类名
    元素.classList.contain('类名')//判断类名是否存在,有true,没有false
    元素.classList.toggle('类名')//添加或删除类名,有删除,没有添加

2.通过行内style样式

元素.style.样式名=’样式值’

3.通过操作属性

  • 1.原生属性–本身具有

    1
    元素.属性名='属性值'
  • 2.自定义属性–自己定义的(原生的属性也可以使用)

    1
    2
    3
    4
    元素.setAttribute('属性名','属性值')//设置属性
    元素.getAttribute('属性名')//设置属性
    元素.removeAttribute('属性名')//移除属性
    元素.hasAttribute('属性名')//判断属性是否存在(boolean类型,用于条件判断)