【WEB】web开发基础知识整理（3）

WEB开发技术基础知识整理（3）

第三部分——JavaScript

简介

• 直译客户端脚本语言，不需要预编译，浏览器直接解释运行。
• 动态，跨平台，等等……
• HTML定义用户互交事件，当事件发生时可执行指定JS代码
• ECMAScript，脚本语言规范，JavaScript是基于该规范的一个实现，后续JS代码，将基于ES6代码规范编写

<button type="button" onclick="myfunction()"> 666666  </button>
<!--HTML代码与JS代码耦合 -->

通用HTML事件

• onchange 标签发生改变
• onclick 点击之后
• onload 完成页面加载
• ……

js代码引入方式

• 通过script标签直接引入html文件
• js文件引入

javascript语法

let

声明一个作用区域的变量语句表达式

var

定义，不受快内块外限制。

操作符

• 操作符+ - * 、 % ++ --、

数据类型

• 变量可以接受许多多数据类型。

函数声明

function 1234 (p,q){

    return p1*p2;
}
document.getelementbyid("demo").innerhtml = text;

箭头函数表达式

• 箭头函数表达式的语法比函数表达式更短，并且没有自己的this，arguments，super或 new.target
• 适合回调的匿名函数

json

• Json对象，属性以键值对保存，大括号，分号，双引号，逗号，方括号(数组)，方法等等
• 例如：{“type”：“111”，“从v”，“fdfs”}；

jsoutput

• JavaScript can “display” data in different ways:
• Writing into an alert box, using window.alert().
• Writing into the HTML output using document.write().
• Writing into an HTML element, using innerHTML.
• Writing into the browser console, using console.log().

第四部分——jQuery

简介

• jQuery的目的是使您的网站更容易使用JavaScript。
• jQuery接受许多需要许多行JavaScript代码才能完成的常见任务，并将它们包装成可以用一行代码调用的方法。
• 轻量，压缩版极小，减少网络数据传输 (3.2.1，84.6K)
  强大的基于CSS的元素选择器
  大量的DOM操作封装
  链式编程
  隐式迭代
  实现了操作行为与HTML文档的分离
  丰富完善的生态
  主流前端JS框架的支持
  无需关心浏览器兼容性问题
  免费开源

使用方法

• 从jQuery网站下载jQuery库
• 从CDN中包括jQuery，比如谷歌
• 下载的jQuery有两种版本：
  生产版本-这是为您的生活网站，因为它已经缩小和压缩
  开发版本-这是用于测试和开发（未压缩和可读代码）

基本语法

• Basic syntax is: $(selector).action()

回调函数

• JavaScript语句逐行执行。但是，由于效果，即使效果未完成，也可以运行下一行代码。这可能造成错误。
  在当前效果完成100%之后执行回调函数。

$(function(){
$("#b1").click(()=>{
//
$("#p1").hide(()=>{

    alert("hidden");
});
});
});

选择器

从$开始，括号内选择类似于css。

部分功能

• *hover选择方法
  HoVE（）方法有两个函数，是MouthEnter（）和MouSeLeave（）方法的组合。
  当鼠标进入HTML元素时执行第一函数，当鼠标离开HTML元素时执行第二函数：

• The text() method，仅获取文本内容

• The html() method

• The val() method，获取/修改input元素的value属性

• The prop() method，获取/修改元素属性。1个参数为获取指定属性的值，2个参数为为指定属性赋值

• Hide and Show

• FADENIN（）
  FAUD OUT（）
  FaveToG（）
  FADOTE（），

• slideDown()
  slideUp()
  slideToggle()

• append() - Inserts content at the end of the selected elements
  prepend() - Inserts content at the beginning of the selected elements
  after() - Inserts content after the selected elements
  before() - Inserts content before the selected elements

• remove() - Removes the selected element (and its child elements)
  empty() - Removes the child elements from the selected element

文章首发于我的bolg：https://kfzjw008.github.io/2018/11/06/web3/