JavaScript 知识集锦

2018-03-01 鲁鲁槟 收藏

一、JavaScript

1.1、 JavaScript嵌套PHP

前提是 JavaScript 写在以 .php 为后缀的文件里面

1.2、js 输出数组

console.log(数组变量);然后用浏览器 在控制台查看

1.3、取消手机在屏幕上的滑动事件,用于禁止微信页面往下拉

document.addEventListener("touchmove",function(touchEvent) {touchEvent.preventDefault()},false),

1.4、使用 JavaScript 将网站后台的数据变化实时更新到前端

(一)、三种方式

①、ajax短连接

客户端每隔一秒钟发一次请求,服务器收到请求后会立刻返回结果,不管有没有新数据。

②、ajax长连接

客户端发送一次请求,服务器端收到请求后查询有没有新数据,如果没有新数据就阻塞这个请求,直到有新数据或者超时为止。客户端每次收到请求返回结果后立刻再发一次请求。comet貌似就是这个原理。 (用comet,其实也是ajax 了。 只是前端发送一个请求后,服务端保持这个请求。有数据就事实返回。没数据就一直保持这个连接。你会说如果连接断了、超时呢,断了就再发起。)

③、WebSocket

这就不是一个 HTTP 协议了,而是一个 tcp 协议,而且 Socket 这个玩意顾名思义就是一个流了,可以双向操作。缺点是有些浏览器不支持。

(二)、对比延迟

假设网络延迟是 m 毫秒,那么 ajax 短连接的延迟在 m 到 1000 毫秒之间,另外两种基本只有 m 毫秒的延迟。 对比资源占用: 应该是1>2>3。但是 1 和 2 的比较要看情况,如果两次请求间隔时间很长的话应该是2>1>3。

nodejs 的 http://socket.io 支持上述所说的三种方式,另外还支持 Flash Socket、隐藏IFrame、JSONP Polling等方式。http://Socket.io 提供前端和服务器端的配套机制,并兼容各种浏览器,它的前端 js 模块会判断浏览器的能力,自适应选择最合适的Comet 方式。

1.5、JS 获取浏览器类型:chrome、360、UC、IE等等

/**
 * 获取浏览器类型
 */
function checkBrowser() {
 var ua = navigator.userAgent.toLocaleLowerCase();
 var browserType = null;
 if(ua.match(/msie/) != null || ua.match(/trident/) != null) {
        browserType = "IE";
        browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
 } else if(ua.match(/firefox/) != null) {
        browserType = "huohu";//火狐
 } else if(ua.match(/ubrowser/) != null) {
        browserType = "UC";
 } else if(ua.match(/opera/) != null) {
        browserType = "opera"; //欧朋
 } else if(ua.match(/bidubrowser/) != null) {
        browserType = "baidu"; //百度
 } else if(ua.match(/metasr/) != null) {
        browserType = "sougou"; //搜狗
 } else if(ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        browserType = "QQ";
 } else if(ua.match(/maxthon/) != null) {
        browserType = "aoyou"; //遨游
 } else if(ua.match(/chrome/) != null) {
        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
        function _mime(option, value) {
            var mimeTypes = navigator.mimeTypes;
            for(var mt in mimeTypes) {
                if(mimeTypes[mt][option] == value) {
                    return true;
                }
            }
            return false;
        }
        if(is360) {
            browserType = "360";
        } else {
            browserType = "chrome";
        }
 } else if(ua.match(/safari/) != null) {
        browserType = "Safari";
 }
 return browserType;
}

1.6、javascript json字符串与对象相互转换

①、JSON 字符串转换为 JSON 对象

var str = "{ "name": "cxh", "sex": "man" }"; 
var obj1 = eval("(" + str + ")");
var obj2 = JSON.parse(str);
console.log(obj1);
console.log(obj2);

01.png

A eval 函数可计算某个字符串,并执行其中的 JS 代码;不但不会检测 json 是否合法,还会执行 js 代码

B JSON.parse 用于从一个字符串中解析出 json 对象;会先检测 json 是否合法

②、JSON 对象转换为 JSON 字符串

var str = JSON.stringify(obj1);
console.log(str);

02.png

1.7、JS 加密解密工具

①、站长平台:JS 混淆加密压缩

操作方法简明意了,但是无法批量压缩。

②、批量压缩工具 密码:y436

1.8、JS 实现的 base64 加密、md5 加密及 sha1 加密详解

①、base64 加密

<script type="text/javascript" lay-src="base64.js"></script>
<script type="text/javascript">
  var b = new Base64();
  var str = b.encode("admin:admin");
  alert("base64 encode:" + str);
//解密
  str = b.decode(str);
  alert("base64 decode:" + str);
</script>

②、md5 加密

<script type="text/javascript" lay-src="md5.js"></script>
<script type="text/javascript">
 var hash = hex_md5("123dafd");
 alert(hash)
</script>

③、sha1 加密(据说这是最安全的加密)

<script type="text/javascript" lay-src="sha1.js"></script>
<script type="text/javascript">
 var sha = hex_sha1("mima123465")
 alert(sha)
</script>

1.9、JS 压缩图片并生成 base64

①、介绍

选择图片后压缩图片并生成 base64

②、演示(点击)


③、代码

<input type="file" id="file"/>
<input type="button" onclick="UpladFile()" value="上传" />
<script type="text/javascript">
 function UpladFile() {
        var fileObj = document.getElementById("file").files[0];
        generateBase64(fileObj, {
            quality: 0.2,
            limit: 2,
            del_limit : 1,
        }, function(res) {
            if(res.flag){
                alert("原图:"+ parseInt(fileObj.size/1024) + "kb,压缩后:"+parseInt(res.data.length/1024)+"kb");
            }else{
                alert(res.data);
            }
        });
 }
 /**
  * 生成 base64
  * fileObj文件对象
  * params配置参数:
  *  limit上传限制大小(默认4M)、del_limit压缩限制(默认1M)
  *  width图片宽度(默认原图宽度)、height图片高度(默认原图高度)、quality图像质量(默认0.7)
  * callback
  */
 function generateBase64(fileObj, params, callback) {
        var ready = new FileReader();
        ready.readAsDataURL(fileObj);
        ready.onload = function() {
            var base64 = this.result;
            var limit = params.limit || 4;
            if(params.limit && fileObj.size > params.limit*1000*1024){
                callback({"flag":false,"data":"文件限制"+params.limit+"M"});
                return;
            }
            var del_limit = params.del_limit || 1;
            alert(fileObj.size);
            if(fileObj.size > del_limit*1000*1024) {
                var img = new Image();
                img.src = base64;
                img.onload = function() {
                    var that = this;
                    // 默认按比例压缩
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = params.width || w;
                    h = params.height || (w / scale);
                    var quality = 0.7; // 默认图片质量为0.7
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);
                    if(params.quality && params.quality <= 1 && params.quality > 0) {
                        quality = params.quality;
                    }
                    base64 = canvas.toDataURL("image/jpeg", quality);
                    callback({"flag" : true,"data" : base64});
                }
            }else{
                callback({"flag" : true,"data" : base64});
            }
        };
 }
</script>

1.10、js 过滤所有空格

str.replace(/ /g,"")

1.11、chrome console快捷键

Ctrl+shift+J

1.12、history.go(-1)和history.back()的区别

  • history.go(-1):后退+刷新

  • history.back():后退

1.13、获取当前域名

/**
 * 获取当前域名
 */
function getHost(){
    return document.location.protocol+"//"+window.location.host;
}

1.14、input 属性为 number,maxlength不起作用

<input type="text" maxlength="5" />

效果ok,当

<input type="number" maxlength="5" />

时maxlength失效,长度可以无限输入。 解放方案:

<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />

1.15、利用 exif.js 解决 ios 手机上传竖拍照片旋转 90 度问题

①、问题来源

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题

②、解决方法

因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。

利用 exif.js 读取照片的拍摄信息。

这里主要用到Orientation属性。

Orientation属性说明如下:

01.png

③、代码

主要有html5页面和一个js,示例功能包含了图片压缩和旋转。

自己写的是uploadImage.js。

html5测试页面如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>图片上传</title>
        <script lay-src="jquery.min.js"></script>
        <script type="text/javascript" lay-src="uploadImage.js"></script>
        <script type="text/javascript" lay-src="exif.js"></script>

    </head>

    <body>
        <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">
            上传图片:
            <input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />
        </div>
        <div style="margin-top: 10px;">
            <img alt="preview" lay-src="" id="myImage" />
        </div>
    </body>

</html>

uploadImage.js如下:

function selectFileImage(fileObj) {  
    var file = fileObj.files["0"];  
    //图片方向角 added by lzk  
    var Orientation = null;  
      
    if (file) {  
        console.log("正在上传,请稍后...");  
        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
        if (!rFilter.test(file.type)) {  
            //showMyTips("请选择jpeg、png格式的图片", false);  
            return;  
        }  
        // var URL = URL || webkitURL;  
        //获取照片方向角属性,用户旋转控制  
        EXIF.getData(file, function() {  
           // alert(EXIF.pretty(this));  
            EXIF.getAllTags(this);   
            //alert(EXIF.getTag(this, "Orientation"));   
            Orientation = EXIF.getTag(this, "Orientation");  
            //return;  
        });  
          
        var oReader = new FileReader();  
        oReader.onload = function(e) {  
            //var blob = URL.createObjectURL(file);  
            //_compress(blob, file, basePath);  
            var image = new Image();  
            image.src = e.target.result;  
            image.onload = function() {  
                var expectWidth = this.naturalWidth;  
                var expectHeight = this.naturalHeight;  
                  
                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
                    expectWidth = 800;  
                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
                    expectHeight = 1200;  
                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
                }  
                var canvas = document.createElement("canvas");  
                var ctx = canvas.getContext("2d");  
                canvas.width = expectWidth;  
                canvas.height = expectHeight;  
                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  
                var base64 = null;  
                //修复ios  
                if (navigator.userAgent.match(/iphone/i)) {  
                    console.log("iphone");  
                    //alert(expectWidth + "," + expectHeight);  
                    //如果方向角不为1,都需要进行旋转 added by lzk  
                    if(Orientation != "" && Orientation != 1){  
                        alert("旋转处理");  
                        switch(Orientation){  
                            case 6://需要顺时针(向左)90度旋转  
                                alert("需要顺时针(向左)90度旋转");  
                                rotateImg(this,"left",canvas);  
                                break;  
                            case 8://需要逆时针(向右)90度旋转  
                                alert("需要顺时针(向右)90度旋转");  
                                rotateImg(this,"right",canvas);  
                                break;  
                            case 3://需要180度旋转  
                                alert("需要180度旋转");  
                                rotateImg(this,"right",canvas);//转两次  
                                rotateImg(this,"right",canvas);  
                                break;  
                        }         
                    }  
                      
                    /*var mpImg = new MegaPixImage(image); 
                    mpImg.render(canvas, { 
                        maxWidth: 800, 
                        maxHeight: 1200, 
                        quality: 0.8, 
                        orientation: 8 
                    });*/  
                    base64 = canvas.toDataURL("image/jpeg", 0.8);  
                }else if (navigator.userAgent.match(/Android/i)) {// 修复android  
                    var encoder = new JPEGEncoder();  
                    base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);  
                }else{  
                    //alert(Orientation);  
                    if(Orientation != "" && Orientation != 1){  
                        //alert("旋转处理");  
                        switch(Orientation){  
                            case 6://需要顺时针(向左)90度旋转  
                                alert("需要顺时针(向左)90度旋转");  
                                rotateImg(this,"left",canvas);  
                                break;  
                            case 8://需要逆时针(向右)90度旋转  
                                alert("需要顺时针(向右)90度旋转");  
                                rotateImg(this,"right",canvas);  
                                break;  
                            case 3://需要180度旋转  
                                alert("需要180度旋转");  
                                rotateImg(this,"right",canvas);//转两次  
                                rotateImg(this,"right",canvas);  
                                break;  
                        }         
                    }  
                      
                    base64 = canvas.toDataURL("image/jpeg", 0.8);  
                }  
                //uploadImage(base64);  
                $("#myImage").attr("src", base64);  
            };  
        };  
        oReader.readAsDataURL(file);  
    }  
}  
  
//对图片旋转处理 added by lzk  
function rotateImg(img, direction,canvas) {    
        //alert(img);  
        //最小与最大旋转方向,图片旋转4次后回到原方向    
        var min_step = 0;    
        var max_step = 3;    
        //var img = document.getElementById(pid);    
        if (img == null)return;    
        //img的高度和宽度不能在img元素隐藏后获取,否则会出错    
        var height = img.height;    
        var width = img.width;    
        //var step = img.getAttribute("step");    
        var step = 2;    
        if (step == null) {    
            step = min_step;    
        }    
        if (direction == "right") {    
            step++;    
            //旋转到原位置,即超过最大值    
            step > max_step && (step = min_step);    
        } else {    
            step--;    
            step < min_step && (step = max_step);    
        }    
        //img.setAttribute("step", step);    
        /*var canvas = document.getElementById("pic_" + pid);   
        if (canvas == null) {   
            img.style.display = "none";   
            canvas = document.createElement("canvas");   
            canvas.setAttribute("id", "pic_" + pid);   
            img.parentNode.appendChild(canvas);   
        }  */  
        //旋转角度以弧度值为参数    
        var degree = step * 90 * Math.PI / 180;    
        var ctx = canvas.getContext("2d");    
        switch (step) {    
            case 0:    
                canvas.width = width;    
                canvas.height = height;    
                ctx.drawImage(img, 0, 0);    
                break;    
            case 1:    
                canvas.width = height;    
                canvas.height = width;    
                ctx.rotate(degree);    
                ctx.drawImage(img, 0, -height);    
                break;    
            case 2:    
                canvas.width = width;    
                canvas.height = height;    
                ctx.rotate(degree);    
                ctx.drawImage(img, -width, -height);    
                break;    
            case 3:    
                canvas.width = height;    
                canvas.height = width;    
                ctx.rotate(degree);    
                ctx.drawImage(img, -width, 0);    
                break;    
        }    
    }

1.16、JS实现复制网页内容自动加入版权内容代码和原文链接

test
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s = "<br><br>作者:xxx<br> 链接:"+location.href+"<br>来源:xxx<br>本文原创发布于xx ,转载请注明出处,谢谢合作";
if( window.ActiveXObject ){
    document.body.oncopy = function(){
        event.returnValue = false;
        var t=document.selection.createRange().text;
        clipboardData.setData('Text',t+s);
    };
}else{
    function addLink(){
        var body_element = document.getElementsByTagName('body')[0];
        var selection;
        selection = window.getSelection();
        var copytext = selection + s;
        var newdiv = document.createElement('div');
        newdiv.style.position='absolute';
        newdiv.style.left='-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function(){body_element.removeChild(newdiv);},0);
    }
    document.oncopy = addLink;
}
</script>

1.17、JS 实现点击复制链接

①、目前最流行的写法

<input type="text" id="url" value="https://www.lulublog.cn">
<input type="button" value="复制链接" onClick="url.select();document.execCommand('Copy')">

优点:有点简单,代码量少,缺点:必须要一个输入框的这类东西

②、使用 Flash 插件 ZeroClipboard

<script lay-src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script lay-src="ZeroClipboard.js"></script>
<input type="text" value="需要复制的内容" id="copy_txt"/>
<span id="copy_btn" class="copy_but">点击复制</span>
<script language="JavaScript">
	$(function() {
		ZeroClipboard.setMoviePath("ZeroClipboard.swf");
		var clip = new ZeroClipboard.Client(); // 新建一个对象
		clip.setHandCursor(true); // 设置鼠标为手型
		clip.setText("https://www.lulublog.cn"); // 设置要复制的文本。
		clip.glue("copy_btn"); // 和上一句位置不可调换,单击按钮的ID
		clip.addEventListener("complete", function() {
			alert("复制成功!");
		});
	})
</script>

优点:兼容各个浏览器,缺点:要引用两个插件文件,而且代码非常多。

③、使用 clipboard.js 插件

<script lay-src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
<button class="btn" data-clipboard-text="https://www.lulublog.cn">复制链接</button>
<script type="text/javascript">
    new ClipboardJS('.btn');
</script>

1.18、阻止form表单提交

①、js 方法

<form action="index.php" method="post" onsubmit="return test();">
  <input type="text" value="lulublog">
  <input type="submit" value="提交">
</form>
<script type="text/javascript">
    function test(){
	//return true时form提交
	//return false时form不提交
    }
</script>

②、jq 方法

方法一:类似js

$(form).submit(function() {
    //return true时form提交
    //return false时form不提交
});

方法二:

$(form).submit(function() {
    //阻止默认提交
    event.preventDefault();
    //重新提交
    $('form').off('submit').submit()
});

1.19、undersocre.js

Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能。

①、作为模板引擎

<div id="test"></div>
<script lay-src="jquery.min.js"></script>
<script lay-src="underscore.min.js"></script>
<script type="text/template" id="tpl">
	<%=data.num%>
	<% if(data.list.length){%>
		<% _.each(data.list, function(v, i){ %>
			<%=v.name%>
		<% }) %>
	<%}else{%>
		暂无数据
	<%}%>
</script>
<script type="text/javascript">
	var render = _.template($("#tpl").html());
	var data = {
		num: 2,
		list : [
			{name: '小明'},
			{name: '小红'},
		]
	};
	$("#test").html(render);
</script>

1.20、javaScript 文档

JavaScript核心参考手册常用JavaScript特效

二、jQuery

jquery 1.8.0文档

2.1、jquery 动态绑定

①、问题来源

jquery 动态新增的元素节点无法触发事件的问题

②、解决方法

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

$("#ulLabel").on("click",".liLabel",function(){    
    alert("OK");
});

2.2、jQuery 获取 attr() 与 prop() 属性值的方法及区别介绍

①、问题来源

在高版本的 jquery 引入 prop 方法后,什么时候该用 prop?什么时候用 attr?它们两个之间有什么区别?这些问题就出现了。

  • 对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。

  • 对于 HTML 元素自定义的 DOM 属性,在处理时,使用 attr 方法。

②、举例

<input id="chk1" type="checkbox" data-name="hello"/>是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

A、像 checkbox,radio 和 select 这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用 prop 方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

B、而自定义属性 data-name 需要使用 attr

$("#chk1").prop("data-name") == undefined

如果上面使用attr方法,则会出现:

$("#chk1").attr("data-name") == "hello"

2.3、jQuery 操作 select(取值、设置选中)

比如<select class="selector"></select>

①、设置value为pxx的项选中

$(".selector").val("pxx");

②、设置text为pxx的项选中

$(".selector").find("option[text="pxx"]").attr("selected",true);

这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

③、获取当前选中项的value

$(".selector").val();

④、获取当前选中项的text

$(".selector").find("option:selected").text();

⑤、很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中,这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

2.4、jQuery(function(){ }) 和 (function(){ })(jQuery) 的区别

①、jQuery(function(){ })

jQuery(function(){ });

即:jQuery(document).ready(function(){ });

意义为在DOM加载完毕后执行了ready()方法。

②、(function($){...})(jQuery)

这里实际上是匿名函数:function(arg){...}这就定义了一个匿名函数,参数为arg。而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){...})(param),这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数,而(function($){...}) (jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery,其实就等于:

var fn = function($){....}; 
fn(jQuery);
//注意fn是不存在的。那个函数直接定义,然后就运行了。就"压缩"成下面的样子了
(function($){...})(jQuery)

③、总结

jQuery(function(){ });

用来在DOM加载完成之后运行执行那些预行定义好的函数,执行其中代码时DOM对象已存在。

不可用于存放开发插件的代码,因 为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。

(function(){ })(jQuery);

用于存放开发插件的代码,执行其中代码 DOM不一定存在,所以直接自动执行DOM操作的代码,请小心使用。

2.5、jQuery 区分鼠标单双击事件

①、介绍

区别鼠标单击双击事件

②、演示(点击)

③、代码(点击)

<!DOCTYPE html>
<html>
<head>
    <title>Jquery区分鼠标单双击事件插件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="common.css" media="screen" />
    <style type="text/css">
        .out_box{width:70%;min-width:700px;border-left:1px solid white;border-right:1px solid white;margin:0px auto;}
        .in_box{min-height:550px; _height:550px; border-left:1px solid #ccc; border-right:1px solid #ccc; background:white; padding:1em 2.5em 0;}
        .title{font-size:1.6em; text-align:center; margin:20px 0;}
        #div1{ width:100px; height:100px; margin:5px; border:2px solid #0000FF;position:relative;color:#FF0000;}
    </style>
</head>
<body>
    <div class="out_box">
        <h1 class="title">Jquery区分鼠标单双击事件插件</h1>
        <div class="in_box">
            <div id="div1">使用了插件同时绑定的单双击事件</div>
            <span id="result" style="color:#0000FF"></span>
        </div>
    </div>
    <script lay-src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script lay-src="oneDblClick.js"></script>
    <script type="text/javascript">
    $(function(){
        var click_event = function(e){
            $("#result").append("您<b>单击</b>了我<br>");
            alert("您单击的是"+e.target.tagName);
        };
        var dblclick_event = function(e){
            $("#result").append("您<b>双击</b>了我<br>");
            alert("您双击的是"+e.target.tagName);
        }
        $("#div1").oneDblClick({oneclick:click_event,dblclick:dblclick_event});
    });
    </script>
</body>
</html>

2.6、通过 jQuery Ajax 使用 FormData 对象上传文件

通过 FormData 对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。

如果你把表单的编码类型设置为 multipart/form-data ,则通过 FormData 传输的数据格式和表单通过submit() 方法传输的数据格式相同。

①、使用 <form> 表单初始化 FormData 对象方式上传文件

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
 <input id="file" type="file" name="file"/>
 <button id="upload" type="button">upload</button>
</form>

javascript代码

.ajax({
 url: "/upload",
 type: "POST",
 cache: false,
 data: new FormData($("#uploadForm")[0]),
 processData: false,
 contentType: false,
 success:function(){},
 error:function(){}
})

这里要注意几点:

  • processData设置为false。因为data值是FormData对象,不需要对数据做处理。

  • <form>标签添加enctype="multipart/form-data"属性。

  • cache设置为false,上传文件不需要缓存。

  • contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

如果不是用<form>表单构造FormData对象又该怎么做呢?

②、使用 FormData 对象添加字段方式上传文件

HTML代码

<div id="uploadForm">
 <input id="file" type="file"/>
 <button id="upload" type="button">upload</button>
</div>

这里没有 <form> 标签,也没有 enctype="multipart/form-data" 属性。

javascript代码

var formData = new FormData();
formData.append("file", $("#file")[0].files[0]);
$.ajax({
 url: "/upload",
 type: "POST",
 cache: false,
 data: formData,
 processData: false,
 contentType: false,
 success:function(){},
 error:function(){}
})

从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件,

只需要在<input type="file">里添加multiple或multiple="multiple"属性。

2.7、jQuery 实现回车监听

$(document).keyup(function(event){
  if(event.keyCode ==13){
    $("#submit").trigger("click");
  }
});

2.8、jQuery 操作元素的样式

$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class

2.9、jQuery 支持方法的连写

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert("mouse over event")})
.each(function(i){this.style.color=["#f00","#0f0","#00f"][i]});

2.10、jQuery 判断用户输入结束

var num = 300,time = setTimeout(function(){},num);
//监听用户的输入
$("input[name="mobile"]").bind("input propertychange",function(){
    time = setTimeout(function(){
        //这里为用户输入结束的地方
    },num);
});

2.11、jQuery 过滤两端空格

$.trim(str)

2.12、关于jquery中on绑定click事件在苹果手机失效的问题

①、问题

用一个div当做了一个按钮来使用。

<div class="button">
    <div class=" next_button button_left btn_red" style="width: 345px;">
    下一步
    </div>
</div>

因为是动态添加的内容,所以想要使用click事件,需要给他用on绑定一下:

$(document).on("click",".next_button",function(){
    alert();
});

这个时候,使用苹果手机访问的时候,发现了一个坑爹的问题,如论如何点击“下一步”,都没有任何反应,可是在安卓和各种模拟器中一切正常。

②、原因

苹果有这么个设置: 对于点击的对象,拥有cursor:pointer这个样式的设置,也就是说,鼠标放上去,能够出现“手”型的图标才被认作可以使用点击事件

③、解决

于是果断增加了样式

<style>
    .next_button{        
        cursor:pointer    
    }
</style>

2.12、在iso中Safari浏览器使用jquery的bind click 事件时会失效

解决办法是使用touchstart替换click

var user_agent = navigator.userAgent.toLowerCase();
var ios_devices = user_agent.match(/(iphone|ipod|ipad)/)  ? "touchstart" : "click";
$(document).on(ios_devices,"button",function() {
    
});


共 1条评论

发表评论

您需要登录后才可以评论。登录 | 立即注册
阅读 762