目录

一、jQuery选择器选择选中的或者disabled的选择框时attr函数无效
二、jQuery each函数的break/continue
三、jQuery 获取元素的left会值/left数值
四、js 监听元素触摸/划屏动作
五、没设置导致$(window).height()不准确问题
六、jQuery获取/设置/监听下拉选择select的值
七、jQuery获取/设置/监听输入框input的值
八、js拼接html字符串时要注意先把单引号及双引号转义,不然可能会出现页面错误
九、绑定在scroll里面的方法在手机里面经常会等滚动完后再执行,有一定的延时,如何能缩短响应速度?
十、许多li间的drag and drop拖放的实现
十一、顺序执行时,用js控制删除transition css3效果后再新加transition,旧的transition还生效
十二、返回顶部
十三、完美支持所有端的[复制到剪贴板]js插件-clipboard.js
十四、H5通过WebViewJavascriptBridge与APP进行交互时,H5获取APP的数据的异步时间不确定的问题。
十五、返回底部
十六、获取当前网站根域
十七、Url编码转义
十八、JSON与字符串互转
十九、jQuery样式选择器及样式名中最好不要出现大写字母,否则可能在webview里面执行不成功
二十、使用fastclick.js时如果用label包住checkbox或者radio按钮里面同时出现其他如span或者i元素时,在ios里会出现点击不了的情况
二十一、slice与splice的使用
二十二、删除页面上所有的img和iframe
二十三、js能过userAgent判断各种设备终端
二十四、document.body.scrollTop 一直都是 0 的问题
二十五、原生js获取元素宽高
二十六、jQuery获取元素位置、宽高
二十七、js动态加载脚本
二十八、javascript 操作符(~、&、|、^、<<、>>)(操作数是32整数范围内)
二十九、audio标签声音文件如何重播?replay?
三十、js中如何使用FormData或者Ajax方式上传文件
三十一、js中的call、apply、bind的使用方法
三十二、加载js用async和defer的区别
三十三、非cookie情况下,前端实现访问终端的唯一标识:Fingerprintjs2
三十四、Debounce和Throttle的区别
三十五、原生js做上拉到底部加载
三十六、js正则过滤emoji表情输入
三十七、WPS2013造成的HTML5 file.type值异常
三十八、js如何判断网络是否正常
三十九、在QQ/微信浏览器里面使用el.scrollTo(0, 0)无效的问题
四十、js如何实现input=file对要上传的图片进行预览
四十一、如何创建一个干净的对象
四十二、0 == '' // => true的坑
四十三、ios8的坑。Dom类数组,要先转为数组才可以使用forEach进行遍历
四十四、为什么要用sessionStorage?
四十五、js操作视频相关用法
四十六、ios/ie11中new Date('2017-08-11 12:00:00')设置日期不成功问题
四十七、canvas图片绘制后转图片url跨域问题Tainted canvases may not be exported
四十八、创建一个a链接 使用a.click()模拟点击,主流浏览器可以,但是在ie10以下不能生效

本文同步发布到 http://www.kt5.cn/fe/2019/11/04/js-jquery/

一、jQuery选择器选择选中的或者disabled的选择框时attr函数无效

jQuery代码如下:

if (!$obj.prop("disabled")){//用prop选择或者设置对象值
     $obj.prop("checked", This.prop("checked"));
}

或者

$obj.is(":checked");

  

二、jQuery each函数中如何实现break/continue

jQuery代码如下:

return false;//break
return true;//continue

 

三、jQuery 获取元素的left会值/left数值

$obj.position().left;//获取数值
$obj.css("left");//获取值-如1px

 

四、js 监听元素触摸/划屏动作

                var el=document.getElementById("example"),
                    startPos = { x: 0, y: 0 },
                    currentPos = { x: 0, y: 0 };
                el.addEventListener('touchstart', function (event) {
                    startPos = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
                }, false);
                el.addEventListener('touchmove', function (event) {
                    event.preventDefault();//阻止默认的触屏滚动动作
                    currentPos = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
                }, false);
                el.addEventListener('touchend', function (event) {
                    currentPos = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
                    if (currentPos.x != startPos.x){
                        //你左右划动
                    }
                    if (currentPos.y != startPos.y){
                         //你上下划动
                    }
                    startPos = { x: 0, y: 0 },
                    currentPos = { x: 0, y: 0 };
                }, false);

 

五、没设置导致$(window).height()不准确问题

只要在页面顶部加上就可以

<!DOCTYPE html>

 

六、jQuery获取/设置下拉选择select的值

$(obj).val();//获取
$(obj).val(val);//设置
$(obj).change(function(){
    //监听选择修改
});

 

七、jQuery获取/设置/监听输入框input的值

$(obj).on("input propertychange",function(){//监听
    var val=$(this).val(),//获取
        $(obj2).val(val);//设置 
});

 

八、js拼接html字符串时要注意先把单引号及双引号转义,不然可能会出现页面错误

htmlStr = htmlStr .replace("'","&apos;").replace('"','&quot;');//"是双引号转义,'是单引号转义

 

九、绑定在scroll里面的方法在手机里面经常会等滚动完后再执行,有一定的延时,如何能缩短响应速度?

/**
 * 简易的事件添加方法
 * http://www.zhangxinxu.com/wordpress/2013/04/js-mousewheel-dommousescroll-event/
 * 
 * @param {Element} el
 * @param {String} type
 * @param {Function} fn
 * @param {Boolean} capture
 */
window.addEvent = (function (window, undefined) {
    var _eventCompat = function (event) {
        var type = event.type;
        if (type == 'DOMMouseScroll' || type == 'mousewheel') {
            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
        }
        if (event.srcElement && !event.target) {
            event.target = event.srcElement;
        }
        if (!event.preventDefault && event.returnValue !== undefined) {
            event.preventDefault = function () {
                event.returnValue = false;
            };
        }
        /* 
           ......其他一些兼容性处理 */
        return event;
    };
    if (window.addEventListener) {
        return function (el, type, fn, capture) {
            if (type === "mousewheel" && document.mozHidden !== undefined) {
                type = "DOMMouseScroll";
            }
            el.addEventListener(type, function (event) {
                fn.call(this, _eventCompat(event));
            }, capture || false);
        }
    } else if (window.attachEvent) {
        return function (el, type, fn, capture) {
            el.attachEvent("on" + type, function (event) {
                event = event || window.event;
                fn.call(el, _eventCompat(event));
            });
        }
    }
    return function () { };
})(window);

// 主要是用touch代替scroll来监听
addEvent(document.body, 'touchstart', function (event) {
    startY = event.changedTouches[0].pageY;
}, false);
addEvent(document.body, 'touchmove', function (event) {
    currentY = event.changedTouches[0].pageY;
    Y = currentY - startY;
    if (Y > 10) {
        // 向上滚动执行
    } else if (Y < -10) {
        // 向下滚动执行
    }
}, false);
查看代码

相关文章:

  • 2022-01-05
  • 2021-07-02
  • 2021-09-29
  • 2021-09-30
  • 2022-12-23
  • 2021-06-04
  • 2021-06-04
  • 2022-12-23
猜你喜欢
  • 2021-11-13
  • 2022-12-23
  • 2021-07-12
  • 2021-11-13
  • 2021-08-19
  • 2021-11-28
  • 2021-08-14
相关资源
相似解决方案