jQuery入门

jQuery选择器

隐式迭代

遍历内部Dom元素(为数组形式存储)的过程叫做隐式迭代

$("div").css("属性值","样式");

筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为奇数的元素

筛选方法

语法	用法	描述
parent()	$(“li”).parent();	返回最近一级的父级元素
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”),最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”)	后代选择器
siblings(selector)	$(“ul”).siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后的所有同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”),index从0开始

实例：新浪下拉菜单

<script>
    $(function(){
        //鼠标经过
        $(".nav>li").mouseover(function(){
            //$(this) jQuery的当前元素
            // show() 显示元素
            $(this).children("ul").show();
        });

        //鼠标离开
        $(".nav>li").mouseout(function()){
            $(this).children("ul").hide();
        }
    })
</script>

jQuery的筛选思想

想要多选一的效果

<script>
    $(function(){
        //1.隐式迭代 给所有的按钮都绑定了点击事件
        $("button").click(function(){
            //2.当前的元素变化背景颜色
            $(this).css("background","pink");
            //3.其余的兄弟去掉背景颜色
            $(this).siblings("button").css("background","");
        });
    })
</script>

链式编程

链式编程节省了代码量，但要注意是给哪个对象执行操作

$(this).css("background","pink").siblings("button").css("background","");

jQuery样式操作

css

$("div").css({
    width:400,
    height:400,
    backgroundColor:"red"
})

• 添加类

$("div").addClass("current");

• 删除类

$("div").click(function(){
    $(this).removeClass("current");
})

• 切换类

$("div").click(function(){
    $(this).toggleClass("current");
})

案例：tab栏切换内容

<script>
    $(function(){
        //1. 点击上部的li,当前li 添加current类，其余兄弟移除类
        $(".tab_list li").click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            //2. 点击的同时，得到当前li的索引号
            var index=$(this).index;
            //3. 让下部里面相应索引号的item显示，其余的item隐藏
            $(".tab_con .item").eq(index).show.siblings().hide();
        })
    })
</script>

jQuery效果

显示隐藏切换

1.显示语法规范

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])

2.显示参数
①参数都可以省略，无动画直接显示
②speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值(如：1000)。
③easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
④fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

3.实例

$("div").hide(1000,function()){
    alert(1);
}

滑动效果事件切换

查阅文档上拉和下拉分别是slideDown(),slideUp()方法

hover()
$(".nav>li").hover(function(){
    $(this).children("ul").slideDown(200);
},function(){
    $(this).children("ul").slideUp(200);
});

//优化后为
$(".nav>li").hover(function()){
    $(this).children("ul").slideToggle();
}

动画停止stop

很好的解决了动画排队，相当于停止结束上一次的动画

$(".nav>li").hover(function()){
    //stop 方法必须写在动画前面
    $(this).children("ul").stop().slideToggle();
}

淡入淡出效果

<script>
    $(function(){
        $("button").eq(0).click(function(){
            //淡入 fadeIn()
            $("div").fadeIn(1000);
        })
        $("button").eq(1).click(function(){
            //淡出 fadeOut()
            $("div").fadeOut(1000);
        })
        $("button").eq(2).click(function(){
            //淡入淡出切换 fadeToggle()
            $("div").fadeToggle(1000);
        })
        $("button").eq(3).click(function(){
            //透明度,取值在0~1之间, 属性值分别为速度和透明度
            $("div").fadeTo(1000,0.5);
        })
    })
</script>

自定义动画

1.语法

animate(params,[speed],[easing],[fn])

2.实例

<script>
    $(function(){
        $("button").click(function(){
            $("div").animate({
                left:500
                opacity:0.4
            },500);
        });
    });
</script>

手风琴效果制作

<script>
    $(function(){
        $(".king li").mouseover(function(){
            //1. 当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
            $(this).stop().animate({
                width:224
            }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
            //2. 其余兄弟小li宽度变为69px，小图片淡入，大图片淡出
            $(this).stop().animate({
                width:69
            }).find(".big").stop().fadeout().sibling(".small")..stop()fadeIn();
        })
    })
</script>

jQuery属性操作

固有属性值prop()

所有元素固有属性就是元素本身自带的属性，比如 < a > 元素里面的href,< input >元素里面的type

element.prop("属性名)

设置属性语法

prop("属性","属性名")

自定义属性attr()

element.attr("属性")
element.attr("属性","属性名")

数据缓存

把数据当作一个变量来看

$("span").data("uname","andy");
console.log($("span").data("uname"));

如上输出uname的值为andy

购物车全选按钮实例

$(".checkall").change(function(){
    //1. 把全选(checkall)的状态赋值给小按钮(j-checkbox),同时全选按钮有两个，要保持同步
    $(".j-checkbox,.checkall").prop("checked",$(this).proc("check"));

    //小按钮(j-checkbox)<所有小按钮个数时，全选取消
    $(".j-checkbox").change(function(){
        if($("j-checkbox:checked").length == $("j-checkbox").length){
            $(".checkall").prop("checked",true);
        }
        else{
            $(".checkall").prop("checked",false);
        }
    })
})

jQuery内容文本值

只要是针对元素的内容还有表单的值操作

1.普通元素内容 html(),text(),val()

$("div").html() //获取元素内容
$("div").html("内容") //设置元素内容

$("div").text(); //获取元素文本内容
$("div").text("123") //设置元素文本内容

$("div").val(); //获取表单值
$("div").val("123") //设置表单值

实例：增减商品同时实现总价格变化

保留n位小数的方法：element.toFixed(n)

<script>
    $(function(){
        $(".increment").click(function(){
            var n=$(this).sibling(".itxt").val();
            n++;
            $(this).sibling(".itxt").val(n);

            //p为商品单价
            // var p=$(this).parent().parent().siblings(".p-price").html();
            //改进后为
            var p=$(this).parents(".p-num").siblings(".p-price").html();

            //p为去掉￥后的单价
            p=p.substr(1);
            //商品小计
            $(this).parents(".p-num").siblings(".p-price").html("￥"+(p*n).toFixed(2));
        })
        $(".decrement").click(function(){
            var n=$(this).sibling(".itxt").val();
            if(n==1){
                return false;
            }
            n--;
            $(this).sibling(".itxt").val(n);

            //p为商品单价
            var p=$(this).parent().parent().siblings(".p-price").html();
            //p为去掉￥后的单价
            p=p.substr(1);
            //商品小计
            $(this).parent().parent().siblings(".p-price").html("￥"+(p*n).toFixed(2));
        })

        //当用户直接修改表单里的值时，总价也要发生变化
        $(".itxt").change(function(){
            var n=$(this).val();
            var p=$(this).parents(".p-num").siblings(".p-price").html();
            p=p.substr(1);
            $(this).parents(".p-num").siblings(".p-price").html("￥"+(p*n).toFixed(2));
        })
    })
</script>

遍历元素

如果要对同一元素做不同操作，就要用到遍历操作

//第一个参数为索引号，可以自己指定索引号名称
//第二个参数时dom元素对象，
$("div").each(function(index,domEle){
    xxx;
})

实例：完成总数量和总价格的计算

<script>
    $(function(){
        var sum=0;
        var arr=["red","green","blue"];
        //each会遍历每一个元素
        $("div").each(function(i,domEle)){
            $(domEle).css("color",arr[i]);
            sum+=parseInt($(domEle).text());
        }
        //$.each()用于遍历元素，便于处理数据，数组
        $.each($("div"),function(i,ele){
            
        })
    })
</script>

创建添加删除元素

//创建元素
var li=$("<li>我是后来创建的li</li>");

//内部添加元素
element.append("内容")
$("ul").append(li);    //放到内容的最后面
$("ul").prepend(li); //放到内容的最前面
//

//外部添加
var div=$("<div>后面添加的<div>");
$(".test").after(div);
$(".test").before(div);

//删除元素
$("ul").remove();//删除匹配的孩子 自杀
$("ul").empty(); //删除自己的孩子 清空
$("ul").html(""); //与empty()等价，为清空

实例:删除商品模块

1.商品后面的删除按钮
2.删除选中的商品
3.清理购物车

<script>
    $(function(){
        //1.商品后面的删除按钮
        $(".p-action a").click(function(){
            $(this).parents(".cart-item").remove();
            getSum(); //getSum为更新总价和总量
        })
        //2.删除选中的商品
        $(".remove-batch").click(function(){
            $(".j-checkbox:checked").parents(".cart-item").remove();
            getSum(); //getSum为更新总价和总量
        })
        3.清理购物车
        $(".clear-all").click(function(){
            $(".cart-item").remove();
            getSum(); //getSum为更新总价和总量
        })

    })
</script>

jQuery尺寸，位置操作

jQuery尺寸

语法	用法
width(),height()	获取匹配元素宽度和高度值，只含width,height
innerWidth(),innerHeight()	获取匹配元素宽度和高度值，包含padding
outerWidth(),outerHeight()	获取匹配元素宽度和高度值，包含padding,border
outerWidth(true),outerHeight(true)	获取匹配元素宽度和高度值，包含padding,border,margin

jQuery位置

位置主要有三个：offset(),position(),scrollTop()/scrollLeft()

// offset()方法设置或返回被选元素相对于文档的偏移坐标，和父级没有关系
console.log($(".son").offset());
console.log($(".son").offset().top);  //获取具体的距离文档顶部的距离
//设置偏移距离
$(".son").offset({
    top:200,
    left:200
})

//position()方法用于返回被选元素相对于父级元素的偏移坐标,只能获取，不能设置
console.log($(".son").position());

//scrollTop()/scrollLeft()方法设置或返回被选元素被卷去的头部或左侧
//页面滚动事件
$(document).scrollTop(100);
var boxTop=$(".container").offset().top;
$(window).scroll(function(){
    console.log($(document).scrollTop());
    if($(document).scrollTop()>=boxTop){
        $(".back").fadeIn();
    }
    else{
        $(".back").fadeOut();
    }
})

//返回顶部
$(".back").click(function(){
    // $(document).scrollTop(0); 一定要是html和body元素做动画而不是文档
    $("body, html).stop().animate({
        scrollTop:0
    })
})

实例：电梯导航

$(function(){
    //当我们点击了li，此时不需要执行 页面滚动事件里的li的背景选择，
    //节流阀
    var flag=true;

    //1. 当我们滚动到***模块时，就让电梯导航显示出来  
    var toolTop=$(".recommed").offset().top;
    function toggleTool(){
        if($(document).scrollTop()>=?){
            $(".fixedtool").fadeIn();
        }
        else $(".fixedtool").fadeOut();
    }
    $(window).scroll(function(){
        toggleTool();
        //3. 页面滚动到模块时，相应的li模块也添加current类，兄弟姐妹移除
        if(flag){
            $(".floor .w").each(function(i,ele){
                //当被卷去的位置大于模块的offset值，说明到达了这个模块。
                if($(document).scrollTop()>=$(ele).offset().top){
                    $(".fiexedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
        
    })

    //2. 点击电梯导航页面(fixedtool)可以滚动到相应内容区域
    $(".fixedtool li").click(function(){
        flag=false;
        //当我们每次点击li,就需要计算出页面要去往的位置
        var current=$(".floor .w").eq($(this).index()).offset().top;
        //页面滚动效果
        $("body,html").stop().animate({
            scrollTop:current
        },function(){
            flag=true;
        });
        //点击之后，让当前的li,添加current类名,兄弟姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

jQuery事件

事件注册

1.语法

element.事件(function(){})

事件绑定on()

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
可以事件委派操作，把原来加在子元素身上的事件绑定在父元素身上
动态创建的元素，

语法

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
selector:元素的子元素选择器
fn:回调函数

$("div").on({
    mouseenter:function(){
        $(this).css("background","skyblue");
    }
    click:function(){
        $(this).css("background","purple");
    }
    mouseleave:function(){
        $(this).css("background","pink");
    }
})
//或者可以用以下方式：
$("div").on("mouseenter,mouseleave",function(){
    $(this).toggleClass("current");
})

//on可以实现事件委派，click是绑定在ul身上，但是触发的对象是ul里面的li
$("ul").on("click","li",function(){
    alert(11);
})

//on可以给动态给未来创建元素绑定事件
$("ol").on("click","li",function(){
    alert(11);
})

实例：微博发布

html:

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

实现：

<script>
    $(function(){
        //1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
        $(".btn").on("click",function(){
            var li=$("<li></li>");
            li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
            $(ul).prepend(li);
            li.slideDown();
            $(".txt").val("");
        })
        //2.点击删除按钮，可以删除当前的微博留言
        $("ul").on("click","a",function(){
            $(this).parent().slideUp(function(){
                $(this).remove();
            })
        })
    })
</script>

事件解绑off()

$("div").off(); //解除了div身上的所有事件
$("div").off("click");//解除了div身上的click事件
$("div").off("click","li");//解绑事件委托

//one()只触发事件一次，一次性的!!!
$("p").one("click",function(){
    alert(11);
})

自动触发事件

$(function(){
    $("div").on("click",function(){
        alert(11);
    });
    //自动触发事件 元素.事件
    $("div").click();

    // 元素.trigger("事件");
    $("div").trigger("click");

    //元素.triggerHandler("事件"),不会触发元素的默认行为
    $("div").triggerHandler("click");
})

其他方法

jQuery对象拷贝

如果想把某个对象拷贝给另一个对象使用，此时可以使用$.extend()方法

语法：

$.extend([deep],target,object1,[objectN])
//deep:如果设置为true,则为深拷贝，默认为false，为浅拷贝
//target:要拷贝的目标对象
//object1:待拷贝的对一个对象的对象

$(function(){
    var targetObj={};
    var obj={
        id=1,
        name:"andy"
    }
    $.extend(targetObj,obj);
    //会覆盖原来的数据
})

浅拷贝：是把被拷贝对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝：完全克隆，修改目标对象不会影响被拷贝对象

jQuery多库共存

①如果$符号冲突，我们就使用jQuery

②让jQuery释放对$控制权，让用户自己决定->varxx=$.noConflict();

jQuery插件

1.jQuery之家 http://www.htmleaf.com/
2.jQuery插件库 http://www.jq22.com/

插件使用步骤：
①引入相关文件.
②复制相关html，css,js

图片懒加载：当我们页面滑动到可视区域，再显示图片