js 系列(6) jquery (1)

Posted on Posted in js

jQuery

基本操作

//jQuery选择元素,简化
$("div").css("background","red");
$(".box").css("width","200px");

$(".box").click(function(){
    $(this).css("background-color","yellowgreen");
})


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <style>
            .box {
                    width:100px
                    height:100px;
                    background:pink;
                    position:absolute;
                    top:0;
                    left:0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            hello world!
        </div>
        <script>
            $("div").css("background","red");
            $(".box").css("width","200px");
            $(".box").click(function(){
                    //$(this).css("background-color","yellowgreen");
                    $(this).animate({
                            "left":1000
                    },2000)
            })
        </script>   
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <style>
            p{
                width:50px;
                height:50px;
                background-color: #0C5404;
            }
        </style>
    </head>
    <body>
        <p></p>
        <p></p>
        <p></p>
        <p class="op"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    <script>
        // 选择的元素不是一个,是一组
        $("p").css("background","red");
        $("p").html("hello");
        // 元素的个数
        console.log($("p").length);
        console.log($("p").size());
        // 获取第一个元素
        console.log($("p")[0]);
        // 返回元素的下标
        console.log($(".op").index())
    </script>
    </body>
</html>

选择器

  • $("p");
  • $(".box")
  • $("#demo")
  • $("div.box")
  • $("div ul li p span.btn")
  • $("p,ul,div")
  • $("*")

筛选选择器

  • $("p").css("background","red");
  • $("p:first").css("background","red"); 第一个元素
  • $("p:last").css("background","red"); 最后一个元素
  • $("p:eq(2)").css("background","red"); 第二下标的元素
  • $("p:gt(2)").css("background","red"); 大于第二下标的元素
  • $("p:lt(2)").css("background","red"); 小于第二下标的元素
  • $("p:odd").css("background","red"); 下标为奇数
  • $("p:even").css("background","red"); 下标为偶数
$("p:even").css("background","yellowgreen"); 隔行变色

jQuery 常用方法

  1. html()

相当于我们原生js里面的innerHTML方法。给元素内部添加内容,参数必须是字符串。

$("div").html("hello world");
$("div").html("<p><a href=\"#\"></a></p>");

读取内容:只能读取第一个元素内的内容。

console.log($("div").html());
  1. addClass()和removeClass()

增加类名/移除类名

$(".ad").click(function(){                                                                                                                                                                                         
    $(".box").addClass("demo");                                                                                                                                                                                    
});                                                                                                                                                                                                                
$(".re").click(function(){                                                                                                                                                                                         
    $(".box").removeClass("demo");                                                                                                                                                                                 
});
  1. attr()

调用或更改html元素的属性和属性值。

//获取某一个属性值                                                                                                                                                                                                 
// console.log($(".ad").attr("type"));                                                                                                                                                                             
//添加属性,传两个参数,第一个属性名,第二个属性值                                                                                                                                                                 
// $(".box").attr("id","demo");

修改属性值

$("input").click(function(){                                                                                                                                                                                       
    $("img").attr("src","images/cat2.jpg");                                                                                                                                                                        
});
  1. 常用的事件

jQuery的事件不需要写on。

  • 单击事件:click();
$("input").click(function(){
    $("img").attr("src","images/cat2.jpg");
});
  • 鼠标移上:mouseenter鼠标进入
//鼠标移上元素添加类名
$(".box").mouseenter(function(){
    $(".box").addClass('demo');
});`
  • 鼠标移出:mouseleave鼠标离开方法
//鼠标移出元素移除类名
$(".box").mouseleave(function(){
    $(".box").removeClass('demo');
});
  • 还有一种on的写法:本身也是一个方法,有两个参数,第一个参数是事件类型,第二个参数是事件函数。
//on方法添加事件
$("input").on("click",function(){
    $("img").attr("src","images/cat2.jpg");
});
  1. css()

调用和更改css 样式。
css()方法可以传递两个参数:如果只传一个参数,调用属性计算后的样式,如果传递两个参数,就是修改这个样式。

语法:jQuery.css(属性名,属性值);

传递一个参数,表示调用属性值:
得到的值是一个字符串形式的数据,不能直接参与运算。

console.log($(".box").css("width"));

传递两个参数,表示赋值:

$("img").css("width","200px");

属性名既可以写驼峰也可以写css写法:

//既可以写驼峰也可以写css写法
// $("div").css("background-color","yellowgreen");
$("div").css("backgroundColor","skyblue");

属性值很灵活,可以直接写数字不带单位,还可以写带单位或不带单位的字符串。

$("div").css("width",200);
$("div").css("height","200px");
$("div").css("border-width","5");

数值甚至可以写成加等的形式:

$("div").click(function(){
    $("div").css("width","+=20px");
});

如果我们设置多个属性,将多个属性写在JSON对象。

//同时设置多个属性
    $("div").css({
    "width" : 200,
    "height" : 200,
    "border-width" : 5
});
  1. hide()和show()

就是隐藏和显示某一个元素。

$(".hide").click(function(){
    $("img").hide();   隐藏
})
$(".show").click(function(){
    $("img").show();   显示
})

可以传递一个时间参数,控制隐藏和显示的中间时间。

$(".hide").click(function(){
    $("img").hide(1000);
})
$(".show").click(function(){
    $("img").show(1000);
})

隐藏:伴随着透明度从设置透明度到0的变化,还有宽高从设置值到0的动画。

方法可以在显示和隐藏之间进行切换:toggle();

$(".toggle").click(function(){
    $("img").toggle(1000);
});
  1. slideDown和slideUp
    slideDown():滑动显示(方向不一定);
    slideUp():滑动隐藏;

本身就有运动过程。默认运动时间400毫秒。

$(".up").click(function(){
    $("img").slideUp(1000);
});
$(".down").click(function(){
    $("img").slideDown(1000);
});
$(".down").click(function(){
    $("img").slideToggle(1000);
});

隐藏的前提:必须是display:block;
显示的前提:必须是display:none;
中间有自己定义的动画:内部的结构,说明我们以什么方式隐藏和显示。

切换:slideToggle()。

  1. fadeIn和fadeOut

表示淡入和淡出:透明度发生的变化。
fadeIn:透明度变大,显示元素,淡入。
fadeOut:透明度变到0,隐藏元素,淡出。

默认运动时间是400毫秒,可以自定义时间。

$(".out").click(function(){
    $("img").fadeOut(1000);
});
$(".in").click(function(){
    $("img").fadeIn(1000);
});
$(".toggle").click(function(){
    $("img").fadeToggle(1000);
});

淡入淡出到某一个透明度:fadeTo()。有两个参数,第一个叫做速度参数。第二个透明度的终点。

$(".to").click(function(){
    $("img").fadeTo("slow",0.5);
});
$(".out").click(function(){
    $("img:first").fadeOut(3000);
    $("img:last").fadeIn(3000);
});

节点关系

jQuery控制元素时,都是批量控制。

添加事件,元素本身运动、或者其他元素运动,都想跟事件元素找一些关系。

jQuery帮我们简化了这个找关系的过程,封装了一系列的方法可以帮我们找到父亲、儿子、兄弟、祖先、孙子等元素。

  1. $(this)自己

事件内部有一个$(this)的对象,指向的就是触发事件的这个元素本身。
就是原生js里的事件函数内的那个this,用$()将this转成jQuery对象,就能调用jQuery的方法。this不要加引号。

// 谁触发事件谁动
$("p").click(function(){
    $(this).animate({"left":1000},1000);
});
  1. parent()父亲
    寻找元素父级的方法:必须加小括号,找到的也是亲生的父亲。爷爷和叔叔都不能。
    案例:点击一个元素,让他的父亲背景变色。
$("p").click(function(){
    $(this).parent().css("background","lightblue");
});

说明:方法返回的是某一个元素的父亲的jQuery对象,继续打点调用jQuery方法。

  1. children()儿子

寻找子级元素的方法:必须加小括号,选中的是元素的所有儿子级元素。孙子级的元素选不中。

案例:点击一个元素,让他的子级全部消失。

//让点击元素的子级全部消失
$("div").click(function(){
    $(this).children().hide(300);
});

方法可以传递参数:还是一个选择器,指的是我要选择儿子级里面还要满足选择器要求的那些元素。

//要选择儿子级元素中符合选择器要求的部分
$("div").click(function(){
    $(this).children(".cur").hide(300);
});
  1. siblings()兄弟

寻找的是同级的兄弟元素:方法必须加小括号,找到的是亲兄弟元素。

案例:点击一个元素,让他的兄弟都变色,自身不变色。

$("div").children().click(function(){
    $(this).siblings().css("background","red");
});

可以通过参数进行选择器筛选。

//筛选h2的兄弟元素
$("div").children().click(function(){
    $(this).siblings("h2").css("background","red");
});

指的是选中的是兄弟元素中的h2标签。

  1. 连续打点调用
    案例:点击一个元素,让他自己变红,让他的兄弟编绿,父亲变蓝,父亲的兄弟变紫色,兄弟的儿子变金色。
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 100px;
            padding-top: 10px;
            margin-bottom: 10px;
            border: 1px solid #000;
            overflow: hidden;
        }
        div p{
            float: left;
            width: 80px;
            height: 80px;
            background: #aaa;
            margin-right: 20px;
        }
        div h2{
            float: left;
            width: 80px;
            height: 80px;
            background: pink;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p></p>
        <p></p>
        <p class="cur"></p>
        <p></p>
        <h2 class="cur"></h2>
        <h2></h2>
        <h2 class="cur"></h2>
    </div>
    <div class="box2">
        <p></p>
        <p></p>
        <p></p>
        <p class="cur"></p>
        <h2></h2>
        <h2 class="cur"></h2>
        <h2></h2>
    </div>
    <div class="box3">
        <p></p>
        <p></p>
        <p class="cur"></p>
        <p></p>
        <h2></h2>
        <h2></h2>
        <h2></h2>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script>        
        $("div").children().click(function(){
            $(this).css("background","red")     //自己
            .siblings().css("background","green")   //自己的兄弟
            .parent().css("background","blue")    //自己和兄弟的父亲
            .siblings().css("background","purple")  //父亲的兄弟
            .children().css("background","gold");  //父亲兄弟的儿子
        });
        $("p").html("哈哈").css("background","skyblue");
    </script>
</body>
</html>

原理:一个jQuery对象打点调用完自己的任何方法,都会return一个对象,就是jQuery对象本身。

$("p").html("哈哈").css("background","skyblue");

案例:tab栏

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            color: #252525;
            text-decoration: none;
        }
        .box{
            width: 310px;
            border-top: 2px solid #206f96;
            margin: 100px auto;
            overflow: hidden;
        }
        .box .top{
            border-left: 1px solid #cfcfcf;
            overflow: hidden;
        }
        .box .top span{
            float: left;
            width: 102px;
            height: 29px;
            background: #f4f4f4;
            border-right: 1px solid #cfcfcf;
            border-left: 1px solid #cfcfcf;
            border-bottom: 1px solid #cfcfcf;
            margin-left: -1px;
            font-size: 14px;
            color: #252525;
            line-height: 29px;
            text-align: center;

        }
        .box .top span.current{
            background: none;
            border-bottom: none;
            font-weight: bold;
        }
        .box .top span a:hover{
            text-decoration: underline;
        }
        .box .bottom{
            padding: 17px 0 17px 9px;
            overflow: hidden;
        }
        .box .bottom ul{
            list-style: none;
            display: none;
        }
        .box .bottom ul.current{
            display: block;
        }
        .box .bottom ul li{
            height: 27px;
            font-size: 14px;
            color: #252525;
            line-height: 27px;
        }
        .box .bottom ul li.first{
            font-weight: bold;
        }
        .box .bottom ul li a:hover{
            color: #f00;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <span class="current"><a href="#">新闻</a></span>
            <span><a href="#">图片</a></span>
            <span><a href="#">军事</a> <a href="#">航空</a></span>
        </div>
        <div class="bottom">
            <ul class="current">
                <li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
                <li><a href="#">习近平在捷克发文</a> <a href="#">热议 出访专题 这三年</a></li>
                <li><a href="#">李克强:亚洲国家较含蓄</a> <a href="#">更需开放交流 在博鳌</a></li>
                <li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
                <li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
            </ul>
            <ul>
                <li class="first">离京访问捷克并出席核安全峰会</li>
                <li>习近平在捷克发文 热议 出访专题 这三年</li>
                <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
                <li>张德江会客 江泽民为《世界名曲45首》作序</li>
                <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
            </ul>
            <ul>
                <li class="first">捷克并出席核安全峰会</li>
                <li>习近平在捷克发文 热议 出访专题 这三年</li>
                <li>李克强:亚洲国家较含蓄 更需开放交流 在博鳌</li>
                <li>张德江会客 江泽民为《世界名曲45首》作序</li>
                <li>酒店枕头下现近万现金 房客怒投诉:没换枕套</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script>        
        $(".top span").mouseenter(function(){
            var idx = $(this).index();
            $(this).addClass("current")
                .siblings().removeClass("current")
                .parent().siblings().children().eq(idx).addClass("current")
                .siblings().removeClass("current");
        });
    </script>
</body>
</html>
  1. 其他节点关系

find():找的是元素的后代的一些元素,根据参数的选择器去选择。

$("div").find("span").css("background","#00f")

next():选中的是当前元素的下一个元素,必须是同级的。

$("div").children().click(function(){
    $(this).next().css("background","#f00");
})

nextAll():选中的是当前元素后面的所有兄弟元素。内部可以传参数,选择符合选择器的后面的兄弟。

$("div").children().click(function(){
    $(this).nextAll().css("background","#f00");
})

prev():选中的是当前元素的上一个元素,必须是同级的。

$("div").children().click(function(){
    $(this).prev().css("background","#f00");
})

prevAll():选中的是当前元素前面的所有兄弟元素。内部可以传参数,选择符合选择器的后面的兄弟

$("div").children().click(function(){
    $(this).prevAll().css("background","#f00");
})

parents():选择的是包含html标签在内的所有祖先元素。内部可以传参数,选择符合选择器的祖先元素。

$("p").parents("div").css("background","pink")
» 转载请注明来源:若我若鱼 » js 系列(6) jquery (1)

Leave a Reply

Your email address will not be published. Required fields are marked *

four × one =