jQuery学习小问题记录

1.关于attr对复选框二次全选失效

引起这个问题的原因,因为attr返回值为固有属性值,举个例子

<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见$("#chk1").attr("checked") == undefined$("#chk2").attr("checked") == "checked"$("#chk1").prop("checked") == false$("#chk2").prop("checked") == true

所以jQuery推荐对于只有true和false的属性值,如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

---

2.Jq实现滚动监听

主要是根据浏览器top高度和客户端可视高度的关系来实现监听,再设置相应的CSS即可实现想要的效果了

    $(window).scroll(function(){        //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8        var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;        //clientHeight是网页在浏览器中的可视高度，        var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;        //scrollTop是浏览器滚动条的top位置，        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;        var index = parseInt(scrollTop/clientHeight+1/3);        console.log(index);        $(".list-unstyled li").eq(index).addClass("liclass").siblings().removeClass("liclass");//给序号为1的加上红色背景    });

---

3.jquery填充json数据到指定id标签

obj是一个json对象,对于这个对象如果用JSON.stringify(row),转换的话,会出错,这个原因不太清楚
tar是父级对象,在这个对象下查找指定id标签

//往指定表单设置值function setValue(obj,tar) {    // 开始遍历    for (var p in obj) {        // 方法        if (typeof(obj[p]) == "function") {            // obj[p]();        } else {            tar.find("#" + p).val(obj[p]);            // p 为属性名称，obj[p]为对应属性的值        }    }}

4.导航条驻留效果

这个需求经常有,当访问到某个页面的时候,当前页面导航处高亮,使用jq动态的来修饰更加方便

//访问到哪个页面,当前页面导航条显示红色$(function(){    //当前链接以/分割后最后一个元素索引    var index = window.location.href.split("/").length-1;    //最后一个元素前四个字母,防止后面带参数    var href = window.location.href.split("/")[index].substr(0,4);    if(href.length>0){        //如果匹配开头成功则更改样式        $(".nav-menu li a[href^='/"+href+"']").addClass("current");        //[attribute^=value]：匹配给定的属性是以某些值开始的元素。    }else {        //默认主页高亮        $(".nav-menu li a[href^='/index']").addClass("current");    }});

---

5.一个简单的通知栏轮播效果

主要涉及替换元素,替换又不失去原来的,所以使用clone()这个函数.

function jump(){    $(function(){        $('.tips-bulls li').eq(0).slideUp(2000,function(){            $(this).clone().appendTo($(this).parent()).show();            $(this).remove();        });    });}setInterval('jump()',2000);

<div class="tips-bulls">            <ul class="list-unstyled">                <li>网站被CC攻击，重装系统，然后所有数据没了，文章重写</li>                <li>Island和Lazycat合并，以后统称为Island，售价依然88元，可谓加量不加价</li>                <li>第3个标签内容</li>                <li>第4个标签内容</li>            </ul>        </div>

6.保留两位小数

  //功能：将浮点数四舍五入，取小数点后2位  function toDecimal(x) {    var f = parseFloat(x);    if (isNaN(f)) {      return;    }    f = Math.round(x*100)/100;    return f;  }

7.把一个json串转换为json对象

  function ONDevice(data) {    var p = $.parseJSON(data);//转换为对象,然后就可以直接引用属性了    $("#switch").prop('src',"${path}/static/images/open.png");//图片设置为开启    $("#switch-title").text("已开启");    $("#vol").text((p.vol/10)+"V");    $("#ele").text(toDecimal(p.power/p.vol*10)+"A");    $("#power").text((p.power)+"W");    $("#ene").text((p.ene)+"kw/h");  }

8.获取站点根路径

function getRootPath_web() {            //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp            var curWwwPath = window.document.location.href;            //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp            var pathName = window.document.location.pathname;            var pos = curWwwPath.indexOf(pathName);            //获取主机地址，如： http://localhost:8083            var localhostPaht = curWwwPath.substring(0, pos);            //获取带"/"的项目名，如：/uimcardprj            var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);            return (localhostPaht + projectName);        }

---

9.键盘事件监听

键盘事件有3：

keydown，keypress，keyup，分别是按下，按着没上抬，上抬键盘 。

正确代码

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