JavaScriptTXT

资源 | 10套好用的前端框架、设计组件库推荐
https://www.ui.cn/detail/332889.html

发现苹果手机alert出来的毫秒数，始终是NAN
https://www.jianshu.com/p/840a08207f7a

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";

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事件是光标失去焦点时发生的事件。

*************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
   })
})

JavaScriptTXT

JavaScriptTXT相关推荐

最新文章

热门文章