web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）

2022-11-20 17:48:28

用原生js直接派发一个事件

如：300毫秒后，直接派发一个resize事件

setTimeout(()=> {

         window.dispatchEvent(new Event('resize'))

      }, 300)

css3渐变应用linear-gradient

z-index: 990;

height: 100%;

width: 100%;

position: absolute;

left: -20px;

background: linear-gradient(to bottom, #e82424, rgba(255,255,255,0), rgba(255,255,255,0), #337ab;

background: -webkit-linear-gradient(to bottom, #e82424, rgba(255,255,255,0), rgba(255,255,255,0), #337ab;

background: -moz-linear-gradient(to bottom, #e82424, rgba(255,255,255,0), rgba(255,255,255,0), #337ab;

background: -ms-linear-gradient(to bottom, #e82424, rgba(255,255,255,0), rgba(255,255,255,0), #337ab;

图例为上下渐变，也可设为左右渐变，改为 left 即可
linear-gradient(to left, #fff, rgba(255,255,255,0), rgba(255,255,255,0), #fff;

html5屏幕旋转事件 onorientationchange

// 判断屏幕是否旋转

function orientationChange() {

  switch (window.orientation) {

    case 0:

      alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);

      break;

    case -90:

      alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);

      break;

    case 90:

      alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);

      break;

    case 180:

      alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);

      break;

  }

};

// 添加事件监听

addEventListener('load', function () {

  //orientationChange();

  window.onorientationchange = orientationChange;

  // 如果是app应用，正常可能还会结合window.onresize

  // window.onorientationchange = window.onresize = function() {你要做什么的代码}

});

页面实现ios原生流畅滚动加回弹效果实现代码

.parent {

            -webkit-backface-visibility: hidden;

            -webkit-transform: translate3d(0, 0, 0);

        }

.parent ul {

            -webkit-overflow-scrolling: touch;

            overflow-scrolling: touch;

            overflow: auto;

        }

滚动条美化代码

.listWrap::-webkit-scrollbar-track {

            background-color: transparent

        }

        .listWrap::-webkit-scrollbar {

            width: 4px

        }

        .listWrap::-webkit-scrollbar-thumb {

            border-radius: 4px;

            background-color: #ccc

        }

        .listWrap::-webkit-scrollbar-thumb:hover {

            background-color: #aaa

        }

js的隐含参数(arguments,callee,caller)使用方法

arguments 该对象代表正在执行的函数和调用它的函数的参数。

Arguments是进行函数调用时，除了指定的参数外，还另外创建的一个隐藏对象。
Arguments是一个类似数组但不是数组的对象，//alert(arguments instanceof Object);
说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。
还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments对象。
arguments对象只有函数开始时才可用。

function ArgTest(a, b){

   this.numargs = arguments.length;     // 获取被传递实参参数的数值。

   this.expargs = ArgTest.length;            // 获取期望形参参数的数值。

}

new ArgTest(888,'sfsd',6666)

//得

ArgTest {numargs: 3, expargs: 2}

arguments.callee

arguments.callee

返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。callee属性是
arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性，
arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

function calleeLengthDemo(arg1, arg2) {

    console.log(arguments.length)

    //arguments.callee()//会陷入死循环无限调用自身calleeLengthDemo

}

functionName.caller

caller

返回一个对函数的引用，该函数调用了当前函数。

functionName.caller

functionName 对象是所执行函数的名称。

说明

对于函数来说，caller属性只有在函数执行时才有定义。

如果函数是由顶层调用的，那么 caller包含的就是 null 

function callerDemo() {

    if (callerDemo.caller) {

        var a= callerDemo.caller.toString();

          alert(a);

      } else {

          alert("this is a top function");

      }

}

function handleCaller() {

      callerDemo();

}

//直接在外面调用callerDemo()则caller为null

JavaScript构造函数详解

function Person( name){

this.name =name;

}

var p1=new Person('John');

等同于：

function person(name ){

Object obj =new Object();

obj.name =name;

return obj;

}

var p1= person("John");

.因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undefine，此时构造函数里面的this对象等于全局this对象。this.name其实就是创建一个全局的变量name。
在严格模式"use strict";下，当你补通过new 调用Person构造函数会出现错误。

也可以在构造函数中用Object.defineProperty()方法来帮助我们初始化：

function Person( name){

Object.defineProperty(this, "name"{

get :function(){

return name;

},

set:function (newName){

name =newName;

},

enumerable :true, //可枚举，默认为false

configurable:true //可配置

});

}

var p1=new Person('John');

6.在构造函数中使用原型对象

//比直接在构造函数中写的效率要高的多

Person.prototype.sayName= function(){

console.log(this.name);

};

但是如果方法比较多的话，大多人会采用一种更简洁的方法：直接使用一个对象字面形式替换原型对象，如下：

Person.prototype ={

sayName :function(){

console.log(this.name);

},

toString :function(){

return "[Person "+ this.name+"]" ;

}

};

这种方式非常流行，因为你不用多次键入Person.prototype，但有一个副作用你一定要注意：

使用字面量形式改写了原型对象改变了构造函数的属性，因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性，这是其他对象实例所没有的。当一个函数被创建时，它的prototype属性也被创建，且该原型对象的constructor属性指向该函数。当使用对象字面量形式改写原型对象时，其constructor属性将被置为泛用对象Object.为了避免这一点，需要在改写原型对象的时候手动重置constructor,如下：

Person.prototype ={

constructor :Person,

sayName :function(){

console.log(this.name);

},

toString :function(){

return "[Person "+ this.name+"]" ;

}

};

再次测试：

p1.constructor===Person

true

p1.constructor===Object

false

p1 instanceof Person

true

理解Object.defineProperty的作用

语法：

Object.defineProperty(obj, prop, descriptor)

参数说明：

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

针对属性，我们可以给这个属性设置一些特性，比如是否只读不可以写；是否可以被for..in或Object.keys()遍历。

给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。

Object.defineProperty(obj,"newKey",{

    value:"hello",

    writable:true,

    enumerable:true,

    configurable:true

});

console.log( obj.newKey ); //hello

设置的特性总结：

value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};

Object.defineProperty(obj,"newKey",{

    get:function (){} | undefined,

    set:function (value){} | undefined

    configurable: true | false

    enumerable: true | false

});

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

在特性中使用get/set属性来定义对应的方法。

var obj = {};

var initValue = 'hello';

Object.defineProperty(obj,"newKey",{

    get:function (){

        //当获取值的时候触发的函数

        return initValue;

    },

    set:function (value){

        //当设置值的时候触发的函数,设置的新值通过参数value拿到

        initValue = value;

    }

});

//获取值

console.log( obj.newKey );  //hello

//设置值

obj.newKey = 'change value';

console.log( obj.newKey ); //change value

注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined

instanceof 运算符的常规用法

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。

通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。例如：

清单 1. instanceof 示例

var oStringObject = new String("hello world");

console.log(oStringObject instanceof String); // 输出 "true"

清单 2. instanceof 常规用法

// 判断 foo 是否是 Foo 类的实例

function Foo(){}

var foo = new Foo();

console.log(foo instanceof Foo)//true

清单 3. instanceof 在继承中关系中的用法

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例

function Aoo(){}

function Foo(){}

Foo.prototype = new Aoo();//JavaScript 原型继承

var foo = new Foo();

console.log(foo instanceof Foo)//true

console.log(foo instanceof Aoo)//true

ES6 新API

Object.assign()

const data = Object.assign({}, commonParams, {
  songmid: 'sdfs',
  platform: 'yqq'
})

new Promise()

if (this.lyric) {
  return Promise.resolve(this.lyric)
}

return axios.get(url, {
  params: data
}).then((res)=> {
  return Promise.resolve(res.data)
})

return new Promise((resolve, reject) => {
  originJsonp(url, option, (err, data) => {
    if (!err) {
      resolve(data)
    } else {
      reject(err)
    }
  })
})

class ES6语法－新建一个类

class Song {
  constructor({id, mid, singer, name, album, duration, image, url}) {
    this.id = id
    this.mid = mid
    this.singer = singer
    this.name = name
    this.album = album
    this.duration = duration
    this.image = image
    this.url = url
  }

  getLyric() {
    if (this.lyric) {
      return Promise.resolve(this.lyric)
    }

    return new Promise((resolve, reject) => {
      getLyric(this.mid).then((res) => {
        if (res.retcode === ERR_OK) {
          //this.lyric = Base64.decode(res.lyric)
          resolve(res)
        } else {
          reject('no lyric')
        }
      })
    })
  }
}

调用Song类

return new Song({
  id: musicData.songid,
  mid: musicData.songmid,
  singer: filterSinger(musicData.singer),
  name: musicData.songname,
  album: musicData.albumname,
  duration: musicData.interval,
  image: `https://y.gtimg.cn/music/photo_new/T002R300x300M000${musicData.albummid}.jpg?max_age=2592000`,
  url: `http://ws.stream.qqmusic.qq.com/${musicData.songid}.m4a?fromtag=46`
})

Array.findIndex(function(value, index, arrayObj){})

function findIndex(list, song) {
　　return list.findIndex(item=> {　　//返回符合条件的下标ID
　　　　return item.id === song.id
　　})
}

通过charCodeAt值大小，sort方法给字母按顺序排序

var ret = ['a':'66666','c':'erwwe','b':8220,'d':9999]
ret.sort((a, b)=>{
  return a.title.charCodeAt(0) - b.title.charCodeAt(0) // a ,b ,c ,d
})

jsonp数据去多余字符

var ret = 'MusicJsonCallback({"retcode":0,"code":0,"subcode":0,"lyric":"W3RpOuWRiueZveaw"})'
if (typeof ret === 'string') {
  var reg = /^\w+\(({[^()]+})\)$/
  var matches = ret.match(reg)
  if (matches) {
    ret = JSON.parse(matches[1])
  }
}

字符模版中，函数传值之 --- 转义传值 \' 中间要传的值 \'

_htm +=
'<a id="cutId00'+i+'" href="javascript:;" class="countShowHide ub ub-ac ub-ver"\
onclick="saveIsHas(\''+e.processid+'\')">\
<div class="apply_list_img"><img src="../img/gonePer.png"/></div>\
<p>'+e.name+'</p>\
</a>';

函数传参列表，获取方法arguments的使用

function arg(){

  var str = '总共传了'+arguments.length+'个参数\n';

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

    str += '第'+(i+1)+'个参数值：'+arguments[i]+'\n';

  }

  alert(str);

}

arg('Mrzou博客','PHP博客','WEB博客');

//总共传了3个参数
//第1个参数值：Mrzou博客
//第2个参数值：PHP博客
//第3个参数值：WEB博客

修改placeholder字体颜色的hack

::-webkit-input-placeholder{color:#d8d8d8;}

:-ms-input-placeholder{color:#d8d8d8;}

::-moz-placeholder{color:#d8d8d8;}

:-moz-placeholder{color:#d8d8d8;}

在textarea文本输入区内想要换行，输入<br/>显示<br/>，输入w3school.com.cn提供的%OD%OA方法也不行，输入/r/n显示/r/n。

解决方法：输入即可成功换行。

html5 multiple可接受多个值的文件上传字段，可实现select项目列表多选：

<form action="demo_form.asp" method="get">

  Select images: <input type="file" name="img" multiple="multiple" />

  <input type="submit" />

</form>

<select v-model="selected" multiple>

  <option selected>A</option>

  <option>B</option>

  <option>C</option>

</select>

input type="datetime-local"使用方法

<input type="datetime-local" id="myLocalDate" value="2014-06-01T10:55:33">

<p>点击按钮来获得 datetime 字段的本地日期和时间。</p>

<button onclick="myFunction()">试一下</button>

<p id="demo"></p>

<script>

function myFunction() {

    var x = document.getElementById("myLocalDate").value;

    document.getElementById("demo").innerHTML = x;

}

</script>

new1、去除IE10+浏览器文本框后面的小叉叉

只需下面一句就ok了

input::-ms-clear {

    display: none;

}

设置文本不能被选择

-webkit-user-select: none;/设置文本不能被选择会倒致苹果系统input无法输入文字/

一个div元素，要让其可编辑，也就是可读写，`contenteditable`属性是最常用方法，做前端的基本上都知道。

但是，知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。

1、contenteditable 属性规定是否可编辑元素的内容

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

2、主角亮相：user-modify.

支持属性值如下

user-modify: read-only;

user-modify: read-write;

user-modify: write-only;

user-modify: read-write-plaintext-only;
其中，write-only不用在意，当下这个年代，基本上没有浏览器支持，以后估计也不会有。read-only表示只读，就是普通元素的默认状态啦。然后，read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容

Q1、-webkit-appearance: none;可移除 input, select, textarea button的默认样式，如select可去掉右边的小箭头

Q2、p:last-of-type{color: #56a79e;} 这样可以找到最后一个指定类型的元素

p:nth-last-of-type(2){color: blue;} 这样可以把倒数第二个<p></p>里面的内容变成蓝色

Q3、用 var img =new Image(); img.src = url;创建一个Image对象，可实现图片的预下载

complete 属性可返回浏览器是否已完成对图像的加载,alert(document.getElementById("img").complete) 返回 true or false

用jquery $('<img />') set方法可以创建一个img元素，与new相同，也可以实现预加载即可使用onload方法，监测其是否加载完
接下来，贴上一段代码：
// 图片延迟替换函数
not() 从匹配元素集合中删除元素。

is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。

function lazy_img() {

    var lazy = $('.lazy-bk');

    lazy.each(function () {

        var self = $(this),

            srcImg = self.attr('data-bk');

        $('<img />').on('load', function () {

            if (self.is('img')) {

                self.attr('src', srcImg)

            } else {

                self.css({

                    'background-image': 'url(' + srcImg + ')',

                    'background-size': 'cover'

                })

            }

        }).attr("src", srcImg);

        self.removeClass('lazy-bk');

    })

}

1、强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

2、iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

3、iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

4、告诉设备忽略将页面中的数字识别为电话号码

5、Android中禁止自动识别页面中的邮件地址，iOS中不会自动识别邮件地址；

6、渐变（这个在做按钮的时候很常用）
element{
background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}

7、去掉手持设备点击时出现的透明层（一般会在头部做格式化）
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}

8、当用户点击链接离开本页时，弹出一个消息框：

$(window).unload(function(){

  alert("Goodbye!");

});

9、/*循环滚动*/
$("button").click(function(){
$("h3").eq(0).appendTo('p');
$("h3").eq(0).remove();
});

10、//js判断手机访问跳转到手机站第一种方法
function browserRedirect() {

var sUserAgent= navigator.userAgent.toLowerCase();

var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";

var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";

var bIsMidp= sUserAgent.match(/midp/i) == "midp";

var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";

var bIsAndroid= sUserAgent.match(/android/i) == "android";

var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";

var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";

if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

window.location.href= '手机网站地址';

} else {

window.location= '电脑网站地址';

}

}
browserRedirect();

//js判断手机访问跳转到手机站第二种方法
if(navigator.platform.indexOf('Win32')!=-1){

//pc

//window.location.href="电脑网址";

}else{

//shouji

window.location.href="手机网址";

}

$.parseJSON(response)用于把数据转换成JSON格式；

disabled(禁用)属性设定<input type="submit" disabled />在Js中设定，值为true and false;不用加双引号，作用是禁用某个元素，比如input submit会变成灰色无法点击。
如：document.getElementsByTagName('input')[0].disabled=true/false;
在Jquery中使用：$("#removeButton").removeAttr("disabled");//要变成Enable，JQuery只能这么写
$("#removeButton").attr("disabled","disabled");//再改成disabled

/*html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }此为全网页限制黑白色css代码*/
background:transparent;/*设置背景默认为透明*/

/*用css渐变滤镜实现背景渐变效果和透明效果*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc090909',endColorstr='#cc090909')!important; /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc0f0c0c',endColorstr='#cc0f0c0c')"!important; /* IE8 */
background-image: -moz-linear-gradient(rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.8) 100%); /*firefox*/
background-image: -webkit-linear-gradient(rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.8) 100%); /*chrome*/

/*判断浏览器是否支持 placeholder*/
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
input.css({'color':'#555'});
}
}).blur();
};
})

function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}

/*获取浏览器的类型和名称*/

function isIE(){
return navigator.appName.indexOf('Microsoft Internet Explorer')=="-1"?false:true;
}//通过获取浏览器内核来判断浏览器的类型Netscape与Microsoft Internet Explorer---《用于区分火狐内核和IE内核的浏器》

var isIE8=navigator.userAgent.toUpperCase().indexOf("MSIE8.0")=="-1"?false:true;
//判断是否是IE8.0浏览器《这个用法通过获取浏览器的名字清楚的判断是哪种浏览器》用时，－－－－indexOf对大小写敏感，没找到返回值 "-1" －－－－－－－－

/*
下面介绍下 js获取客户端浏览器信息

Navigator 对象包含有关浏览器的信息。js就是通过Navigator的属性获取客户端浏览器信息
Navigator 对象属性：

属性
描述

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

码农公寓

js的隐含参数(arguments,callee,caller)使用方法

JavaScript构造函数详解

存取器描述

instanceof 运算符的常规用法

清单 1. instanceof 示例

清单 2. instanceof 常规用法

清单 3. instanceof 在继承中关系中的用法

new1、去除IE10+浏览器文本框后面的小叉叉

设置文本不能被选择

-webkit-user-select: none;/*设置文本不能被选择会倒致苹果系统input无法输入文字*/

一个div元素，要让其可编辑，也就是可读写，contenteditable属性是最常用方法，做前端的基本上都知道。

但是，知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。

Q1、-webkit-appearance: none;可移除 input, select, textarea button的默认样式，如select可去掉右边的小箭头

Q2、p:last-of-type{color: #56a79e;} 这样可以找到最后一个指定类型的元素

1、强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

2、iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

3、iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

4、告诉设备忽略将页面中的数字识别为电话号码

5、Android中禁止自动识别页面中的邮件地址，iOS中不会自动识别邮件地址；

8、当用户点击链接离开本页时，弹出一个消息框：

相关文章

-webkit-user-select: none;/设置文本不能被选择会倒致苹果系统input无法输入文字/

一个div元素，要让其可编辑，也就是可读写，`contenteditable`属性是最常用方法，做前端的基本上都知道。