PC端JS----笔记
JS问题
1、鼠标多次触发事件，但只执行一次
$(div).stop(false, true).animate({'margin-top':'100px'},1000);
2、JQ判断<input type="radio" name="" />是否被选中
var a = $('input[type="radio"]').val();
if(a==null)
或
$('input[type="radio"]').is(":checked")
3、JQ判断<input type="checkbox" name="" />是否被选中
方法一：if($('#checkbox-id').is(':checked')) { // do something}
方法二：if ($('#checkbox-id').prop('checked')) { // do something}
4、追加元素无法绑定事件
$(document).on('click','.xbtn',function(){
$(this).parent().parent('div.item').remove();
});
5、input placeholder属性兼容IE8
jQuery('[placeholder]').focus(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = jQuery(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
jQuery(this).find('[placeholder]').each(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
6、随窗口大小的改变元素随之改变
$(window).resize(function(){});
7、@media兼容IE8
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
8、回调函数
$("#button2").click(function(){
$("p").hide("slow",function(){
alert("使用回调函数，先隐藏再弹出对话框!");
});
})
9、IE8的透明效果（7F对应透明度的值，000000对应颜色值）
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
10、移动端用rem适配不同分辨率的屏幕
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
11、判断PC端还是手机端比并自动跳转的js
//腾讯网的适配代码
<script type="text/javascript">
var browser = {
versions : function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident : u.indexOf('Trident') > -1, //IE内核
presto : u.indexOf('Presto') > -1, //opera内核
webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile : !!u.match(/AppleWebKit.*Mobile.*/)
|| !!u.match(/AppleWebKit/), //是否为移动终端
ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp : u.indexOf('Safari') == -1,
//是否web应该程序，没有头部与底部
google:u.indexOf('Chrome')>-1
};
}(),
language : (navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln("语言版本: "+browser.language);
document.writeln(" 是否为移动终端: "+browser.versions.mobile);
</script>
//其他的适配代码（后缀名为.js 并引用至网页）
<script type="text/javascript">
<!--
//平台、设备和操作系统
var system = {
win: false,
mac: false,
xll: false,
ipad:false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;
//跳转语句，如果是手机访问就自动跳转到" "里的页面
if (system.win || system.mac || system.xll||system.ipad) {
} else {
window.location.href = " ";
}
-->
</script>
12、input[type="checkbox"]的全选与反选
//全选与反选
$('#checkall-0').on('click',function(){
if(this.checked){
$('input[name="check-list"]').each(function(){
this.checked=true;
});
$('.android li').css('display','block');
}else{
$('input[name="check-list"]').each(function(){
this.checked=false;
});
$('.android li').css('display','none');
}
})
13、截取字符串
substring 方法
定义和用法
substring 方法用于提取字符串中介于两个指定下标之间的字符。
alert(str.substring(0));------------"0123456789"
alert(str.substring(5));------------"56789"
alert(str.substring(10));-----------""
alert(str.substring(12));-----------""
alert(str.substring(-5));-----------"0123456789"
alert(str.substring(-10));----------"0123456789"
alert(str.substring(-12));----------"0123456789"
alert(str.substring(0,5));----------"01234"
alert(str.substring(0,10));---------"0123456789"
alert(str.substring(0,12));---------"0123456789"
alert(str.substring(2,0));----------"01"
alert(str.substring(2,2));----------""
alert(str.substring(2,5));----------"234"
substr 方法
定义和用法
substr 方法用于返回一个从指定位置开始的指定长度的子字符串。
alert(str.substr(0));---------------"0123456789"
alert(str.substr(5));---------------"56789"
alert(str.substr(10));--------------""
alert(str.substr(12));--------------""
alert(str.substr(-5));--------------"0123456789"
alert(str.substr(-10));-------------"0123456789"
alert(str.substr(-12));-------------"0123456789"
alert(str.substr(0,5));-------------"01234"
alert(str.substr(0,10));------------"0123456789"
alert(str.substr(0,12));------------"0123456789"
alert(str.substr(2,0));-------------""
14、处理小数部分
1.丢弃小数部分,保留整数部分
parseInt(5/2)
2.向上取整,有小数就整数部分加1
Math.ceil(5/2)
3,四舍五入.
Math.round(5/2)
4,向下取整
Math.floor(5/2)
15、元素的分割重组
var billVal = [123/456/789];
billVal = billVal.split('/').join(',');
16、获取selsct中option的值
$('select').find('option:selected').val();
或$('select').find('option:selected').text();
17、选择selet中的值
$('#selectVal').change(function(event) {})
18、让IE8，ie9兼容 CSS3 media 媒体查询的js：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
19、下面这段代码来让IE的文档模式永远都是最新的：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
20、默认用chrome内核打开
<meta name="renderer" content="webkit">
21、URL添加时间戳
//解决浏览器缓存
function timestamp(url){
// var getTimestamp=Math.random();
var getTimestamp=new Date().getTime();
if(url.indexOf("?")>-1){
url=url+"×tamp="+getTimestamp
}else{
url=url+"?timestamp="+getTimestamp
}
return url;
}
22、判断滚动条是否到底部
$("#scroll_div").scroll(function(){
var divHeight = $(this).height();
var nScrollHeight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
$("#input1").val(nScrollHeight);
$("#input2").val(nScrollTop);
$("#input3").val(divHeight);
if(nScrollTop + divHeight >= nScrollHeight) {
alert("到达底部了");
}
})
23、提取json字段，组成新的数组对象，再转化成字符串
var unitsArray = data.result.units;
var j = unitsArray.length;
var jsonarray = new Array();
for(var i = 0;i<j;i++){
var arr =
{
"id" : data.result.units[i].id,
"unitsName" : data.result.units[i].unitsName
}
jsonarray.push(arr);
}
var unitString = JSON.stringify(jsonarray);
或
var unitsObj = {};
var unitsArr = new Array();
var j = unitsArray.length;
for(var i = 0;i<j;i++){
unitsObj.id = data.result.units[i].id;
unitsObj.unitsName = data.result.units[i].unitsName;
unitsArr.push(unitsObj);
}
24、设置laydate开始时间和结束时间的默认值
$('#startDate').val(laydate.now(-30, 'YYYY-MM-DD'));
$('#endDate').val(laydate.now(0, 'YYYY-MM-DD'));
25、自定义方法判断元素是否在数组中
var arr = ["a", "b", "c"];
// 自定义 contains(arr, "c")方法
function contains(arr, obj) {
//while
var i = arr.length;
while(i--) {
if(arr[i] === obj) {
return i;
}
}
return -1;
}
var result1 = contains(arr, "c"); //返回index为2
26、删除数组的指定元素
arr[ arr.indexOf( 'Thomas' ) ] = null; //伪删除，获取“Thomas”在arr第一次出现的位置下标，并置为空
arrayObject.splice(index,howmany,item1,.....,itemX) //删除下标inde后的howmany个元素，并在这个下标处添加元素item
例如：arr.splice(2,1) // 删除下标为2的一个元素
arrayObject.slice(start,end) //返回从start到end的元素，如end未被规定，返回start到结束的元素
27、判断数组是否存在某个元素
1.javascript的indexOf()方法
var arr_data = [1,2,3];
arr_data.indexOf(1); //如果存在返回值的下标，不存在返回-1
2.jquery的$.inArray()方法
$.inArray(1, arr_data); //如果存在返回值的下标，不存在返回-1
****************前后端分离知识点
1、IE8报“SCRIPT65535: 意外地调用了方法或属性访问”错误
解答：把一个控件不可能含有的属性设置，可能导致ie报错。例：input用了html赋值
