jquery 操作select radio box 备忘

2013年3月31日 没有评论

select框操作

获取值
$('#select').val()

设置值为xx的项为选中
$('#select').val(xx)

设置文本信息为yy的项为选中
$('#select option[text="yy"]').attr("selected", true);

radio box 操作

获取值
$('input[name="xx"]:checked').val()

设置值为xx的为选中
$('input[name="xx"]:radio[value="yy"]').attr('checked', 'checked');

jquery 获取父节点

2013年3月31日 没有评论

在使用jquery时,很多时候都需要获取当前节点的父节点,包括直接父节点和祖先父节点。用的最多的方法是parent([expr])和parents([expr])。从方法的名字上就可以判断前一个方法是单数,也就是返回一个真正的父节点,后面是返回所有的祖先节点集合(不包含根节点)。假设需要获取当前节点的祖父节点(父节点的父节点),其有属性class=”pp”,那么获取的方法为:

$('#cur').parent().parent();
或
$('#cur').parent().parent('.pp');
或
$('#cur').parent('.pp');

上述操作在理想情况下,都没有问题。例如后来修改页面,在当前节点上又加了一个父节点,那么前两种获取的到的节点就不是当初节点;另外如果其祖先节点中还有属性class=”pp” 的节点,第三种获取的节点也不是自己想要的。

现在介绍另外一个获取父节点的方法closest([expr])。closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。否则返回一个空的jquery对象。

$('#cur').closest('.pp');

使用上述操作获取含义特定属性的祖父节点相对要安全一些,即使在当前节点和祖父节点中增加或者减少节点,只要增加的节点没有相同的属性,已有的js代码可能都不需要进行修改。

最后说一下closest和parents的主要区别是:

  1. 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找
  2. 前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤
  3. 前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素
分类: web前端 标签:

js做大小比较时警惕对象类型

2013年3月27日 没有评论

通过js获取页面两个数字输入框的值,并对其进行大小比较。此时出来的结果可能让你迷惑不解,例如代码:

    var v1 = $('#input1').val();
    var v2 = $('#input2').val();

    alert(v1 > v2);

假如input1中输入10,input2中输入2。10肯定是大于2的,所以上面的alert框应该弹出true,但实际上给出的是false。原因何在?对应数字10大于2是毫无疑问的,如果是作为字符串比较,那么结果刚好相反。而上述从页面获取值得到的类型是String。

如果明确是要进行数字比较,则需要显示的转化为数字,例如使用parseInt、parseFloat;还有一种方法是使用减法运算符,如:v1 – v2 > 0,此时js在运算前内部会进行类型转换。

另外由于加法运算符同时支持数字和字符串,使用这个时候也要小心。例如 a + b ,如果其中一个是字符串类型,一个是数字类型,在执行运算前会把另外一个转化为字符串类型,所以实际是进行字符串链接操作,而不是想要的算术运算。在确定是要做算术运算的情况下,对于未知类型的参数,保险的情况下还是使用parseInt进行类型转换。

分类: web前端 标签:

js 快速排序引出参数传递是传值还是传引用

2013年3月27日 没有评论

http://www.ruanyifeng.com/blog/2011/04/quicksort_in_javascript.html这篇文章中详细描述了快速排序的原理,同时也给出了javascript的实现,其具体代码如下:

function quickSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }

    var pivotIndex = Math.floor(arr.length / 2);
    var pivot = arr.splice(pivotIndex, 1)[0];
    var left = [];
    var right = [];

    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }

    return quickSort(left).concat([pivot], quickSort(right));
}

上述代码也是比较通俗易懂,自己生成一个随机数组测试,排序正确,所以功能上也没有问题。但上述代码还是有一个隐藏的小bug,当对同一个数组调用两次quickSort,发现第二次条用后出来的元素数量会比原始数据少一个。导致这个问题是根源是arr.splice(pivotIndex, 1)[0],它会把arr中指定位置的元素删掉。其操作是针对该方法的参数,但是同时影响到了传给方法的实际数组,所以结论是javascript中数组参数的是传引用(地址),而非传值

为了不影响原始数组数据,可以对上述代码进行一个小修改,修改后的代码如下:

function quickSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }

    var pivotIndex = Math.floor(arr.length / 2);
    var pivot = arr[pivotIndex];
    var left = [];
    var right = [];

    for (var i = 0; i < arr.length; i++) {
        if (i == pivotIndex) {
            continue;
        }

        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }

    return quickSort(left).concat([pivot], quickSort(right));
}

js定义多行字符串

2013年3月12日 1 条评论

当使用js来操作html,经常遇到需要处理多行字符串的问题,如果采用一行或多行拼接的方式都不好维护。像python、php中提供多行字符串的定义方式,真是方便不少。例如:

python
pstr = '''
line1
    line2
    line3
line4	  
'''

php 
$pstr = <<<eof
line1
    line2
    line3
line4
eof

上述定义完全保留字符串中的所有字符,包括回车换行已经引号等。

js本身没有提供类似的定义方式,但是可以通过多行注释(/* */),已经借助function的方式来达到多行字符的定义,例如代码:

var jstr = function() {
    var fun = function() {
    /*line1
        line2
        line3
    line4*/
    }
    var lines = new String(fun);
    
    return lines.substring(lines.indexOf("/*") + 3, 
                           lines.lastIndexOf("*/"));
}
分类: web前端 标签:

IE 6下cookie写入失败

2013年3月4日 1 条评论

一个简单的页面在加载的时候种植一个cookie,其他浏览器都能成功写入,测试IE 6时始终无法写入。由于是本地指定的一个测试三级子域,一度以为是域名长度问题,通过测试其他域名,排除了此问题。后来发现这个域名中使用了下划线,查了一下域名命名规范,规范规定域名只能是字母、数字和-(中划线)的组合,显然这不是一个规范的域名,IE 6自身机制拒绝种植cookie,所以导致失败。

想起曾经也碰到过IE 6通过js的方法无法在domain字符串少于5个字符的情况。也是源于IE 6自身的安全机制考虑的,可能在开发IE 6的时候还没有例如cn、uk、au之类的域名,其想当然的认为域名至少超过5个字符吧。

分类: web前端 标签:

防止点空链接页面回到顶部

2013年1月15日 没有评论

由于现在AJAX的流行,页面的上a标签的功能可能不仅仅是作为一个链接跳转,还可能是用作触发一个ajax请求,即用上a标签的onclick事件。a标签是通过属性href来指定链接地址的,如果用做ajax的button,可能会把href的属性值设置为#,例如:

<a href="#" onclick="doAjax()">Btn</a>

这样做其实是没有错的,但是当点击此链接后,页面会跑到顶端,特别的,当页面设置了 时候,会跳出另外一个页面,所以在用户体验上不是很好。

如何解决这样的问题呢?其实很简单,给href属性赋值一个javascript空函数即可,例如:

<a href="javascript:void(0)" onclick="doAjax()">Btn</a>
分类: web前端 标签:

提交表单时去掉无用的信息

2013年1月9日 没有评论

html中使用form来提交信息到服务器,方式可以是POST或GET。你通过firebug、httpfox等类似工具查看提交的信息,可能会注意到,你的提交按钮也作为信息的一部分给提交给服务器,这个信息我想绝大部分是不会使用到的。

那如何在提交表单的时候让浏览器不发送这个信息呢?其实非常简单,只需要把不想发送信息的input的name属性去掉就可以了。例如:

<input type="submit" value="登陆">

这样,你就不会看到提交的信息中有”登陆”了。

分类: web前端 标签:

js调试的一些经验

2012年12月12日 没有评论

调试js代码最直接最简单的方式是使用alert,对于一般的小问题用它就足以解决。但如果需要调试类似于鼠标事件,例如mousemove、mouseover等,可能就有点力不从心了,搞不好都无法关闭弹出的alert框,最后只能通过结束浏览器进程的方式退去。对于这类问题的调试可以采取在页面放一个div,然后通过innerHTML的方式把想跟踪的结果输入到div中,缺点是调试结束后需要清理这些辅助的div。最近看到一个网站会动态修改页面的title,方式当然是js,这给我一点灵感,其实调试的时候我们也可以把结果放到title上,这样也很直观,使用window.document.title = ‘result’即可。

另外一个不能忽视的问题是异常,当异常发生在你插入调试代码以前,你调试的结果永远不会出现,这个时候就需要用上try catch了。

firefox下的firebug提供了一个对js脚本调试的功能,可以自由的设置断点,单步执行等,功能非常强大。可以说是调试、学习别人js的终极武器了。

分类: web前端 标签:

百分百纯js实现回到顶部按钮

2012年12月10日 2 条评论

目前很多网站的页面上在右下角都提供了一个“回到顶部”的按钮。今天无事决定自己写一个,代码其实很简单,经过几次修改后,效果还算满意。重要的是全部使用js来实现,不需要在html、css中增加任何内容,甚至都不需要图片,只要引用js即可。而且全面兼容IE6。由于考虑兼容性问题,如何获取滚动条的高度和按钮停留在右下角是难点。这两个问题可以参考:js如何获取滚动条的高度,兼容各个浏览器的右下角提示框代码

代码如下:

(function() {
    var btnId = '__gotop';
    var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;

    function $() {
        return document.getElementById(arguments[0]);
    }

    function getScrollTop() {
        return ('pageYOffset' in window) ? window.pageYOffset
            : document.compatMode === "BackCompat"
            && document.body.scrollTop
            || document.documentElement.scrollTop ;
    }    

    function bindEvent(event, func) {
        if (window.addEventListener) {
            window.addEventListener(event, func, false);
        } else if (window.attachEvent) {
            window.attachEvent('on' + event, func);
        }
    }

    bindEvent('load',
        function() {
            var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';

            if (isIE && isIE < 7) {
                css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';
                var style = document.createStyleSheet();
                style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
            }

            var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';
            var el = document.createElement('DIV');
            el.id = btnId;
            el.style.cssText = css;
            el.innerHTML = html;
            document.body.appendChild(el);

            el.onclick = function() {
                (function() {
                    var top = getScrollTop();
                    if (top > 0) {
                        window.scrollTo(0, top / 1.2)
                        setTimeout(arguments.callee, 10);
                    }
                })();
            };

            el.onmouseover = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #ddd';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
            };

            el.onmouseout = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #fff';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
            };
        }
    );

    bindEvent('scroll',
        function() {
            var top = getScrollTop(), display = 'none';

            if (top > 0) {
                display = 'block';
            }

            if ($(btnId)) $(btnId).style.display = display;
        });
})();

效果见本blog。

无觅相关文章插件,快速提升流量