为什么要引用JavaScript语言呢？
因为HTML没有计算能力。
我刚入手前端的时候，是从jQuery开始的，那时候都不懂，但是后来加入了一个小组，需要我们需要制作一个网站，我被负责做首页等界面，然后我的原生JS了解的很少，然后就自己去查资料啊，各种请教别人。就这么一次，可能开窍了。然后对于其他的用法都可以通融理解了。从jq到原生js，就这样过渡过来了。
DOM操作：
我们学习JavaScript的时候可以选择定点突破。一个点一个点理清，你可以不理解下面的东西，不过你要会用js来操作html。可以逆推，先用了，再理解。
数据类型
面向对象
继承
闭包
插件
作用域
跨域
原型链
模块化
自定义事件
内存泄漏
事件机制
异步装载回调
模板引擎
JSON
ajax
这里还是要推荐下小编的web前端学习 群 : 687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。
js事件触发：
0、onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能 键）无法得到识别。[响应一个键]
1、onkeyup 在用户放开任何先前按下的键盘键时发生。
2、onkeydown 在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合，而onkeypress不能
3、onfocusout 失去光标事件
4、onfocus 获得光标事件
5、onabort 图片下载被打断时
6、onblur 元素失去焦点时
7、onclick 鼠标点击
8、ondblclick 鼠标双击
9、onerror 加载文档或图片发生错误时
10、onmousedown 鼠标被按下时
11、onmousemove 鼠标被移动时
12、onmouseout 鼠标离开元素时
13、onmouseover 鼠标经过元素时
14、onmouseup 释放鼠标按键时
15、onunload 用户离开页面时
JavaScript实用功能代码片段
原生JavaScript实现字符串长度截取
function cutstr(str, len) {
var temp;
var icount = 0;
var patrn = /[^\x00-\xff]/;
var strre = "";
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
}
strre += temp
} else {
break
}
}
return strre + "..."
}
原生JavaScript获取域名主机
function getHost(url) {
var host = "null";
if(typeof url == "undefined"|| null == url) {
url = window.location.href;
}
var regex = /^w+://([^/]*).*/;
var match = url.match(regex);
if(typeof match != "undefined" && null != match) {
host = match[1];
}
return host;
}
原生JavaScript元素显示的通用方法
function $(id) {
return !id ? null : document.getElementById(id);
}
function display(id) {
var obj = $(id);
if(obj.style.visibility) {
obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';
} else {
obj.style.display = obj.style.display == '' ? 'none' : '';
}
}
原生JavaScript实现checkbox全选与全不选
function checkAll() {
var selectall = document.getElementById("selectall");
var allbox = document.getElementsByName("allbox");
if (selectall.checked) {
for (var i = 0; i < allbox.length; i++) {
allbox[i].checked = true;
}
} else {
for (var i = 0; i < allbox.length; i++) {
allbox[i].checked = false;
}
}
}
原生JavaScript完美判断是否为网址
function IsURL(strUrl) {
var regular = /^(((https?|ftp)://)?[-a-z0-9]+(.[-a-z0-9]+)*.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]d)|(1dd)|([1-9]d)|d))(/[-a-z0-9_:@&?=+,.!/~%$]*)?)$/i
if (regular.test(strUrl)) {
return true;
}
else {
return false;
}
}
原生JavaScript获得URL中GET参数值
// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
function get_get(){
querystr = window.location.href.split("?")
if(querystr[1]){
GETs = querystr[1].split("&")
GET =new Array()
for(i=0;i
tmp_arr = GETs[i].split("=")
key=tmp_arr[0]
GET[key] = tmp_arr[1]
}
}
return querystr[1];
}
原生JavaScript跨浏览器添加事件
function addEvt(oTarget,sEvtType,fnHandle){
if(!oTarget){return;}
if(oTarget.addEventListener){
oTarget.addEventListener(sEvtType,fnHandle,false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on" + sEvtType,fnHandle);
}else{
oTarget["on" + sEvtType] = fnHandle;
}
}
原生JavaScript常用的正则表达式
//正整数
/^[0-9]*[1-9][0-9]*$/;
//负整数
/^-[0-9]*[1-9][0-9]*$/;
//正浮点数
/^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
//负浮点数
/^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
//浮点数
/^(-?d+)(.d+)?$/;
//email地址
/^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
//url地址
/^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$/;
//年/月/日（年-月-日、年.月.日）
/^(19|20)dd[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
//匹配中文字符
/[\u4e00-\u9fa5]/;
//匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线)
/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
//匹配空白行的正则表达式
/s*/;
//匹配中国邮政编码
/[1-9]d{5}(?!d)/;
//匹配身份证
/d{15}|d{18}/;
//匹配国内电话号码
/(d{3}-|d{4}-)?(d{8}|d{7})?/;
//匹配IP地址
/((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)/;
//匹配首尾空白字符的正则表达式
/^s*|s*$/;
//匹配HTML标记的正则表达式
< (S*?)[^>]*>.*?|< .*? />;
原生JavaScript实现返回顶部的通用方法
function backTop(btnId) {
var btn = document.getElementById(btnId);
var d = document.documentElement;
var b = document.body;
window.onscroll = set;
btn.style.display = "none";
btn.onclick = function() {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
},
10);
};
function set() {
btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
}
};
backTop('goTop');
原生JavaScript实现全选通用方法
function checkall(form, prefix, checkall) {
var checkall = checkall ? checkall : 'chkall';
for(var i = 0; i < form.elements.length; i++) {
var e = form.elements[i];
if(e.type=="checkbox"){
e.checked = form.elements[checkall].checked;
}
}
}
原生JavaScript实现全部取消选择通用方法
function uncheckAll(form) {
for (var i=0;i
var e = form.elements[i];
if (e.name != 'chkall')
e.checked=!e.checked;
}
}
原生JavaScript获取单选按钮的值
function get_radio_value(field){
if(field&&field.length){
for(var i=0;i
if(field[i].checked){
return field[i].value;
}
}
}else {
return ;
}
}
原生JavaScript获取复选框的值
function get_checkbox_value(field){
if(field&&field.length){
for(var i=0;i
if(field[i].checked && !field[i].disabled){
return field[i].value;
}
}
}else {
return;
}
}
原生JavaScript判断变量是否空值
/**
* 判断变量是否空值
* undefined, null, '', false, 0, [], {} 均返回true，否则返回false
*/
function empty(v){
switch (typeof v){
case 'undefined' : return true;
case 'string' : if(trim(v).length == 0) return true; break;
case 'boolean' : if(!v) return true; break;
case 'number' : if(0 === v) return true; break;
case 'object' :
if(null === v) return true;
if(undefined !== v.length && v.length==0) return true;
for(var k in v){return false;} return true;
break;
}
return false;
}
如果感觉写的不错，能够帮助到你，就请赞一下哦！
网友评论