js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理

IE条件注释

条件注释简介

IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。

条件注释只能用于IE5以上,IE10以上不支持。

如果你安装了多个IE,条件注释将会以最高版本的IE为标准。

条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

条件注释使用方法示例

仅IE5.5可见

仅IE 5.5以上可见

仅IE 5.5以下可见

IE 5.5及以上可见

IE 5.5及以下可见

非IE 5.5的IE可见

html代码用js动态加载进页面

//这里面是你要放的html代码,例如放一个div的内容

把上面的js动态加入到页面中

$(function(){

var s=$("#T-pcList").html();//获得js的html内容

$(".picScroll-left .bd").html(s);//把s的内容放到class为bd内

thisstyle();//执行某个函数

});

js判断用户访问的是PC还是mobile

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

var sUserAgent = navigator.userAgent;

return {

trident: u.indexOf('Trident') > -1,

presto: u.indexOf('Presto') > -1,

isChrome: u.indexOf("chrome") > -1,

isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),

isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,

webKit: u.indexOf('AppleWebKit') > -1,

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

mobile: !!u.match(/AppleWebKit.*Mobile.*/),

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

iPhone: u.indexOf('iPhone') > -1,

iPad: u.indexOf('iPad') > -1,

iWinPhone: u.indexOf('Windows Phone') > -1

};

}()

}

if(browser.versions.mobile || browser.versions.iWinPhone){

window.location = "http:/www.baidu.com/m/";

}

js如何判断用户是否是用微信浏览器

根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下:

function isWeiXin(){

var ua = window.navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i) == 'micromessenger'){

return true;

}else{

return false;

}

}

JS,Jquery获取各种屏幕的宽度和高度

Javascript:

文档可视区域宽: document.documentElement.clientWidth

文档可视区域高: document.documentElement.clientHeight

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

JQuery:

$(document).ready(function(){

alert($(window).height()); //浏览器当前窗口可视区域高度

alert($(document).height()); //浏览器当前窗口文档的高度

alert($(document.body).height());//浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度

alert($(document).width());//浏览器当前窗口文档对象宽度

alert($(document.body).width());//浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})

jquery对文本框只读状态与可读状态的相互转化

$('input').removeAttr('Readonly');

$('input').attr('Readonly','true');

js/jquery实现密码框输入聚焦,失焦问题

js实现方法:

html代码:

js代码:

window.onload = function(){

var oIpt = document.getElementById("i_input");

if(oIpt.value == "会员卡号/手机号"){

oIpt.style.color = "#888";

}else{

oIpt.style.color = "#000";

}

oIpt.onfocus = function(){

if(this.value == "会员卡号/手机号"){

this.value="";

this.style.color = "#000";

this.type = "password";

}else{

this.style.color = "#000";

}

};

oIpt.onblur = function(){

if(this.value == ""){

this.value="会员卡号/手机号";

this.style.color = "#888";

this.type = "text";

}

};

}

jquery实现方法:

html代码:

jquery代码:

$("#showPwd").focus(function() {

var text_value=$(this).val();

if (text_value =='请输入您的注册密码') {

$("#showPwd").hide();

$("#password").show().focus();

}

});

$("#password").blur(function() {

var text_value = $(this).val();

if (text_value == "") {

$("#showPwd").show();

$("#password").hide();

}

});

获取当前日期

var calculateDate = function(){

var date = new Date();

var weeks = ["日","一","二","三","四","五","六"];

return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+

date.getDate()+"日 星期"+weeks[date.getDay()];

}

$(function(){

$("#dateSpan").html(calculateDate());

})

时间倒计时(固定倒计时的结束时间)

function countdown() {

var endtime = new Date("Jan 18, 2015 23:50:00");

var nowtime = new Date();

if (nowtime >= endtime) {

document.getElementById("_lefttime").innerHTML = "倒计时间结束";

return;

}

var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);

if (leftsecond < 0) {

leftsecond = 0;

}

__d = parseInt(leftsecond / 3600 / 24);

__h = parseInt((leftsecond / 3600) % 24);

__m = parseInt((leftsecond / 60) % 60);

__s = parseInt(leftsecond % 60);

document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒";

}

countdown();

setInterval(countdown, 1000);

10秒倒计时跳转

html代码:

js代码:

//设定倒数秒数

var t = 10;

//显示倒数秒数

function showTime(){

t -= 1;

document.getElementById('showtimes').innerHTML= t;

if(t==0){

location.href='error404.asp';

}

//每秒执行一次,showTime()

setTimeout("showTime()",1000);

}

//执行showTime()

showTime();

判断浏览器的简单有效方法

function getInternet(){

if(navigator.userAgent.indexOf("MSIE")>0) {

return "MSIE"; //IE浏览器

}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){

return "Firefox"; //Firefox浏览器

}

if(isSafari=navigator.userAgent.indexOf("Safari")>0) {

return "Safari"; //Safan浏览器

}

if(isCamino=navigator.userAgent.indexOf("Camino")>0){

return "Camino"; //Camino浏览器

}

if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){

return "Gecko"; //Gecko浏览器

}

}

每隔0.1s改变图片的路径

js代码:

(function(){

function chagesimagesrc(t){

document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";

}

setInterval(function(){

for(var i=0;i<2;i++){

setTimeout((function(t){

return function(){

chagesimagesrc(t);

}

})(i+1),i*100)

}

},1000);

})()

点击某个div区域之外,隐藏该div

一般写法:

$(document).on("click",function(e){

var target = $(e.target);

if(target.closest(".city_box,#city_select a.selected").length == 0){

$(".city_box").hide();

}

})

更全的方式:

$(document).click(function(e){

var _con = $(' 目标区域 '); // 设置目标区域

if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1

some code... // 功能代码

}

});

/* Mark 1 的原理:

判断点击事件发生在区域外的条件是:

1. 点击事件的对象不是目标区域本身

2. 事件对象同时也不是目标区域的子元素

*/

js获取某年某月的哪些天是周六和周日

function time(y,m){

var tempTime = new Date(y,m,0);

var time = new Date();

var saturday = new Array();

var sunday = new Array();

for(var i=1;i<=tempTime.getDate();i++){

time.setFullYear(y,m-1,i);

var day = time.getDay();

if(day == 6){

saturday.push(i);

}else if(day == 0){

sunday.push(i);

}

}

var text = y+"年"+m+"月份"+"
"

+"周六:"+saturday.toString()+"
"

+"周日:"+sunday.toString();

document.getElementById("text").innerHTML = text;

}

time(2014,7);

如何在手机上禁止浏览器的网页滚动

方法一:

方法二:

document.addEventListener('touchmove', function(event) {

event.preventDefault();

})

改变type=file默认样式,"浏览"等字体

js判断变量是否未定义的代码

一般如果变量通过var声明,但是并未初始化的时候,变量的值为undefined,而未定义的变量则需要通过 "typeof 变量"的形式来判断,否则会发生错误。

实际应用:

variable有的页面我们不定义,但有的页面定义了,就可以需要这样的判断方法,没有定义的就不执行。

if("undefined" != typeof variable){

if(variable=="abc"){

console.log('成功');

}

}

针对IE6,7的hack,该怎么写

你可能会这么回答:使用“>”,“_”,“*”等各种各样的符号来写hack。是的,这样做没错,但是需要记住每个符号分别被哪些浏览器识别,并且如果写的太乱将造成代码 阅读起来十分困难。学习CSS必须抱有一种质疑精神,有没有一种hack方法可以不写这些乱七八糟的符号,并且代码易维护易读呢?我们可以看看好搜首页是怎么做的:在页面顶端有这样一句话:

在页面的CSS中,会看到这样的规则:

.ie7 #hd_usernav:before, .ie8 #hd_usernav:before {

display: none

}

.ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li {

border-right-color: #c5c5c5

}

.ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {

color: #c5c5c5

}

行内级元素可以设置宽高吗?有哪些?

在面试时,当被问到行内级元素可否设置宽高时,根据我们的经验往往会回答不能。但是这样往往着了面试官的道,因为有一些特殊的行内元素,比如img,input,select等等,是可以被设置宽高的。一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。比如img是一个置换元素,当不对它设置宽高时,它会按照本身的宽高进行显示。所以这个问题的正确答案应该是置换元素可以,非置换元素不可以。

js动态创建css样式添加到head内

function addCSS(cssText){

var style = document.createElement('style');

var head = document.head || document.getElementsByTagName('head')[0];

style.type = 'text/css';

if(style.styleSheet){ //IE

var func = function(){

try{

//防止IE中stylesheet数量超过限制而发生错误

style.styleSheet.cssText = cssText;

}catch(e){

}

}

//如果当前styleSheet还不能用,则放到异步中则行

if(style.styleSheet.disabled){

setTimeout(func,10);

}else{

func();

}

}else{ //w3c

//w3c浏览器中只要创建文本节点插入到style元素中就行了

var textNode = document.createTextNode(cssText);

style.appendChild(textNode);

}

//把创建的style元素插入到head中

head.appendChild(style);

}

//使用

addCSS('#demo{ height: 30px; background:#f00;}');

在IE8以及其低版本浏览器下,IE独有属性styleSheet.cssText。所以一般的兼容简单写法:

var style = document.createElement('style');

style.type = "text/css";

if (style.styleSheet) { //IE

style.styleSheet.cssText = '/*..css content here..*/';

} else { //w3c

style.innerHTML = '/*..css content here..*/';

}

document.getElementsByTagName('head')[0].appendChild(style);

form表单提交时设置编码格式

//内容

js 加入收藏代码

function addFavorite(title, url) {

url = encodeURI(url);

try {

window.external.addFavorite(url, title);

}

catch (e) {

try {

window.sidebar.addPanel(title, url, "");

}

catch (e) {

alert("加入收藏失败,Ctrl+D进行添加");

}

}

}

addFavorite(document.title,window.location);

打印方法:(整个页面 window.print())

function Printpart(id_str)//id-str 内容中的id{

var el = document.getElementById(id_str);

var iframe = document.createElement('IFRAME');

var doc = null;

iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');

document.body.appendChild(iframe);

doc = iframe.contentWindow.document;

doc.write('

' + el.innerHTML + '
');

doc.close();

iframe.contentWindow.focus();

iframe.contentWindow.print();

if (navigator.userAgent.indexOf("MSIE") > 0)

{

document.body.removeChild(iframe);

}

}

js强制手机页面横屏显示

$( window ).on( "orientationchange", function( event ) {

if (event.orientation=='portrait') {

$('body').css('transform', 'rotate(90deg)');

} else {

$('body').css('transform', 'rotate(0deg)');

}

});

$( window ).orientationchange();

jquery获得select中option的索引

html代码:

高级客户经理

中级客户经理

jquery代码:

$(".select-green").change(function(){

var _indx = $(this).get(0).selectedIndex;

$(".selectall .selectCon").hide();

$(".selectall .selectCon").eq(_indx).fadeIn();

});

注:其中(this).get(0)与(this)[0]等价

获取上传文件的大小

html代码:

js代码:

//兼容IE9低版本获取文件的大小

function getFileSize(obj){

var filesize;

if(obj.files){

filesize = obj.files[0].size;

}else{

try{

var path,fso;

path = document.getElementById('filePath').value;

fso = new ActiveXObject("Scripting.FileSystemObject");

filesize = fso.GetFile(path).size;

}

catch(e){

//在IE9及低版本浏览器,如果不容许ActiveX控件与页面交互,点击了否,就无法获取size

console.log(e.message); //Automation 服务器不能创建对象

filesize = 'error'; //无法获取

}

}

return filesize;

}

限制上传文件的类型

如果是高版本浏览器,一般在HTML代码中写就能实现,如:

如果限制上传文件为图片类型,如下:

但是在其它低版本浏览器就不管用了,需要js来判断。

html代码:

js代码:

/* 通过扩展名,检验文件格式。

*@parma filePath{string} 文件路径

*@parma acceptFormat{Array} 允许的文件类型

*@result 返回值{Boolen}:true or false

*/

function checkFormat(filePath,acceptFormat){

var resultBool= false,

ex = filePath.substring(filePath.lastIndexOf('.') + 1);

ex = ex.toLowerCase();

for(var i = 0; i < acceptFormat.length; i++){

if(acceptFormat[i] == ex){

resultBool = true;

break;

}

}

return resultBool;

};

function limitTypes(){

var obj = document.getElementById('filePath');

var path = obj.value;

var result = checkFormat(path,['bmp','jpg','jpeg','png']);

if(!result){

alert('上传类型错误,请重新上传');

obj.value = '';

}

}

随机产生lowwer - upper之间的随机数

function selectFrom(lower, upper) {

var sum = upper - lower + 1; //总数-第一个数+1

return Math.floor(Math.random() * sum + lower);

};

保留后端传递到前端页面的空格

var objt = {

name:' aaaa 这是一个空格多的标签 这是一个空格多的标签'

}

objt.name = objt.name.replace(/\s/g,' ');

console.log(objt.name);

用firebug查看结果:

d8d219f77f5566f5b43bc96fa10111f7.png

为什么Image对象的src属性要写在onload事件后面?

var image=new Image();

imgae.onload = funtion;

imgae.src = 'url'

js内部是按顺序逐行执行的,可以认为是同步的

给imgae赋值src时,去加载图片这个过程是异步的,这个异步过程完成后,如果有onload,则执行onload

如果先赋值src,那么这个异步过程可能在你赋值onload之前就完成了(比如图片缓存,或者是js由于某些原因被阻塞了),那么onload就不会执行

反之,js同步执行确定onload赋值完成后才会赋值src,可以保证这个异步过程在onload赋值完成后才开始进行,也就保证了onload一定会被执行到

跨浏览器添加事件

//跨浏览器添加事件

function addEvent(obj,type,fn){

if(obj.addEventListener){

obj.addEventListener(type,fn,false);

}else if(obj.attachEvent){//IE

obj.attchEvent('on'+type,fn);

}

}

跨浏览器移除事件

//跨浏览器移除事件

function removeEvent(obj,type,fn){

if(obj.removeEventListener){

obj.removeEventListener(type,fn,false);

}else if(obj.detachEvent){//兼容IE

obj.detachEvent('on'+type,fn);

}

}

跨浏览器阻止默认行为

//跨浏览器阻止默认行为

function preDef(ev){

var e = ev || window.event;

if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue =false;

}

}

跨浏览器获取目标对象

//跨浏览器获取目标对象

function getTarget(ev){

if(ev.target){//w3c

return ev.target;

}else if(window.event.srcElement){//IE

return window.event.srcElement;

}

}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置,sp == scroll position

function getSP(){

return{

top: document.documentElement.scrollTop || document.body.scrollTop,

left : document.documentElement.scrollLeft || document.body.scrollLeft;

}

}

跨浏览器获取可视窗口大小

//跨浏览器获取可视窗口大小

function getWindow () {

if(typeof window.innerWidth !='undefined') {

return{

width : window.innerWidth,

height : window.innerHeight

}

} else{

return {

width : document.documentElement.clientWidth,

height : document.documentElement.clientHeight

}

}

}

js 对象冒充

function Person(name , age){

this.name = name ;

this.age = age ;

this.say = function (){

return "name : "+ this.name + " age: "+this.age ;

} ;

}

var o = new Object() ;//可以简化为Object()

Person.call(o , "zhangsan" , 20) ;

console.log(o.say() );//name : zhangsan age: 20

js 异步加载和同步加载

异步加载也叫非阻塞模式加载,浏览器在下载js的同时,同时还会执行后续的页面处理。

在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了:

(function() {

var s = document.createElement('script');

s.type = 'text/javascript';

s.async = true;

s.src = 'http://yourdomain.com/script.js';

var x = document.getElementsByTagName('script')[0];

x.parentNode.insertBefore(s, x);

})();

同步加载

平常默认用的都是同步加载。如:

同步模式又称阻塞模式,会阻止流览器的后续处理。停止了后续的文件的解析,执行,如图像的渲染。浏览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。

通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

同步加载流程是瀑布模型,异步加载流程是并发模型。

js获取屏幕坐标

获取鼠标坐标

function mousePosition(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mousePosition(ev);

document.getElementById('xxx').value = mousePos.x;

document.getElementById('yyy').value = mousePos.y;

}

document.onmousemove = mouseMove;

X: Y:

注释:

1.documentElement 属性可返回文档的根节点。

2.scrollTop() 为滚动条向下移动的距离

3.document.documentElement.scrollTop 指的是滚动条的垂直坐标

4.document.documentElement.clientHeight 指的是浏览器可见区域高度

DTD已声明的情况下:

如果在页面中添加这行标记的话

IE

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度

document.body.scrollHeight ==> 浏览器所有内容高度

document.documentElement.scrollTop ==> 浏览器滚动部分高度

document.body.scrollTop ==>始终为0

document.documentElement.clientHeight ==>浏览器可视部分高度

document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度

document.body.scrollHeight ==> 浏览器所有内容高度

document.documentElement.scrollTop==> 始终为0

document.body.scrollTop==>浏览器滚动部分高度

document.documentElement.clientHeight ==> 浏览器可视部分高度

document.body.clientHeight ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

clientHeight在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

可是悲剧的是,PageX只有FF特有,IE则没有这个,所以在IE下使用这个:

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

scrollTop代表的是被浏览器滑动条滚过的长度

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.

最给力的是,chrome和safari一条龙通杀!完全支持所有属性

aadd347db68b96fa3892a5a8ad4a6cb1.png

js拖拽效果

#login{

height: 100px;

width: 100px;

border: 1px solid black;

position: relative;

top:200px;

left: 200px;

background: red;

}

var oDiv = document.getElementById("login");

oDiv.onmousedown = function(e){

var e = e || window.event;//window.event兼容IE,当事件发生时有效

var diffX = e.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离

var diffY = e.clientY - oDiv.offsetTop;

document.onmousemove = function(e){ //需设为document对象才能作用于整个文档

var e = e||window.event;

oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所选对象的边框到浏览器左侧距离

oDiv.style.top = e.clientY -diffY + 'px';

};

document.onmouseup = function(){

document.onmousemove = null;//清除鼠标释放时的对象移动方法

document.onmouseup = null;

}

}

offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

js实现insertAfter方法

DOM里还有一个insertBefore方法用于再节点前面附件内容,通过insertBefore和appendChild我们可以实现自己的insertAfter函数:

// 'Target'是DOM里已经存在的元素

// 'Bullet'是要插入的新元素

function insertAfter(target, bullet) {

target.nextSibling ?

target.parentNode.insertBefore(bullet, target.nextSibling)

: target.parentNode.appendChild(bullet);

}

// 使用了3目表达式:

// 格式:条件?条件为true时的表达式:条件为false时的表达式

上面的函数首先检查target元素的同级下一个节点是否存在,如果存在就在该节点前面添加bullet节点,如果不存在,就说明target是最后一个节点了,直接在后面append新节点就可以了。DOM API没有给提供insertAfter是因为真的没必要了——我们可以自己创建。

jquery中带命名空间的事件(namespaced events)

带命名空间的事件(namespaced events)在jQuery 1.2就被加入了,但是没有几个人用。

举个例子

$('a').on('click', function() {

// Handler 1

});

$('a').on('click', function() {

// Handler 2

});

如果我们想要移除第二个handler, 使用$(‘a’).off(‘click’)确会把两个handler都移除掉!

但是如果使用带命名空间的事件,就可以搞定:

$('a').on('click.namespace1', function() {

//Handler 1

});

$('a').on('click.namespace2', function() {

//Handler 2

});

使用如下代码移除:

$('a').off('click.namespace2');

求两个数的和 并以二进制输出

var m=3;

var n=5;

var sum=m+n;

var result = sum.toString(2);

console.log(result); //1000

二进制输出:toString函数

js使用console.log在console中打印信息影响性能吗?

问:如上图所示,我看很多的网站在生产环境并没有注释掉开发的时候使用的console.log,这样会影响网站加载的性能吗?影响多大?

答:其实只要调用函数,就会有性能的问题,只是影响大与小的问题。可以用console.time和console.timeEnd中间代码执行时长来测试间隔时间。

console.time('console');

console.log('test');

console.timeEnd('console');

jQuery取得select选择的文本与值

jquery获取select选择的文本与值

获取select :

获取select 选中的 text :

$("#ddlregtype").find("option:selected").text();

获取select选中的 value:

$("#ddlregtype ").val();

获取select选中的索引:

$("#ddlregtype ").get(0).selectedindex;

设置select:

设置select 选中的索引:

$("#ddlregtype ").get(0).selectedindex=index;//index为索引值

设置select 选中的value:

$("#ddlregtype ").attr("value","normal“);

$("#ddlregtype ").val("normal");

$("#ddlregtype ").get(0).value = value;

JS中的"!!"的作用

该操作相当于Boolean(),即转化为布尔型。如:

!!0 == false; //true

!!-1 == true; //true

这儿列举下其它类型转化为boolean型:

undefined =》 false

null =》 false

布尔值 =》 不用转换

数字 =》 0,NaN转化成false,其他数字类型转换成true

字符串 =》 只有空字符串''转换成false,其他都转换成true

对象 =》 全部转换为true

JS replace()方法全局替换变量

简单替换字符:string.replace("a","b"); (把 a 替换成 b)

全局替换字符:string.replace(/a/g,"b");(全局把a替换成b)

但是如果是全局替换一个变量内容,如下,给一个电话号码中间加*号:

var phone = "15512345678";

var sliceNumber = phone.slice(3,phone.length - 3);

var newPhone = phone.replace(new RegExp(sliceNumber,'g'),'****');

console.log(newPhone); //155****678

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/522564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用TensorFlow,GPU和Docker容器进行深度学习

摘要&#xff1a; 数据科学家使用GPU来提高TensorFlow的计算速度&#xff0c;但GPU价格昂贵&#xff0c;也需要对其所占用的资源进行认真的管理。本文将带你来一起解决这一问题。在过去的几个月中&#xff0c;我和多个企业的数据科学团队进行了多次合作&#xff0c;也看到越来越…

一键部署 Spring Boot 到远程 Docker 容器

首先构建一个简单的 Spring Boot 项目&#xff0c;然后给项目添加 Docker 支持&#xff0c;最后对项目进行部署。 文章目录一、前提条件1. SpringBoot项目2. Docker插件3. Dockerfile文件4. 服务器Docker环境5. Maven环境二、技术选型三、新建SpringBoot项目1. pom2. DockerCon…

Docker,一个傲娇的男人

戳蓝字“CSDN云计算”关注我们哦&#xff01;引言大概几个月前&#xff0c;我曾经写过一篇文章叫《微服务为什么一定要用docker》。当时&#xff0c;写完这篇以后&#xff0c;有些粉丝表示想看看基本入门教程&#xff0c;希望我写一篇。然后呢&#xff0c;大家也知道&#xff0…

英特尔核芯显卡控制面板没有了_只认性能你就输了!英特尔第十代酷睿处理器最全解析...

前不久&#xff0c;英特尔公布了第十代酷睿处理器“Ice Lake”的命名规则&#xff0c;AnandTech网站也曝光了“次旗舰”级别酷睿i7-1065G7处理器的实测性能(详见《10nm新架构Iris Plus核显 第十代酷睿到底有多强&#xff1f;》)。从结果来看&#xff0c;i7-1065G7的CPU性能提升…

阿里敏捷教练何勉:论精益思想及精益产品开发实践体系

摘要&#xff1a; 精益求精是工匠精神实现的最佳方法&#xff0c;通过引入实践精益思想的原则和方法进行精益产品开发&#xff0c;打造对客户最好的产品进行交付&#xff0c;其次通过精益思想的理念降低企业的运营成本&#xff0c;提高企业的运营效率。阿里资深解决方案架构师、…

html页面内分栏显示不全,怎么消除Word文档分栏后栏间不平衡现象

IE10浏览器打开网页鼠标不能滚动查看是怎么回事&#xff1f;IE10浏览器黑屏&#xff0c;但是滚动鼠标就好了&#xff0c;不到一分钟...在控制面板的电源设置中&#xff0c;将显示器的关闭时间调到你希望的时刻就可以了。word文档分栏后左右对不齐怎么办word文档分栏后左右对不齐…

开发经验分享_06_前端开发技巧

接上一篇&#xff1a;(企业内部)开发经验分享_05_葫芦画瓢 https://gblfy.blog.csdn.net/article/details/103414567 文章目录一、JS调试技巧1. 推荐使用consde.log2. 推荐理由3. Network正确的使用姿势①Headers一、JS调试技巧 1. 推荐使用consde.log 推荐使用consde.log(内…

Spring精华问答 | 为什么要学习Spring?

戳蓝字“CSDN云计算”关注我们哦&#xff01;Spring是为解决企业应用程序开发复杂性而创建的一个Java开源框架&#xff0c;应用非常广泛。业内非常流行的SSH架构中的其中一个"S"指的就是Spring。今天我们就一起来看看关于Spring的精华问答&#xff01;1Q&#xff1a;…

相关系数excel_如何用Excel计算投资组合的有效前沿?

假设一个投资组合由美债和美股构成&#xff0c;美债为跟踪美国投资级债券市场走势的交易所交易基金AGG&#xff0c;美股为跟踪美国标准普尔500指数走势的交易所交易基金SPY。注&#xff1a;在计算有效前沿曲线时投资回报率一般应采用预期回报率&#xff0c;但本文只是为了演示投…

拼的html页面乱,页面分页html拼接

success:function(data){if(data.status "success"){var page data.p;var html;for(var i 0; ihtml html ;htmlhtml;htmlhtmlpage.result[i].infoTitle;htmlhtmlpage.result[i].infoDepict ;htmlhtml;}// 添加分页选项:下一页html html "" "&q…

LoRaWAN开放式实验平台

摘要&#xff1a; 本文介绍了基于loraserver和uDC的LoRaWAN开发平台&#xff0c;基于该平台用户无需投入硬件即可在设备端和服务端进行&#xff0c;极大的降低了入门和开发门槛。 点此查看原文&#xff1a;http://click.aliyun.com/m/43348/ 本文旨在介绍AliOS Things的LoRaWA…

华为开发者大会上,鸿蒙问世、方舟编译器开源、还有 EMUI 10;壕置100万美元,苹果推出漏洞攻击报告赏金计划……...

关注并标星星CSDN云计算极客头条&#xff1a;速递、最新、绝对有料。这里有企业新动、这里有业界要闻&#xff0c;打起十二分精神&#xff0c;紧跟fashion你可以的&#xff01;每周三次&#xff0c;打卡即read更快、更全了解泛云圈精彩newsgo go go 鸿蒙OS正式对外发布&#xf…

bootstarp怎么使盒子到最右边_折纸教程:漂亮花朵盒子图解,简单实用,一张纸就完成...

爱生活&#xff0c;爱手工&#xff0c;我是爱做手工的小曦&#xff01;今天给大家带来的是颜值很高的花朵盒子折纸&#xff0c;可以放一些小物件哦&#xff01;比如棉签什么的&#xff0c;还是很实用的。具体怎么折&#xff0c;和小曦一起来看看吧&#xff01;花朵盒子折纸教程…

开放分布式追踪(OpenTracing)入门与 Jaeger 实现

摘要&#xff1a; 分布式系统的运维挑战 容器、Serverless 编程方式的诞生极大提升了软件交付与部署的效率。在架构的演化过程中&#xff0c;可以看到两个变化&#xff1a; 应用架构开始从单体系统逐步转变为微服务&#xff0c;其中的业务逻辑随之而来就会变成微服务之间的调用…

c语言网页版在线编译器_C语言编译器IDEapp下载-C语言编译器IDE官方版下载v1.5.1 安卓版...

c语言编译器IDE是专门为学习c语言的人专门打造的&#xff0c;解决了很多人身边没电脑的问题&#xff0c;这款软件是手机端的编译神器&#xff0c;用手机也可以学习c语言&#xff0c;软件中有很多详细的讲解原理&#xff0c;可以非常好的学习c语言&#xff0c;是初学者的好帮手&…

MWC18见闻录|阿里云的第一届“巴交会”

摘要&#xff1a; 上周&#xff0c;世界移动通信大会MWC18在巴塞罗那举行。非常荣幸能成为阿里云“巴交会”首秀小分队的一员。 短短四日&#xff0c;我们借此平台&#xff0c;给欧洲带去中国数字化转型的经验和技术。来自全世界的参会者也借此机会真实感受到了年轻且在高速发展…

这!不是一点儿super,青云混合云!

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者|刘晶晶“什么是混合云&#xff1f;”刚一开场&#xff0c;青云QingCloud解决方案及架构副总裁沈鸥就抛出了一个常听却做起来并不简单的问题。青云QingCloud解决方案及架构副总裁 沈鸥其实关于混合云&#xff0c;我们可以简单分…

查看系统版本

cat /etc/redhat-release

《阿里巴巴Android开发手册》v1.0.1更新,优化部分内容和示例代码

摘要&#xff1a; 春节余味尚未消&#xff0c;我们为移动开发者准备了一份迟到的新年礼物——《阿里巴巴Android开发手册》&#xff0c;继《阿里巴巴Java开发手册》之后&#xff0c;阿里巴巴开发规范家族又添一丁&#xff0c;「阿里巴巴Android开发规范」认证考试也同步上线。 …