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赋值

转载于:https://www.cnblogs.com/shenpeng/p/10979461.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值