Javascript

2024/7/15·1 views

js监听input输入框值的实时变化实例

情景：监听input输入框值的实时变化实例

解决方法：1.在元素上同时绑定oninput和onporpertychanger事件

实例：

复制代码

<script type="text/JavaScript">
　　function watch(){
　　consolo.log("in")
} 
</script>
<input type="text"  oninput="watch(event)" onporpertychange="watch(event)" />

2.原生js

javascript 复制代码

<script type="text/javascript">
 $(function(){
　　　if("\v"=="v"){//true为IE浏览器，感兴趣的同学可以去搜下，据说是现有最流行的判断浏览器的方法　document.getElementById("a").attachEvent("onporpertychange",function(e){
　　　　console.log("inputting!!");
　　　　}
　　}else{　document.getElementById("a").addEventListener("onporpertychange",function(e){
　　　　console.log("inputting!!");
　　　　}
　　}
});
</script>
<input type="text" id="a"/>

3.使用jQuery绑定事件

javascript 复制代码

<script type="text/javascript">
 $(function(){
　　$("#a").bind('input porpertychange',function(){
　　　　console.log("e");
　　　　});
　　});
</script>
<input type="text" id="a"/>

Js获取图片宽高

javascript 复制代码

<img id="do" src="./Web/img/20211207_20145862_avatar.png.jpg" alt="" />
<script>
	setTimeout(() => {
	let i = document.getElementById("do");
	console.log(i.clientWidth);
	}, 1000);
</script>

js获取当前位置的地理坐标（经纬度）

javascript 复制代码

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function (position) {  
            console.log( position.coords.longitude );
            console.log( position.coords.latitude );
        },
        function (e) {
           throw(e.message);
        }
    ) 
}

window.document.location

自定义函数

in_array

javascript 复制代码

function in_array(stringToSearch, arrayToSearch) {
	for (s = 0; s < arrayToSearch.length; s++) {
		thisEntry = arrayToSearch[s].toString();
		if (thisEntry == stringToSearch) {
			return true;
		}
	}
	return false;
}

##判断文件后缀

javascript 复制代码

var location=$("input[name='file']").val();  
     var point = location.lastIndexOf(".");  
      
     var type = location.substr(point);  
     if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"){  
               
     }

其他方法

jquery:validate /datatable
document.forms[formName][inputName]
datatable.api.ajax.reload()
window.location.reload()
$('.row').find('td:eq(1)').html()
trim函数可以去掉空格
事件委托：$('父节点').on('触发方法','子节点',function(){}) 对应off去掉拥有的事件
evt.preventDefault() /return false; 取消默认事件
JQ对象.bind('事件[多个可以使用空格分割]').triggle('select') 触发选中事件
获取checkbox的选中项：$('input:checkbox[name="box"]:checked')
var arr = $('').split('\n') 将字符串使用\n分割为数组
12.stop方法，停止当前运行的动画
13.is方法

跳转

html 复制代码

<meta http-equiv="refresh" content="3" ; url="index.html">

js 复制代码

window.location.href="index.html"
$('location').attr('href','index.html')
document.referrer  //获取referer
setTimeout("javascrpt:location.href='index.html'",5000) //定时跳转
window.location.search  //可以获取地址栏的query_string
window.history.go(-1) / back(-1)  //返回上一页
<a onclick="javascript:history.go(-1)">
window.navigate('http://www.1kmb.com') //使用navigate方式跳转
window.open('http://www.1kmb.com') //打开新网页
window.location.href="http://www.1kmb.com/index.php?ref="+window.location.href
location.reload([bForceGet]) //bForceGet可选，默认FALSE，用HTTP头If-Modified-Since来检测服务器上的文档是否已经改变，如果改变会重新下载文档，否则从客户端缓存里取当前页,TRUE则以get方式从服务器获取最新页面，相当于F5刷新
location.replace(URL)
location.assign(LOCATION)
document.execCommand('Refresh')
document.URL=location.href
$(document).attr('location',document.referer)

事件

dblclick() jquery双击事件

.bind()

javascript 复制代码

//绑定多个选择器
$(document).on('click','#header a,#sidebar a',function(){
})
//绑定多个事件
$('table tr').on({
    mouseenter:function(){
        
    },
    mouseleave:function(){
        
    },
    click:function(){
        
    }
},'td')
//同时绑定多个选择器和多个事件
$(document).on({
     mouseenter:function(){
        
    },
    mouseleave:function(){
        
    },
    click:function(){
        
    },
},'')

javascript 复制代码

<script>
$( document ) .ready ( function(){
$( '.comments .active ' ).css( "point
er-events " , " none" )
}）;
</script>

layer.js

#js-监听页面滚动

##一、原生js通过window.onscroll监听

javascript 复制代码

window.onscroll = function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
}

##二、Jquery通过$(window).scroll()监听

javascript 复制代码

$(window).scroll(function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
})

##Javascript获取一个盒子的宽和高；

javascript 复制代码

var width = document.getElementById("box2").offsetWidth;//宽度
var height = document.getElementById("box2").offsetHeight;//

##jq判断元素是否存在于数组中

javascript 复制代码

$.inArray(element,array);

存在返回元素下标，否则返回-1，可以使用arr.splice($.inArray('test',arr),1); 删除某一个元素，删除前需要判断元素是否存在否则当数组中只有一个值的时候会删除该值【未测试】。

jq点击复制

复制代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
微信号：<span id="target">xyz2018</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>   
	
<script>    
    $(document).ready(function(){      
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号复制成功",1500);
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>

void 0 相关

void其实是javascript中的一个函数，接受一个参数，返回值永远是undefined。可以说，使用void目的就是为了得到javascript中的undefined

为什么不直接使用undefined呢？使用void 0比使用undefined能够减少3个字节。虽然这是个优势，个人但感觉意义不大，牺牲了可读性和简单性，undefined并不是javascript中的保留字，我们可以使用undefined作为变量名字，然后给它赋值,, 但在chrome 中打印出来的是 undefined

javascript 复制代码

undefined === void 0  // true

数组遍历

JS中遍历数组经常用到，这里总结了6种遍历方法，以及各种方法的优劣。

1. for 遍历数组

1.1 for 的普通遍历

js 复制代码

var name = ['Peter','Stark','Jack'];
// for 循环
for(var i = 0; i < name.length; i++) {
  console.log(name[i]);
}

1.2 for 优化版遍历

js 复制代码

var name = ['Peter','Stark','Jack'];
// 先缓存 name.length
for(var i = 0, len = name.length; i < len; i++) {
  console.log(name[i]);
}

2、while 遍历数组

js 复制代码

// while 循环
var i = 0;
while (i < name.length) {
  console.log(name[i]);
  i++;
}
//while 逆向遍历
var i = name.length;
while (i--) {
  console.log(name[i]);
}

3. for...in 方法

数组既可遍历对象，也可遍历数组。遍历数组时也会遍历非数字键名,所以不推荐 for..in 遍历数组

3.1 遍历数组

js 复制代码

var a = [1, 2, 3];
for (var key in a) {
  console.log(a[key]);
}
/* 1
   2
   3 */

3.2 遍历对象

js 复制代码

const object = {
  name: 'Peter',
  age: 12,
  isHuman: true
};
for (let key in object) {
  console.log(key + '---' + object[key]);
}

4. for...of 方法 (ES6)

js 复制代码

var arr = ['a','b','c'];
for(let item of arr) {
  console.log(item);
}

5. forEach() 方法

用来遍历数组中的每一项，不影响原数组，性能差

缺陷你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

5.1 遍历普通数组

js 复制代码

var arr = [1,2,3,4];
arr.forEach = (function(item) {
  console.log(item);
})

5.2 forEach() 遍历对象类型数组

js 复制代码

const info = [
  {id: 1000, name: 'zhangsan'},
  {id: 1001, name: 'lisi'},
  {id: 1002, name: 'wangwu'}
]
arr.forEach( function(item) {
  console.log(item.id + '---' + item.name);
})
/* 1---zhangsan
   2---lisi
   3---wangwu */

6. map() 方法

支持return，相当与原数组克隆了一份，把克隆的每项改变了，不影响原数组

js 复制代码

var arr = [1,2,3,4];
arr.map( function(item) {
  return item;
})

当然有了 箭头函数 => 后更方便

js 复制代码

var arr = ['a','b','c'];
var newArray = arr.map(x => x);
alert(newArray); // ['a','b''c']

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

js 复制代码

var newArray = arr.map(function (item) {
  return [expression];
})

例如

js 复制代码

var arr = [1,2,3,4];
var newArray = arr.map(
  x => x * x
)
alert(newArray); // [1,4,9,16]

操作cookie

js存入cookie

javascript 复制代码

function Setcookie (name, value){ 
    //设置名称为name,值为value的Cookie
    var expdate = new Date();   //初始化时间
    expdate.setTime(expdate.getTime() + 30 * 60 * 1000);   //时间单位毫秒
    document.cookie = name+"="+value+";expires="+expdate.toGMTString()+";path=/";

//即document.cookie= name+"="+value+";path=/";  时间默认为当前会话可以不要，但路径要填写，因为JS的默认路径是当前页，如果不填，此cookie只在当前页面生效！
}

js取出cookie

javascript 复制代码

function getCookie(c_name){
//判断document.cookie对象里面是否存有cookie
if (document.cookie.length>0){
  c_start=document.cookie.indexOf(c_name + "=")
  //如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串
  if (c_start!=-1){ 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

jq存取cookie

首先引入下面的文件

javascript 复制代码

/*! jquery.cookie v1.4.1 | MIT */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});

a)设置新的cookie:

$.cookie('name'，'dumplings'); //设置一个值为'dumplings'的cookie
设置cookie的生命周期
$.cookie('key', 'value', { expires: 7 }); //设置为7天，默认值：浏览器关闭

设置cookie的域名：

$.cookie('name'，'dumplings', {domain:'qq.com'}); //设置一个值为'dumplings'的在域名'qq.com'的cookie
设置cookie的路径：

$.cookie('name'，'dumplings', {domain:'qq.com'，path:'/'});
//设置一个值为'dumplings'的在域名'qq.com'的路径为'/'的cookie

b)删除cookie

$.removeCookie('name',{ path: '/'}); //path为指定路径，直接删除该路径下的cookie
$.cookie('name',null,{ path: '/'}); //将cookie名为‘openid’的值设置为空，实际已删除

c)获取cookie

$.cookie('name') //dumplings

踩过的坑：
cookie的域名和路径都很重要，如果没有设置成一致，则会有不同域名下或者不同路径下的同名cookie，为了避免这种情况，建议在设置cookie和删除cookie的时候，配置路径和域名。

javascript

XMLHttpRequest 对象

　　XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

post 需要在open后设置header ，需要发送数据直接传递给xhr.send的第一个参数

复制代码

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

关键字：responseText, readyState, onreadystatechange

Jq的ajax方法

复制代码

$.get('http://www.aaa.com',data,function(data,status){
		if('success' === status){
			console.log(data);	
		}
},'json')

dataType 可以是text,html,xml,script,json,jsonp 将添加一个 "?callback=?" 到 URL 来规定回调,POST方式类似使用$.post

js 复制代码

$.ajax({
	url:'http://www.aaa.com',
	type:'GET',
	dataType:'json',
    data:{'name':'bbb'},
    traditional:true, //如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
    timeout:'int', //设置请求超时时间（毫秒）。此设置将覆盖全局设置。
    scriptCharset:'string',//只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
	async:true, //true为异步
    processData:true, //默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
    ifModified:false,//仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
    global:true, //是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
    cache:true, //默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
    contentType:'applicate/x-www-form-urlencoded', //默认值
    context:document.body, //这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
    xhr:function(){
        //需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
    }
    dataFilter:function(data,Type){
        
    },
    beforeSend:function(XHR){
        
    },
	success:function(e){
	
	},
    error:function(e){
        
    },
    complete:function(XHR, TS){
        //请求完成后回调函数 (请求成功或失败之后均调用)。
    },
    jsonpCallback:'string', //为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
    password:'string', //用于响应 HTTP 访问认证请求的密码
})

getScript

复制代码

$(selector).getScript(url,success(response,status))

getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）

fetch

es6新语法fetch().then()

javascript 复制代码

//GET请求
var httpGet = async function (getUrl) {
    var opts = {
        method: "GET",
        credentials: 'include' // 强制加入凭据头
    }
    await fetch(getUrl, opts).then((response) => {
        return response.text();
    }).then((responseText) => {
        result = responseText;
    }).then((error) => {

    });
    return result;
};

javascript 复制代码

//下载
var httpDownLoadFile = async function (getUrl, fileName) {
    var opts = {
        method: "GET",
        credentials: 'include' // 强制加入凭据头
    }
    await fetch(getUrl, opts).then((response) => {
        return response.blob();
    }).then((blob) => {
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    }).then((error) => {

    });
};

一些发送请求后可以执行的方法:

always():一定会执行
catch():执行出错时执行(本体 object)
done():执行成功时执行
failed():执行出错时执行(服务器拒绝)
pipe():过滤方法
progress():当对象生成进度通知时，调用添加处理程序。
Promise():返回Object(延迟)的Promise（承诺）对象。
state():确定一个Object（延迟）对象的当前状态。
then():当（延迟）对象解决，拒绝或仍在进行中时，调用添加处理程序。

es6 新增fetch().then()

formData

复制代码

$('#file_upload').on('change',function(){
      var that = this;
      var files = this.files[0];
}

var form = new FormData();
form.append('file',files);

onclick="return function(){}" 当function返回true执行默认行为为false不执行

fetch

复制代码

fetch('https://...', {
    method: 'post',
    body: JSON.stringify(base),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(function(data) {
})

函数默认值

基本用法

javascript 复制代码

function first(x = 1, y = 2) {
    console.log("x："+x ,"y："+ y);
}
first();
first(100);

解构赋值

javascript 复制代码

function second({x, y = 2}) {
    console.log("x："+x ,"y："+ y);
}
second({});
second({x:100});
second({x:100,y:200});

双重默认值

javascript 复制代码

function third({x = 1 ,y = 2} = {}) {
    console.log("x："+x ,"y："+ y);
}
third();
third({x:100,y:200});
third({x:100});

取反

对浮点数取反两次得到整数

javascript 复制代码

~~(1.2) === parseInt("1.2",10);// true

转布尔

javascript 复制代码

var a = 1;
var b = !!a; // true

进制转换

javascript 复制代码

number.toString(radix)  // 把数字转为字符串，radix可选2-36之间的整数，默认10。注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值

示例

javascript 复制代码

const decimalNum = 123 //注意此处是Number类型
console.log(decimalNum.toString(2))  // "1111011"
const decimalFloatNumber = 123.125
console.log(decimalFloatNumber.toString(2))  // "1111011.001"

因为 toSting() 返回的是表示该对象的字符串，所以如果最终结果是要二进制数值的话，可以再用 Number() 函数转换一下即可

如果想要进行填充，可使用padStart(len, str)方法

padStart(len, str) 根据给定长度自动在字符串的前面补充想补充的字符串（只返回修改后的字符串，不修改原字符串）

len 给定的长度，转换后
str 想补充的字符串

二进制转十进制

使用parseInt(str, radix)转换，该函数解析一个字符串并返回一个整数，radix可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN

js监听页面滚动

javascript 复制代码

  window.addEventListener('scroll', function(e) {
		 // 距顶部
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // 可视区高度
        var clientHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        // 滚动条总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
	});

对这篇文章有意见或建议？提交反馈