元素Javascript的知识点整合与经典百例

First00

2020-04-18

关注关注

分享分享自己收藏的学习资料，有需要的朋友可以找我获取

根据自身面试经历整理以及不断收集的（珍藏版）

【推荐】2020年最新Java电子书集合.pdf(吐血整理) >>>

https://www.cnblogs.com/xiaogeng88/p/12692306.html

以下就是Javascript所有的知识点

JavaScript语法：

js语法.png

DOM操作：

DOM操作.png

数据类型
面向对象
继承
闭包
插件
作用域
跨域
原型链
模块化
自定义事件
内存泄漏
事件机制
异步装载回调
模板引擎
JSON
ajax

面向对象.png

JavaScript事件触发：

onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。[响应一个键]
onkeyup 在用户放开任何先前按下的键盘键时发生。
onkeydown 在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合，而onkeypress不能
onfocusout 失去光标事件
onfocus 获得光标事件
onabort 图片下载被打断时
onblur 元素失去焦点时
onclick 鼠标点击
ondblclick 鼠标双击
onerror 加载文档或图片发生错误时
onmousedown 鼠标被按下时
onmousemove 鼠标被移动时
onmouseout 鼠标离开元素时
onmouseover 鼠标经过元素时
onmouseup 释放鼠标按键时
onunload 用户离开页面时

1.png

100个原生JavaScript使用功能代码片段
目录
1.原生JavaScript实现字符串长度截取
2.原生JavaScript获取域名主机
3.原生JavaScript清除空格
4.原生JavaScript替换全部
5.原生JavaScript转义html标签
6.原生JavaScript还原html标签
7.原生JavaScript判断是否为数字类型
8.原生JavaScript时间日期格式转换
9.原生JavaScript设置cookie值
10.原生JavaScript获取cookie值
11.原生JavaScript加入收藏夹
12.原生JavaScript设为首页
13.原生JavaScript判断IE6
14.原生JavaScript加载样式文件
15.原生JavaScript返回脚本内容
16.原生JavaScript清除脚本内容
17.原生JavaScript动态加载脚本文件
18.原生JavaScript返回按ID检索的元素对象
19.原生JavaScript返回浏览器版本内容
20.原生JavaScript元素显示的通用方法
21.原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如函数实现
22.原生JavaScript中兼容浏览器绑定元素事件
23.原生JavaScript光标停在文字的后面，文本框获得焦点时调用
24.原生JavaScript检验URL链接是否有效
25.原生JavaScript格式化CSS样式代码
26.原生JavaScript压缩CSS样式代码
27.原生JavaScript获取当前路径
28.原生JavaScriptIP转成整型
29.原生JavaScript整型解析为IP地址
30.原生JavaScript实现checkbox全选与全不选
31.原生JavaScript判断是否移动设备
32.原生JavaScript判断是否移动设备访问
33.原生JavaScript判断是否苹果移动设备访问
34.原生JavaScript判断是否安卓移动设备访问
35.原生JavaScript判断是否Touch屏幕
36.原生JavaScript判断是否在安卓上的谷歌浏览器
37.原生JavaScript判断是否打开视窗
38.原生JavaScript获取移动设备初始化大小
39.原生JavaScript获取移动设备最大化大小
40.原生JavaScript获取移动设备屏幕宽度
41.原生JavaScript完美判断是否为网址
42.原生JavaScript根据样式名称检索元素对象
43.原生JavaScript判断是否以某个字符串开头
44.原生JavaScript判断是否以某个字符串结束
45.原生JavaScript返回IE浏览器的版本号
46.原生JavaScript获取页面高度
47.原生JavaScript获取页面scrollLeft
48.原生JavaScript获取页面可视宽度
49.原生JavaScript获取页面宽度
50.原生JavaScript获取页面scrollTop
51.原生JavaScript获取页面可视高度
52.原生JavaScript跨浏览器添加事件
53.原生JavaScript跨浏览器删除事件
54.原生JavaScript去掉url前缀
55.原生JavaScript随机数时间戳
56.原生JavaScript全角半角转换,iCase: 0全到半，1半到全，其他不转化
57.原生JavaScript确认是否键盘有效输入值
58.原生JavaScript获取网页被卷去的位置
59.原生JavaScript另一种正则日期格式化函数+调用方法
60.原生JavaScript时间个性化输出功能
61.原生JavaScript解决offsetX兼容性问题
62.原生JavaScript常用的正则表达式
63.原生JavaScript实现返回顶部的通用方法
64.原生JavaScript获得URL中GET参数值
65.原生JavaScript实现全选通用方法
66.原生JavaScript实现全部取消选择通用方法
67.原生JavaScript实现打开一个窗体通用方法
68.原生JavaScript判断是否为客户端设备
69.原生JavaScript获取单选按钮的值
70.原生JavaScript获取复选框的值
71.原生JavaScript判断是否为邮箱
72.原生JavaScript判断是否有列表中的危险字符
73.原生JavaScript判断字符串是否大于规定的长度
74.原生JavaScript判断字符串是为网址不区分大小写
75.原生JavaScript判断字符串是否为小数
76.原生JavaScript判断字符串是否为整数
77.原生JavaScript判断字符串是否为浮点数
78.原生JavaScript判断字符是否为A-Za-z英文字母
79.原生JavaScript判断字符串是否邮政编码
80.原生JavaScript判断字符是否空NULL
81.原生JavaScript用正则表达式提取页面代码中所有网址
82.原生JavaScript用正则表达式清除相同的数组(低效率)
83.原生JavaScript用正则表达式清除相同的数组(高效率)
84.原生JavaScript用正则表达式按字母排序，对每行进行数组排序
85.原生JavaScript字符串反序
86.原生JavaScript用正则表达式清除html代码中的脚本
87.原生JavaScript动态执行JavaScript脚本
88.原生JavaScript动态执行VBScript脚本
89.原生JavaScript实现金额大写转换函数
90.原生JavaScript常用的正则表达式大收集
91.原生JavaScript实现窗体改变事件resize的操作（兼容所以的浏览器）
92.原生JavaScript用正则清除空格分左右
93.原生JavaScript判断变量是否空值
94.原生JavaScript实现base64解码
95.原生JavaScript实现utf8解码
96.原生JavaScript获取窗体可见范围的宽与高
97.原生JavaScript判断IE版本号（既简洁.又向后兼容！）
98.原生JavaScript获取浏览器版本号
99.原生JavaScript半角转换为全角函数
100.原生JavaScript全角转换为半角函数

代码片段

原生JavaScript实现字符串长度截取

function cutstr(str, len) {
  var temp;
  var icount = 0;
  var patrn = /[^\x00-\xff]/; //  匹配双字节字符(包括汉字在内)
  var strren = "";
  for (var i = 0; i < str.length; i++) {
    if (icount < len - 1) {
      temp = str.substr(i, 1);
      if (patrn.exec(temp) == null) {
        icount = icount + 1;
      } else {
        icount = icount + 2;
      }
    } else {
      break;
    }
  }
  return strre + "...";
}

原生JavaScript获取域名主机

function getHost(url) {
  var host = "null";
  if (typeof url == undefined || url === null) {
    url = window.location.href;
  }
  var regex = /^\w+\:\/\/([^\/]*).*/;
  var match = url.match(regex);
  if (typeof match != undefined && match != null) {
    host = match[1];
  }
  return host;
}

原生JavaScript清除空格

String.prototype.trim = function() {
  var reExtraSpace = /^\s*(.*?)\s+$/;
  return this.replace(reExtraSpace, "$1");
}

原生JavaScript替换全部

String.prototype.replaceAll = function(s1, s2) {
  return this.replace(new RegExp(s1, "gm"), s2);
}

原生JavaScript转义html标签

function HtmlEncode(text) {
  return text.replace(/&/g, ‘&amp‘)
            .replace(/\"/g, ‘&quot‘)
            .replace(/</g, ‘&lt‘)
            .replace(/>/g, ‘&gt‘);
}

原生JavaScript还原html标签

function HtmlDecode(text) {
  return text.replace(‘&amp‘, /&/g)
            .replace(‘&quot‘, /\"/g)
            .replace(‘&lt‘, /</g)
            .replace(‘&gt‘, />/g);
}

原生JavaScript判断是否为数字类型

function isDigit(value) {
    var patrn = /^[0-9]*$/;
    if (patrn.exec(value) == null || value == "") {
        return false
    } else {
        return true
    }
}

原生JavaScript时间日期格式转换

Date.prototype.Format = function(formatStr) {
        var str = formatStr;
        var Week = [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘];
        str = str.replace(/yyyy|YYYY/, this.getFullYear());
        str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : ‘0‘ + (this.getYear() % 100));
        str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : ‘0‘ + (this.getMonth() + 1));
        str = str.replace(/M/g, (this.getMonth() + 1));
        str = str.replace(/w|W/g, Week[this.getDay()]);
        str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : ‘0‘ + this.getDate());
        str = str.replace(/d|D/g, this.getDate());
        str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : ‘0‘ + this.getHours(

javascript