WEB前端常用JavaScript代码整理（一）

最新推荐文章于 2024-07-06 10:25:59 发布
最新推荐文章于 2024-07-06 10:25:59 发布
阅读量1.1k 收藏 1
点赞数
文章标签： 前端 后端 xhtml ViewUI

JS判断当前窗口是否有父窗口

if(top.location!=self.location){ //有父窗口
    top.location = "https://www.baidu.com";
}else{ //没有父窗口
    window.location.href = "https://www.baidu.com";
}

"window.location.href"、"location.href"是本页面跳转

"parent.location.href"是上一层页面跳转

"top.location.href"是最外层的页面跳转

"window.location.reload()": 当前页面刷新

"parent.location.reload()": 上一层页面刷新

"top.location.reload()": 最外层页面刷新

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

<script type="text/html" id="T-pcList"> //这里面是你要放的html代码，例如放一个div的内容 </script>

把上面的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.toLowerCase(); return { trident: u.indexOf('trident') > -1, presto: u.indexOf('presto') > -1, isChrome: u.indexOf("chrome") > -1 && u.indexOf("safari") > -1 && !(u.indexOf("qqbrowser") > -1), qqbrowser: u.indexOf("qqbrowser") > -1, isFirefox: u.indexOf('firefox') > -1, isSafari: !(u.indexOf("chrome") > -1) && (/webkit|khtml/).test(u) && u.indexOf('safari') > -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, isWeiXin:!!u.match(/MicroMessenger/i) } } } if(browser.versions.mobile || browser.versions.iWinPhone){ console.log('手机'); }else{ console.log('pc'); }

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

functiongetInternet(){    
    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浏览器  } }

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

$(document).bind("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. 事件对象同时也不是目标区域的子元素 */

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

方法一：

<body ontouchmove="event.preventDefault()" >

方法二：

 <script type="text/javascript">
  document.addEventListener('touchmove', function(event) {
    event.preventDefault();
})
 </script>

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

<input type="file" id="browsefile" style="visibility:hidden" οnchange="filepath.value=this.value">
<input type="button" id="filebutton" value="" οnclick="browsefile.click()">
<input type="textfield" id="filepath">

js使用console.time打印代码执行时间

用console.time和console.timeEnd中间代码执行时长来测试间隔时间。

console.time('console');
console.log('test');
console.timeEnd('console');

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

 一般如果变量通过var声明，但是并未初始化的时候，变量的值为undefined，而未定义的变量则需要通过 "typeof 变量"的形式来判断，否则会发生错误。
实际应用：
variable有的页面我们不定义,但有的页面定义了，就可以需要这样的判断方法，没有定义的就不执行。

if("undefined" != typeof variable){ 
    if(variable=="abc"){ 
        console.log('成功'); } }

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表单提交时设置编码格式

<form name="form" method="post" action="XXXX" accept-charset="utf-8" onsubmit="document.charset='utf-8';"> //内容 </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('<div>' + el.innerHTML + '</div>'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } }

参考地址：

http://www.cnblogs.com/yeminglong/archive/2012/12/03/2799957.html

http://www.cnblogs.com/jikey/archive/2011/06/22/2087683.html

js强制手机页面横屏显示

<script>
        // Bind an event to window.orientationchange that, when the device is turned,
        // gets the orientation and displays it to on screen.
        $( window ).on( "orientationchange", function( event ) { //alert (event.orientation ) if (event.orientation=='portrait') { $('body').css('transform', 'rotate(90deg)'); } else { $('body').css('transform', 'rotate(0deg)'); } }); // You can also manually force this event to fire.  $( window ).orientationchange(); </script>

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取得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;

jquery获得select中option的索引实例

html代码：

<select class="select-green">
    <option value="0">高级客户经理</option> <option value="1">中级客户经理</option> </select>

jquery代码：

$(".select-green").change(function(){
    var _indx = $(this).get(0).selectedIndex;
    $(".selectall .selectCon").hide(); $(".selectall .selectCon").eq(_indx).fadeIn(); });

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

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');

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

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

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

js实现方法： 

html代码：

<input id="i_input" type="text" value='会员卡号/手机号' />

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代码：

<input type="text"class="oldpsw" id="showPwd"value="请输入您的注册密码"/> <input type="password" name="psw"class="oldpsw" id="password"value="" style="display:none;"/>

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(); } });

获取上传文件的大小

html代码：

<input type="file" id="filePath" onchange="getFileSize(this)"/>

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代码中写就能实现，如：

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">

如果限制上传文件为图片类型，如下：

<input type="file" class="file" value="上传" accept="image/*"/>

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

html代码：

<input type="file" id="filePath" onchange="limitTypes()"/>

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,'&nbsp;');
    console.log(objt.name);

用firebug查看结果：

为什么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一定会被执行到

获取当前日期

var calculateDate = function(){
var date = newDate();
var weeks = ["日","一","二","三","四","五","六"]; return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日 星期"+weeks[date.getDay()]; } $(function(){ 　　$("#dateSpan").html(calculateDate()); })

时间倒计时（固定倒计时的结束时间）

functioncountdown(){
    var endtime = newDate("Jan 18, 2015 23:50:00");
    var nowtime = newDate();
    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代码：

<divid="showtimes"></div>

js代码：

//设定倒数秒数  var t = 10;  
//显示倒数秒数  functionshowTime(){  
    t -= 1; document.getElementById('showtimes').innerHTML= t; if(t==0){ location.href='error404.asp'; } //每秒执行一次,showTime()  setTimeout("showTime()",1000); } //执行showTime() showTime();

每隔0.1s改变图片的路径

<divid="tt"><imgsrc="images/1.jpg"alt=""/></div>

js代码：

(function(){
    functionchagesimagesrc(t){
        document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";
    }
    setInterval(function(){
        for(var i=0;i<2;i++){ setTimeout((function(t){ returnfunction(){ chagesimagesrc(t); } })(i+1),i*100) } },1000); })()

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

<p id="text"></p>
 
<script type="text/javascript">
functiontime(y,m){
    var tempTime = newDate(y,m,0);
    var time = newDate();
    var saturday = newArray(); var sunday = newArray(); for(var i=1;i<=tempTime.getDate();i++){ time.setFullYear(y,m-1,i); var day = time.getDay(); if(day == 6){ saturday.push(i); }elseif(day == 0){ sunday.push(i); } } var text = y+"年"+m+"月份"+"<br />" +"周六："+saturday.toString()+"<br />" +"周日："+sunday.toString(); document.getElementById("text").innerHTML = text; } time(2014,7); </script>

函数内部属性arguments

函数内部，有两个特殊的对象：arguments 和 this。arguments 是一个类数组对象，包含着传入函数中的所有参数，主要用途是保存函数参数。但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。
对于阶乘函数一般要用到递归算法，所以函数内部一定会调用自身；如果函数名不改变是没有问题的，但一旦改变函数名，内部的自身调用需要逐一修改。为了解决这个问题，我们可以使用  arguments.callee 来代替。 
function box(num) {
        if (num <= 1) {
            return 1; } else { return num * arguments.callee(num-1);//使用 callee 来执行自身  } }

通过arguments 对象的length属性，来智能的判断有多少参数，然后把参数进行合理的应用 。

比如，要实现一个加法运算，将所有传进来的数字累加，而数字的个数又不确定。

function box() {
        var sum = 0;
        if (arguments.length == 0) return sum; //如果没有参数，退出 for(var i = 0;i < arguments.length; i++) { //如果有，就累加 sum = sum + arguments[i]; } return sum; //返回累加结果  } alert(box(5,9,12));

if条件语句相关

对于 if 语句括号里的表达式，ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值。如果值为 true，执行后面的一条语句，否则不执行。

跨浏览器添加事件

//跨浏览器添加事件
    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; } }

阻止事件冒泡

在阻止冒泡的过程中，W3C 和 IE 采用的不同的方法，那么我们必须做一下兼容。

function stopPro(evt) {
    var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation(); }

跨浏览器获取目标对象

//跨浏览器获取目标对象
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') { //IE8及以下undefined return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },

跨浏览器获取Style

function getStyle(element, attr) {
    if (typeof window.getComputedStyle != 'undefined') {//W3C return window.getComputedStyle(element, null)[attr]; } else if (typeof element.currentStyle != 'undeinfed') {//IE return element.currentStyle[attr]; } }

js 对象冒充

<script type = 'text/javascript'>
 
    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 </script>

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); })();

同步加载

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

<script src="http://yourdomain.com/script.js"></script>

同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。
通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

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

js获取屏幕坐标

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <meta name="auther" content="fq" /> <title>获取鼠标坐标</title> </head> <body> <script type="text/javascript"> 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; </script> X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> </body> </html>

注释：
1.documentElement 属性可返回文档的根节点。
2.scrollTop() 为滚动条向下移动的距离
3.document.documentElement.scrollTop 指的是滚动条的垂直坐标
4.document.documentElement.clientHeight 指的是浏览器可见区域高度

DTD已声明的情况下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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一条龙通杀!完全支持所有属性

js拖拽效果

<!doctype html>
<html lang="zn-CN"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> #login{ height: 100px; width: 100px; border: 1px solid black; position: relative; top:200px; left: 200px; background: red; } </style> </head> <body> <div id="login"></div> <script type="text/javascript"> 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; } } </script> </body> </html>

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是因为真的没必要了——我们可以自己创建。

上下文菜单事件：contextmenu

当我们右击网页的时候，会自动出现 windows 自带的菜单。那么我们可以使用 contextmenu 事件来修改我们指定的菜单，但前提是把右击的默认行为取消掉。

function addEvent(obj, type, fn) { //添加事件兼容
    if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) { obj.attachEvent('on' + type, fn); } } function removeEvent(obj, type, fn) { //移除事件兼容 if (obj.removeEventListener) { ob j.removeEventListener(type, fn); } else if (obj.detachEvent) { obj.detachEvent('on' + type, fn); } } addEvent(window, 'load', function () { var text = document.getElementById('text'); addEvent(text, 'contextmenu', function (evt) { var e = evt || window.event; preDef(e); var menu = document.getElementById('menu'); menu.style.left = e.clientX + 'px'; menu.style.top = e.clientY + 'px'; menu.style.visibility = 'visible'; addEvent(document, 'click', function () { document.getElementById('myMenu').style.visibility = 'hidden'; }); }); });

JS中的文档模式-document.compatMode（老版本）

文档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。

BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;

CSS1Compat：标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。

例如：

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return { 　　　　　　　　width: document.body.clientWidth, 　　　　　　　　height: document.body.clientHeight 　　　　　　} 　　　　} else { 　　　　　　return { 　　　　　　　　width: document.documentElement.clientWidth, 　　　　　　　　height: document.documentElement.clientHeight 　　　　　　} 　　　　} 　　}

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

var m=3;
var n=5;
var sum=m+n; var result = sum.toString(2); console.log(result); //1000

二进制输出：toString函数

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

 跨域的几种方式

首先了解下浏览器的同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

那么怎样解决跨域问题的呢？

1 通过jsonp跨域
        1.）原生实现：
         <script>
            var script = document.createElement('script');
            script.type = 'text/javascript';
        
            // 传参并指定回调执行函数为onBack script.src = 'http://www.....:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); } </script> 2、 document.domain + iframe跨域 此方案仅限主域相同，子域不同的跨域应用场景。 1.）父窗口：(http://www.domain.com/a.html) <iframe id="iframe" src="http://child.domain.com/b.html"></iframe> <script> document.domain = 'domain.com'; var user = 'admin'; </script> 2.）子窗口：(http://child.domain.com/b.html) <script> document.domain = 'domain.com'; // 获取父窗口中变量 alert('get js data from parent ---> ' + window.parent.user); </script>  弊端：请看下面渲染加载优化 3、 nginx代理跨域 4、 nodejs中间件代理跨域 5、 后端在头部信息里面设置安全域名

更多跨域的具体内容请看《跨域详解》

纯前端JS读取与解析本地文本类文件

var reader = new FileReader();
reader.onload = function (event) {
    // event.target.result就是文件文本内容 // 然后你就可以为所欲为了 // 例如如果是JSON数据可以解析 // 如果是HTML数据，可以直接插入到页面中 // 甚至字幕文件，各种滤镜，自定义文件格式，都可以…… }; reader.readAsText(file);

详细参考地址：小tips: 纯前端JS读取与解析本地文本类文件

各浏览器的navigator.userAgent

IE11：Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE9： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE8： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
谷歌：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
火狐：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
QQ浏：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Core/1.47.933.400 QQBrowser/9.4.8699.400
360js:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
360jr:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
safar:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

JS中的pixelTop属性

style对象：

pixelLeft
pixelTop
pixelWidth
pixelHeight

返回以像素为单位的位置坐标的数值,非像素单位转换为像素单位显示。

left
top
width
height

返回带单位的位置坐标字符串

TweenMax.js用法总结

1. yoyo:Boolean -- YOYO球。另外一种循环的方式，像我们玩的YOYO球一样，从头到尾，再从尾到头的往返运动，PS：要与repeat同时设置
repeat:int -- 循环次数。设置为-1为无限循环

window.location属性

window.location 对象所包含的属性

属性 描述
hash从井号 (#) 开始的 URL（锚）
host主机名和当前 URL 的端口号
hostname当前 URL 的主机名
href完整的 URL
pathname当前 URL 的路径部分
port当前 URL 的端口号
protocol当前 URL 的协议
search从问号 (?) 开始的 URL（查询部分）

protocol 属性是一个可读可写的字符串，可设置或返回当前 URL 的协议。

语法：

location.protocol=path

实例：假设当前的 URL 是: http://example.com:1234/test.htm#part2：

<script type="text/javascript"> document.write(location.protocol); </script>

输出：http:

正则表达式中的RegExp.$1

RegExp 是javascript中的一个内置对象。为正则表达式。
RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个子匹配(以括号为标志)字符串，以此类推，RegExp.2, RegExp.3, ..RegExp.$99总共可以有99个匹配。

例如：

var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)    
r.exec('1985-10-15');
s1=RegExp.$1;
s2=RegExp.$2; s3=RegExp.$3; console.log(s1+" "+s2+" "+s3)//结果为1985 10 15

JS中的Navigator对象

Navigator 对象包含有关浏览器的信息。

注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性：

属性描写
appCodeName返回浏览器的代码名。
appMinorVersion返回浏览器的次级版本。
appName返回浏览器的名称。
appVersion返回浏览器的平台和版本信息。
browserLanguage返回当前浏览器的语言。
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass返回浏览器系统的 CPU 等级。
onLine返回指明系统是否处于脱机模式的布尔值。
platform返回运行浏览器的操作系统平台。
systemLanguage返回 OS 使用的默认语言。
userAgent返回由客户机发送服务器的 user-agent 头部的值。
userLanguage返回 OS 的自然语言设置。

 在谷歌浏览器中打印Navigator对象，如图所示：

markdown语法经常遗忘操作记录

删除线：~~ ~~包裹的文字会显示删除线 删除线

web常用状态码整理

200：OK 请求成功。一般用于GET与POST请求

204：No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

304：Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

400：Bad Request 客户端请求的语法错误，服务器无法理解

403：Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404：Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

weixin_34038652
关注
常用javascript前端功能总结
01-30
javascript功能总结，内含46种常用功能，对于前端初级中级进阶起到很好的指导作用
前端常用的JavaScript操作
qinchao的博客
09-12 198
1.删除字符串中指定的一段字符 例：删除”10km”中的km str = &amp;amp;amp;amp;amp;quot;10km&amp;amp;amp;amp;amp;quot; //方法一： var res = str.replace('km', '') //方法二： var res = str.split('km').join('') //join方法不传参默认使用逗号作为分隔符...
前端开发25 个 JavaScript 单行代码
最新发布
桂云帆的博客
07-06 881
在上面的例子中，如果把?位运算符 (>>>) 确保了即使未找到点号 (.) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。其中Object.values(obj)将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找。其中Object.values(obj)用于获取对象中所有的值的数组，然后通过includes(value)检查指定值是否在该数组中。它将会从数组中删除所有假值（ 0，false，null，undefined，''，NaN）。
前端常用的script链接
weixin_47020721的博客
07-14 655
前端常用script链接 vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
整理了一份 Javascript 代码书写规范
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
06-18 989
基于对参考文档进行整理，方便读者参照，有建议之处，欢迎留言。 （2）请在作用域的顶部申明变量，这样做主要避免变量申明和赋值提升相关的问题。 字符串 (1)使用单引号定义字符串 字符串长度超过80个字符是，应该分成多行，通过字符串连接符(+)进行连接。 (3)使用数组方法join替代连接符 数组 (1)创建数组 (2)数组中添加元素-push() (3)拷贝数组-slice() 函数 (1)定义函数 (2)使用函数 (3)参数arguments (4)调用 对象 (1)创建对象
JavaScript奇技淫巧, 代码优化, 代码整理收藏, 干货!
一袋米要扛几楼_
06-01 3397
前言 js实现一个需求可能有上百种解法, 有的大费周章, 有的寥寥几笔, 如何让自己的代码又少又效率更高呢? [doc] forEach forEach实例 forEach讲解 forEach浏览器原生源码 map map实例 map讲解 map浏览器原生源码 every every实例 every讲解 every浏览器原生源...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
真实整理305个前端JS特效代码源码，并非虚标1500个那种资源
05-22
"真实整理305个前端JS特效代码源码"是一个宝贵的资源集合，它提供了大量的JavaScript代码示例，帮助开发者在实际项目中快速实现各种视觉效果。 首先，我们要理解JavaScript在前端开发中的作用。JavaScript是一种轻...
Web前端知识整理 初学者.zip
12-01
在“Web前端知识整理 初学者.zip”这个压缩包中，包含了“Web前端思维导图”的详细内容。这个思维导图对于初学者来说是一个宝贵的资源，它系统地梳理了Web前端开发的基础概念、核心技术以及常见工具，帮助学习者建立...
第1章Web前端开发基础[整理].pdf
10-12
本章主要涵盖了Web前端开发的基础知识、实训目标以及常用的技术和工具。 首先，Web前端开发实训目标分为三个层面：知识目标、能力和素质目标。知识目标强调对HTML、CSS、JavaScript等核心技术的理解；能力目标则...
Django web开发(一) - 前端
每天进步亿点点
11-30 6万+
Django学习 Web框架 Python语言
web前端开发中常见的多列布局解决方案整理(一定要看)
11-29
多列布局 多列布局在web前端开发中也是较为常见的，比如常见的三列、四列及以上，列的布局使得单一的页面可以展示更多分门别类的内容。这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种。 两列定宽加一列自适应布局 本布局模式一共分为三列，其中两列宽度固定，一列宽度随内容宽度而改变。简易实现代码如下： 两列定宽加一列自适应 本案例中每一列高度为自适应，即高度和内容高度一致，左列和中列宽度为100px，右列宽度为自适应，通过float浮动布局结合块级元素的特性来实现。需要注意的是背景颜色可以设置在p标签上，也可以设置在div标签上。 多列不定宽加一列自适应 这里讲解的案
前端优化小知识
醇醛酸酯 的博客
03-26 416
CSS高消耗属性在绘制前需要浏览器进行大量计算：box-shadowsborder-radiustransparencytransformsCSS filters（性能杀手）避免过分重排当发生重排的时候，浏览器需要重新计算布局位置与大小，更多详情。常见的重排元素:widthheightpaddingmargindisplayborder-widthpositiontopleftrightbotto...
【性能优化】前端性能优化方案都帮你整理好了（全面系统）！
Umbrella_Um的博客
10-15 805
前言 前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1. 从客户端角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 2. 从服务器端角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源...
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）_javascript在前端的应用
2401_85122999的博客
06-11 672
/199.99//1024//128console.log(parseFloat(“10年”));//10console.log(parseFloat(“今天是8号”));//NaN//66//199//1024//128console.log(parseInt(“10年”));//10console.log(parseInt(“今天是8号”));
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
热门推荐
BudingCode的博客
03-30 8万+
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JS 高效、快速开发 代码片段 分类整理
estrusKing的博客
04-11 2311
JavaScript单行代码 在项目中高效开发1、生成随机字符串2、获取两个数字之间的随机整数3、字符串中每个单词的第一个字符大写4、删除数组中的重复值5、删除数组对象的重复值6、展平一个数组7、从数组中删除虚假值8、检查一个数字是偶数还是奇数9、获取参数的平均值10、将数字保留固定小数点11、计算两个日期相差天数12、从日期中获取一年中的哪一天13、生成一个随机的十六进制颜色14、将RGB颜色转换为十六进制15、清除所有cookies16、检测暗模式17、交换两个变量18、暂停一会 1、生成随
获取文件扩展名
arly98196的博客
02-05 442
完成extname函数，它会接受一个文件名作为参数，你需要返回它的扩展名。例如，输入emoji.png，返回.png。 const extname = (filename) => {//声明一个常亮extname，有一个filename的参数 　　let s = ""; //声明一个string类型的变量 　　let arr = [".jpg",'.png','.gi...
Web前端之JavaScript
qq_28450045的博客
02-25 159
JavaScript(简称JS)开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译JS声明变量:   var  变量的名字;JS声明函数: function 函数的名称(参数的名字){}JS开发的步骤:     1. 确定事件     2. 事件要触发函数,所以我们是要声明函数     3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西 JS中常用的事件...
前端工程师HTML/CSS基础代码指南
《前端工程师必备资料【CODE篇】》由紫色贵族编辑整理，是一份专注于HTML、CSS和基础前端技术的实用指南。这份文档详细列出了前端开发过程中常用的元素和语义标签，对于提升开发效率和理解页面结构有着深远影响。 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值