2018-02-02

jquery中的链式编程

$(function () {
//需求：鼠标点击span，让他下面的div显示出来。让其他的div隐藏。
$(".parentWrap span").click(function () {
// $(this).next().show();
// //让其他的隐藏
// //点击的span的父亲li，的所有的兄弟元素li，的孩子元素div全部隐藏。
// $(this).parent("li").siblings("li").children("div").hide();
//链式编程
$(this).next().show().parent("li").siblings("li").find("div").hide();
});
})

$(window).ready(function () {
//需求：鼠标放入li中，其他的li半透明，当前盒子，opacity值为1；离开wrap的时候所有的li全部opacity值为1；
$(".wrap").find("li").mouseenter(function () {
//链式编程
$(this).css("opacity",1).siblings("li").css("opacity",0.4);
});//这段代码的意思是除了访问元素为透明，其他元素都是半透明（不透明opacity 最大值为1）

        //离开wrap的时候所有的li全部opacity值为1；
        $(".wrap").mouseleave(function () {
            $(this).children().children("li").css("opacity",1);

// $(".wrap li").css("opacity",1);
});
});

jquery中的隐式迭代
隐式 对应的是 显示，隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用

DOM对象转换成jQuery对象：
var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

jQuery对象转换成DOM对象：
// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

$(function () {
//需求：隔行变色：鼠标放进去还要变色
var jqli1=$("li:odd");
var jqli2=$("li:even");
jqli1.css("background","pink");
jqli2.css("background","yellow");

    //鼠标放进去变色  移开恢复
    //计数器
    var color="";
    $("li").mouseenter(function () {
        color=$(this).css("background");
        $(this).css("background","blue");
    });
    //移开恢复
    $("li").mouseleave(function () {
        $(this).css("background",color);
    });
});