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动态的来修饰更加方便
jQuery学习小问题记录_第1张图片

//访问到哪个页面,当前页面导航条显示红色
$(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>

这里写图片描述

你可能感兴趣的:(jquery)