资源 | 10套好用的前端框架、设计组件库推荐
https://www.ui.cn/detail/332889.html
发现苹果手机alert出来的毫秒数,始终是NAN
https://www.jianshu.com/p/840a08207f7a
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">文档模式为你浏览器最高级别的模式
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.querySelector(".chat-list")
document.getElementById('cityResult3').value="good";
document.getElementById("p1").innerHTML="New text!";
document.getElementById("p1").innerText = "我很好呀!"
document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
*********创建与添加Dom
var mesHtml='<div class="chat-box chat-box-right mui-content-padded">'
+'<img class="chat-avatar" src="../../img/untitled3.png" />'
+'</div>';
var newDom=document.createElement('div');
newDom.innerHTML=mesHtml;
var mesList=document.querySelector(".chat-list");
//添加气泡
mesList.appendChild(newDom);
alert("Text: " + $("#test").text());
alert("HTML: " + $("#test").html());
alert("Value: " + $("#test").val());
*********添加样式
添加样式
document.getElementById("panInfo").className="planBc"
删除样式
document.getElementById("panInfo").className="";
如果是直接加的style="***"属性的话,可以使用document.getElementById("box").style.cssText = ""来清空样式。
//数据中去掉重复的
//先用sort排序,加一个临时数组,然后循环遍历,将去重的数组和临时数组末进行比较,不同就加入临时数组。
function arrDelRepeat(arr) {
arr.sort();//排序
var n = [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i].orgId.substring(0,4) !== n[n.length - 1].orgId.substring(0,4)) {
n.push(arr[i]);
}
}
return n;
}
******************匹配所有手机正则表达式
GitHub地址:https://github.com/VincentSit/ChinaMobilePhoneNumberRegex
匹配所有手机(中国移动,中国联通,中国电信)
^(?:+?86)?1(?:3d{3}|5[^4D]d{2}|8d{3}|7(?:[35678]d{2}|4(?:0d|1[0-2]|9d))|9[189]d{2}|66d{2})d{6}$
************数组添加
2、push()和pop()
push(): 把里面的内容添加到数组末尾,并返回修改后的长度。
pop():移除数组最后一项,返回移除的那个值,减少数组的length。
书写格式:arr.push(" "),括号里面写内容 ("字符串要加引号"),
书写格式:arr.pop( )
复制代码
var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]
**************js数组,插入,替换,删除
array.splice(index,num,arr);
返回被删除的元素
/**
*index:修改的位置即下标数字
*num:删除的长度,默认是至结尾
*arr:添加进去的数组
**/
var arr=new Array();
js数组中的splice方法和slice方法简单总结,截取字符
var arr=['a','b','c','d']
var newArr=arr.slice(0,3);//不包含结束索引值为3对应的元素
console.log(newArr)
结果:['a','b','c']
var newArr2=arr.slice(0),//如是没有第二个参数,最后一位
console.log(newArr2)
结果:['a','b','c','d']
splice具有删除,插入,替换的功能
splice删除
var arr=['a','b','c','d']
var newArr3=arr.splice(1,2);//会把b,c删掉,从下标1开始,取2个
console.log(arr);//结果['a','d']
console.log(newArr3);//结果:['b','c']
splice插入
splice(index,0,插入的项)
var arr=['a','b','c','d']
var newArr=arr.slice(2,0,'张三');//索引值2的位置插入'张三',0表示插入
console.log(newArr);//['a','b','张三','c','d']
splice替换
var arr=['a','b','c','d']
var newArr=arr.slice(2,2,'张三','李四');//索引值2的位置删除2项
console.log(arr);//['a','b','张三','李四']
console.log(newArr);//['c','d']
***includes检测数组 site 是否包含 runoob :
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); // true 组数中有
site.includes('baidu'); // false 组数中没有
**JS循环删除数组中多个元素
var arr=['a','b','c','d']
for(var i in arr){
if(arr[i]=='b'){
delete arr[i]
}
if(arr[i]=='c'){
delete arr[i]
}
}
console.log(arr);//移除的为empty
arr = arr.filter(function (val) {return val}) //过滤掉空的
console.log(arr); //['a','b']
***push && pop && shift && unshift
push() 从数组末尾添加
pop() 从数组末尾移除
shift() 从数组前端移除
unshift() 从数组前端添加
****concat将一个数组插入另一个数组后面,
arr.length=3,arr2.length=2
arr=arr.concat(arr2) ;//结果arr.length=5
***数组排序
var color = ['2019-09-10','2019-09-01','2019-10-20','2019-10-15'];
color.sort();
console.log(color);
**********iframe
contentWindow属性能够以 HTML 对象来返回 iframe 中的文档。
<iframe id="iframe1"></iframe>
<script>
//const iframeWindow = document.getElementsByTagName('iframe')[0].contentWindow
const iframeWindow = document.getElementsById('iframe1')[0].contentWindow
iframeWindow.document.body.innerHTML = 'Hello World !!!!!!!!'
</script>
$("#table-head").find("input,select").serializeJSON().goodsShippingHeadVO);
var frmObj = $("#queryForm").serializeJSON();//serializeJSON出来是个对象
frmObj['elsAccount'] = elsAccount;
*****************JSON字符串转换为JSON对象
要使用上面的str1,必须使用下面的方法先转化为JSON对象:
//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
*****************滚动
var scrollDivOffsetH=$(".scrolldiv").offset().top;
var itemOffsetH=$(this).offset().top;
console.log(scrollDivOffsetH+" "+itemOffsetH);
$(".scrolldiv").animate({
scrollTop: stop
}, 500 /*scroll实现定位滚动*/ );
*******************day日期
var date=new Date("2019-07-24");
var week=date.getDay();//结果3星期三,0星期日
方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
Date.setFullYear(year,month,day);//设置日期
Iphone日期显示问题Nan
pardate="2019-11-26";//带“-”iphone是转不了到日期,要替换成2019/11/26才可以生成日期
var date=new Date(pardate.replace(/\-/g, "/"));
var date="2019-11-26"
var wDate=new Date(date.replace(/\-/g, "/")).FormatDate("yyyy-MM-dd EE");
**************Dom与Jquery对象转换
jQuery对象转成DOM对象:
(1)jQuery对象实际上是一个数据对象,可以通过[index]方法获得相应的DOM对象。
如:var $v=$("#v"); //得到jQuery对象
var v=$("v")[0];//转换成DOM对象
(2)jQuery本身可以通过.get(index)方法得到相应的DOM对象
如:var $v=$("#v"); //得到jQuery对象
var v=$v.get(0);
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象了
如:var v=document.getElementById("v"); //得到DOM对象
var $v=$(v); //转成jQuery对象
转换后,就可以任意使用jQuery的方法了
以下方法都正确:
$("#div").html();
$("#div")[0].innerTHML;
$("#div").eq(0)[0].innerHTML;
$("#div").get(0).innerHTML;
$(document.getElementById("div")).html()
**************onclick this
<div οnclick="func(this)" name="book1">hello 1</div>
<script>
//onclick 绑定的函数 传参数 关键字this
function func(obj) {
console.log(obj); // 点击后直接获取本点击对象
console.log(obj.getAttribute("name"));
console.log(obj.innerHTML);
console.log($(obj).html());//DOM对象转成jQuery对象
}
</script>
**********************Iphoen兼容问题
click事件在苹果手机失效的问题
因为是动态添加的内容,所以想要使用click事件,需要给他用on绑定一下:
$(document).on("click",".next_button",function(){
alert();
});
这个时候,使用苹果手机访问的时候,发现了一个坑爹的问题,如论如何点击“下一步”,都没有任何反应,可是在安卓和各种模拟器中一切正常。后来经过查找资料才知道,苹果有这么个设置:
对于点击的对象,拥有cursor:pointer这个样式的设置,也就是说,鼠标放上去,能够出现“手”型的图标才被认作可以使用点击事件,于是果断增加了样式
<style>
.next_button{
cursor:pointer
}
</style>
**********************阻止冒泡
$("上层容器选择器").on("touchmove",function(event){
event.preventDefault();
});
**********************sessionStorage存储
如果你要存储到sessionStorage
sessionStorage.setItem(JSON.stringify(data)) //存储必须以字符串的形式
sessionStorage.getItem(JSON.parse(data)) //取也需要用这种方式取
**************window.operner
刷新父页面(window.open打开的页面)
window.opener.location.reload(true); //true代表从服务器重新获取,false为从缓存中获取,默认为false
或window.opener.location.href = window.opener.location.href;
或window.operner.location.replace(location);
********window.operner关闭后触发window.open事件
<script type="text/javascript">
var timer; //监听器
var winopen; //B页面的打开事件
//判断子窗口是否关闭,关闭刷新页面
function IfWindowClosed() {
//判断B页面打开事件
if (winopen.closed == true)
{
//执行A页面的相关方法操作
XXX();
//关闭监听器
window.clearInterval(timer);
}
}
//浏览B页面
function browser() {
//打开B页面并将用winopen 获取打开方法的句柄
winopen = window.open("B.html","","");
//打开监听器
timer = window.setInterval("IfWindowClosed()", 500);
}
//A页面的相关方法
function XXX(){
...
}
</script>
*****************页面返回
<a href=”#” onClick=”javascript :history.go(-1);”>返回上一页</a>
window.history.go(-1);
history.go(-1);
window.history.back(); //iphone,android可以
window.history.back();
window.location.reload();
window.location.href="url";
****************************for循环、each循环
for循环
break 语句“跳出”循环。
continue 语句“跳过”循环中的一个迭代。
return 不再执行后面的代码
each循环
return false 语句“跳出”循环。
return ture 语句“跳过”循环中的一个迭代。
***************each循环form标签
$("#updateForm").find("input[name]").each(function () {
oModal[$(this).attr("name")] = $(this).val();
});
根据name循环
<div name="dictItem">
<div class="col-sm-2">
<input class="form-control" type="hidden" name="itemId" value="${item.id}">
<input class="form-control" type="text" name="itemNum" value="${item.num}">
</div>
<div class="col-sm-2">
<input class="form-control" type="text" name="itemName" value="${item.name}">
</div>
</div>
$("[name='dictItem']").each(function(){
var num = $(this).find("[name='itemNum']").val();
var name = $(this).find("[name='itemName']").val();
if(num == '' || name == ''){
$(this).remove();
}
});
//两个标签同时查
mainDataGrid.find("input,select").serializeJSON()
***************checkbox
// 动态绑定默认状态
// $("#ck").attr("checked",true)//选中
// $("#ck").attr("checked",false)//未选中
//点击判断选中还是未选中
$("#ck").click(function () {
if ($(this).is(":checked")) {
alert("选中");
} else {
alert("未选中");
}
**********全部替换replace
var str = '我是生长在中国南方的纯正中国人';
var reg = new RegExp( '中国' , "g" )
var newstr = str.replace( reg , '天朝' );
alert(newstr);
目的是达到了,但是每次都这样写的话似乎有点麻烦,我们把他封装一下。
String.prototype.myReplace=function(f,e){//吧f替换成e
var reg=new RegExp(f,"g"); //创建正则RegExp对象
return this.replace(reg,e);
}
//应用示例
var str='我是生长在中国南方的纯正中国人';
var newstr=str.myReplace('中国','天朝');
alert(newstr);
*******************extend合并
2.2 extend({},item1,item2,……)
用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。
示例:
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);
结果:
Result={name:”Momo”,age:23,sex:”gril”};
说明:
以上的结果表明extend方法将所有的项都合并到了{}中,但是,细心一点就会发现,其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了,这是怎么回事?请接着往下看。
2.3 extend(bool,{},item1,item2….)
Extend方法还有带bool型参数的重载。
bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:
示例:
var item={name:“olive”,age:23,address{provice:”河南”,city:”郑州”}};
var item1={sex:”girl”,address{city:”北京”}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);
结果:
Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};
说明:
以上结果说明,当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。
当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。
**************onBlur事件与onfocus事件(js) (光标到达和离开是触发事件)
onFocus事件就是当光标落在文本框中时发生的事件。
onBlur事件是光标失去焦点时发生的事件。
<INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" οnblur="(document.bgColor='yellow')">
<INPUT TYPE=text NAME=text3 value="4444onfocus_blue" οnfοcus="(document.bgColor='blue')">
*************Number()、parseInt()和 parseFloat(),js转成数字方法
var num1== Number("Hello world!") ; //NaN
var num2 = Number(""); //0
var num3= Number("000011"); //11
var num4 = Number(true); //1
var num1 = parseInt("1234blue");// 1234
var num2 = parseInt("");// NaN
var num6 = parseInt("70"); // 70(十进制数)
var num1 = parseFloat("1234blue");//1234 (整数)
var num3 = parseFloat("22.5");//22.5
var num4 = parseFloat("22.34.5"); //22.34 ,第二个小数点就是无效的
var num5 = parseFloat("0908.5");//908.5
***********************redio
// jquery 1.3 之后使用
item = $('input[name=age]:checked').val();
// jquery 1.3 之后使用
$("input[type=radio]:checked").each(function() {
item = $(this).val();
alert(item);
})
$("#btn2").click(function(){
$("input[name='rdo1']").eq(0).removeAttr("checked");
$("input[name='rdo1']").eq(1).attr("checked","checked");
$("input[name='rdo1']").eq(1).click();
});
**********************input,name监听,
<input name="bach">
<input name="bach">
//光标离开
$("input[name='bach']").blur(function(){
alert($(this).val());
})
***********************js去除字符串空格(空白符),去掉空格
去除字符串内所有的空格:str = str.replace(/\s*/g,"");
去除字符串内两头的空格:str = str.replace(/^\s*|\s*$/g,"");
去除字符串内左侧的空格:str = str.replace(/^\s*/,"");
去除字符串内右侧的空格:str = str.replace(/(\s*$)/g,"");
************************JS中使用换行符
使用' \n '换行,而不是'\n'
注意前后空格
*******************在不想使用缓存的input中添加 autocomplete="off";
<input type="text" name="mingcheng" autocomplete="off" class="form-control" id="keyword" value="" placeholder="请输入关键字:(搜索)">
****************closest() 方法获得匹配选择器的第一个祖先元素
<table>
<tr><td><div><img src="img/search_gray.png" class="img-search"></span></td></tr>
<tr><td><div><img src="img/search_gray.png" class="img-search"></span></td></tr>
</table>
$(document).ready(function(){
$(".img-search").on("click",function(){
//closest() 方法获得匹配选择器的第一个祖先元素
var rowIndex = $(this).closest("tr").index();//
alert(rowIndex);//0或1
})
})