jQuery(2)

jQuery(2)

突出显示图片 .find() 查找元素

在这里插入图片描述
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //鼠标进入的时候,当前的li的透明度为1,其他的li标签透明度,0.5
            $(".wrap>ul>li").mouseover(function () {
                //当前的li的兄弟元素的透明度变暗
                    $(this).siblings("li").css("opacity",0.5);
                $(this).css("opacity",1);
            });
            $(".wrap").mouseout(function () {
                //.find()方法,针对当前的元素找里面的一些其他的元素
                $(this).find("li").css("opacity",1);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>

jQuery操作样式

 <script>
        //页面加载
        $(function () {
            $("#btn").click(function () {
                //第一种设置元素样式的代码方式:
//                $("ul>li").css("backgroundColor","yellow");
//                $("ul>li").css("fontSize","50px");
//                $("ul>li").css("fontFamily","全新硬笔行书简");
//                $("ul>li").css("color","blue");
                //第二种设置元素样式的代码方式:链式编程
                //$("ul>li").css("backgroundColor","yellow").css("fontSize","50px").css("fontFamily","全新硬笔行书简").css("color","blue");
                //第三种设置元素样式的代码方式:键值对
                //$("ul>li").css({"backgroundColor":"yellow","fontSize":"50px","fontFamily":"全新硬笔行书简","color":"blue"});
            });
        });
    </script>

jQuery操作类样式

 <script>
      /*
      *
      * .css()
      * .css("属性","属性值");
      * .css("属性","属性值").css("属性","属性值");
      * .css({"属性":"属性值","属性":"属性值"});
      * addClass()
      * addClass("类样式名字");添加一个类样式
      * addClass("类样式名字1 类样式名字2");
      * removeClass()
      * removeClass("类样式名字");移除类样式
      * removeClass();移除的是当前元素中所有的类样式
      * hasClass();判断当前元素是否应用了某个类样式
      * toggleClass();切换元素的类样式的
      *
      *
      *
      * */


    </script>

tab栏切换案例

在这里插入图片描述
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取ul中的所有的li,调用鼠标进入的事件
            $(".tab>li").mouseover(function () {
                //移除当前的li的所有兄弟元素li的类样式
                $(this).siblings("li").removeClass("active");
                //让当前li添加类样式
                $(this).addClass("active");

                //获取当前的li的索引
                var index=$(this).index();
                //获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式
                $(".products>div:eq("+index+")").siblings("div").removeClass("selected");
                //当前对应的div添加类样式
                $(".products>div:eq("+index+")").addClass("selected");
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>

css 和类样式对比

设置的样式如果很多,那么直接使用类样式的方式进行操作
为了方便维护也最好使用类样式进行操作,简单的操作直接使用css的方式

链式编程

多行代码合并成一行代码,前提要认清此行代码返回的是不是对象,是对象才能进行链式编程

 <script>
        //页面中有一个按钮,还有一个div,点击按钮的时候,让div中添加一个p标签,并显示内容,点击按钮的同时修改div的背景颜色
        //链式编程:对象.方法().方法().方法();....
        $(function () {
            //获取按钮调用点击事件,获取div设置p标签内容,点击按钮设置背景颜色
            $("#btn").click(function () {
//                $("#dv").html("<p>这是一个p</p>");
//                $("#dv").css("backgroundColor","red");
                //$("#dv").html("<p>这是一个p</p>").css("backgroundColor","red");
                //var obj=$("#dv").html("<p>这是一个p</p>");
                //var obj=$("#dv").css("backgroundColor","red").html("<p>这是一个p</p>");
                //断链
//                var obj=$("#dv").html().css("backgroundColor","red");
//                console.log(obj);
            });
        });

    </script>

获取兄弟元素的几个方法

  • next()当前元素之后的紧邻着的第一个兄弟元素(下一个)
  • nextAll() 当前元素之后的所有兄弟元素
  • prev() 当前元素之前的紧邻着的兄弟元素(上一个)
  • prevAll() 当前元素之前的所有兄弟元素
  • siblings() 当前元素的所有兄弟元素
 <script>
        $(function () {
            //获取ul中所有的li,为每个li注册鼠标进入的事件,当前元素获取到,对当前元素的兄弟元素进行操作
            $("#uu>li").mouseenter(function () {
                //.next();获取的是当前元素的下一个兄弟元素
                //$(this).next().css("backgroundColor","green");
                //.nextAll();获取的是当前元素的后面的所有的兄弟元素
                //$(this).nextAll().css("backgroundColor","green");
                //.prev();获取的是当前元素的前一个兄弟元素
                //$(this).prev().css("backgroundColor","green");
                //.prevAll();获取的是当前元素的前面的所有的兄弟元素
                //$(this).prevAll().css("backgroundColor","green");
                //.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
                $(this).siblings().css("backgroundColor","green");
            });
        });
    </script>
 <script>
        //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
        $(function () {
            //获取ul->li
            $("ul>li").mouseenter(function () {
                $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
            }).mouseleave(function () {
                $(this).css("backgroundColor","").siblings().css("backgroundColor","");
            }).click(function () {
                //当前元素前面的所有兄弟元素背景颜色为黄色
                //$(this).prevAll().css("backgroundColor","yellow");
                //当前元素后面的所有兄弟元素背景颜色为蓝色
                //$(this).nextAll().css("backgroundColor","blue");

                //链式编程代码
                //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
                //解决断链--->恢复到断链之前的一个效果--修复断链
                //.end()方法恢复到断链之前的效果
                $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
            });
        });
    </script>
    

jQuery动画

  • hide()方法
  • show()方法
  • 参数:可以是一个number类型,也可以是字符串类型
 <script>
        $(function () {
            //点击按钮 隐藏div
            $("#btnHide").click(function () {
                //$("#dv").hide();//隐藏
                //hide方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                $("#dv").hide(1000);
                //$("#dv").hide("normal");
            });
            $("#btnShow").click(function () {
                //$("#dv").show();//显示
                //show方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                //$("#dv").show(1000);
                $("#dv").show("fast");
            });
        });

其他动画

$("div").slideUp(1000);// 滑入
$("div").slideDown(1000);// 滑出
$("div").slideToggle(1000);// 切换滑入滑出
$("div").fadeIn(1000);// 淡入
$("div").fadeOut(1000);// 淡出
$("div").fadeToggle(1000);// 切换淡入淡出
// 可以设置透明度,参数 1: 时间 , 参数 2: 到达透明度
$( “div ”).fadeTo(1000,0.3);// 一个参数,常用
// 参数 1: 没有时间 , 参数 2: 到达透明度
// 和 css("opacity",0.1);
$("div").fadeTo(0,0.1);// 一个参数

animate动画方法

$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
$("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
});

第一个参数:键值对(数值的属性可以改,颜色不能改)
第二个参数:动画的时间
第三个参数:回调函数
停止动画效果:stop()方法

<script>
        $(function () {
            $("#btn").click(function () {
                //获取div,产生动画效果
                //animate方法;
                /*
                * 参数:
                * 1.是键值对---对象
                * 2.时间---1000毫秒---1秒
                * 3.匿名函数---回调函数
                *
                * */
                $("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
                    $("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
                });
            });
        });
    </script>

jQuery中创建元素及追加元素

DOM中可以动态创建元素:document.createElement(“标签的名字”)
jQuery中同样可以之间元素标签,并且返回的就是jQuery对象,可以直接调用方法进行使用
append方法用来在元素的末尾追加元素(最后一个子节点),增加元素末尾(儿子)
prepend方法在元素的开始添加元素(第一个子节点),增加元素开始(儿子)
after,在元素之后添加元素(添加兄弟),添加元素后面(兄弟)
before,在元素之前添加元素(添加兄弟)增加元素前面(兄弟)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script>

        /*
        *
        * DOM中创建元素:
        * 1.document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉
        * 2.innerHTML
        * 3.document.createElement("标签的名字")
        *
        * jQuery中创建元素的方式:
        * 1.$("标签的代码")
        * 2.对象.html("标签的代码");
        *
        * */
    </script>
    <script src="jquery-1.12.2.js"></script>
    <script>

        //需求:点击按钮,在div中创建一个超链接
        $(function () {
            var i=0;
            $("#btn").click(function () {
                i++;
                //创建元素
                var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
                //把元素添加到div中
               // $("#dv").append(aObj);//把超链接追加到div中

                //把元素插入到某个元素的前面
                //$("#dv").prepend(aObj);
                //把元素添加到当前元素的后面(兄弟元素来添加)
                //$("#dv").after(aObj);
                //把元素添加到当前元素的前面(兄弟元素来添加)
                //$("#dv").before(aObj);

            });
        });
    </script>
</head>
<body>
<input type="button" value="创建元素" id="btn"/>
<div id="dv"></div>
</body>
</html>

动态创建方法

.text(),.html()方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
.html(“”) 清空层中内容 .empty() 清空层中内容 .remove() 清空标签

自定义属性

attr()方法:可以设置属性值,两个参数:1.属性名字,2.属性值
attr()方法:可以获取属性值,一个参数:1.属性名字

 <script>
        $(function () {
            //点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
            $("#btn").click(function () {
                //获取div,创建超链接
                var aObj=$("<a></a>");
                //attr();可以写两个参数:1参数;属性,2属性值
                //attr();只写了一个参数,获取该元素的这个属性的值
                aObj.attr("title","传智播客好帅");
                aObj.attr("href","http://www.itcast.cn");
                aObj.text("传智播客");
                $("#dv").append(aObj);
                console.log(aObj.attr("href"));

            });
        });
    </script>

全选和反选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中和不全选
            //让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
            $("#j_cbAll").click(function () {
                var cked=$(this).prop("checked");//保存当前复选框的选中状态
                //获取tbody中所有的复选框
                $("#j_tb").find(":checkbox").prop("checked",cked);
            });

            //获取tbody中所有的复选框
            $("#j_tb").find(":checkbox").click(function () {
               //先获取tbody中所有的复选框的个数
                var length1=$("#j_tb").find(":checkbox").length;
                //再获取tbody中所有选中的复选框的个数
                var length2=$("#j_tb").find(":checked").length;
                //二者比较,如果相同,让最上面的复选框选中,否则不选中
                if(length1==length2){
                    //都选中了
                    $("#j_cbAll").prop("checked",true);
                }else{
                    //有没选中
                    $("#j_cbAll").prop("checked",false);
                }
            });
        });
    </script>
</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>课程名称</th>
            <th>所属学院</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>JavaScript</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>css</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>html</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>jQuery</td>
            <td>前端与移动开发学院</td>
        </tr>
        <!--<tr>
            <td><input type="checkbox"/></td>
            <td>HTML5</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>CSS3</td>
            <td>前端与移动开发学院</td>
        </tr>-->
        </tbody>
    </table>
</div>
</body>

</html>

attr()方法和prop()方法的区别

attr()方法理解为特性,prop理解为属性
如checked,selected或者disabled使用prop(),其他使用attr()
href为a标签的属性,应该使用prop来设置。
onclick不是button的属性,应该使用attr来设置。

这篇文章有 39 个评论

  1. türkçe izle

    If you wish for to improve your knowledge simply keep visiting this website and be updated with the most recent news posted here. Sisile Traver Daffi

  2. recep ivedik izle

    Appreciation to my father who told me concerning this weblog, this blog is genuinely remarkable. Sonni Andrey Lemal

  3. suzie ilaria

    I will recommend your beautiful post site to my friends

  4. jamika synan

    I will recommend your beautiful post site to my friends

  5. movie online

    I really enjoy the blog. Much thanks again. Really Great. Laurice Bearnard Landes Chrissie Matt Sweet

  6. 123movies

    This information is invaluable. Where can I find out more? Zaneta Adair Yasmine

  7. 123movies

    Great post. I am experiencing a few of these issues as well.. Sharona Ernie Kenrick

  8. watch

    Thanks designed for sharing such a pleasant thinking, post is nice, thats why i have read it fully Berni Worthington Giuditta

  9. filmkovasi

    This paragraph provides clear idea designed for the new visitors of blogging, that in fact how to do blogging. Gabriellia Vincent Gaile

  10. hindi movie

    Can I simply say that of a relief to seek out a person that in fact knows what theyre talking about on the web. You actually know how to bring an issue to light to make it important. Lots more people must check out this and see why side of the story. I cant think youre less popular simply because you certainly develop the gift. Jodie Booth Aspa

  11. movie download

    By way of an update: The film will be broadcast in the UK on September the 6th at 9pm on BBC 2 as the opening episode of the new series of Natural World. Put it in your diary! Lydia Zed Mariand

  12. yabanci

    Great blog here! Also your site lots up very fast! Lurline Hugh Yam

  13. hindi movie

    These are genuinely impressive ideas in concerning blogging. You have touched some nice factors here. Any way keep up wrinting.| Adria Yehudit Elnore

  14. bluray

    Howdy! I just wish to offer you a huge thumbs up for the excellent information you have got here on this post. I will be coming back to your blog for more soon. Valida Valdemar Zimmermann

  15. 720p

    You should take part in a contest for one of the very best blogs on the web. I will suggest this website! Jordan Max Udale

  16. dizi

    I love reading through a post that will make people think. Also, thank you for permitting me to comment! Astrid Amby Cassey

  17. 720p

    Thank you very much for Good and nice Article always I m sharing your Articles with my friend and our WhatsApp Group. Meridel Cirilo Krilov

  18. turkce

    Asking question aare genuinely good thing if you are not understanding anything entirely, but this post provides nice unerstanding yet. Joann Cristiano Merriman

  19. cbd gummies for anxiety

    What’s up to all, the contents existing at this site are really
    remarkable for people knowledge, well, keep up the good work fellows.

  20. CBD gummies for sale

    Thank you for the good writeup. It in fact was a amusement account
    it. Look advanced to more added agreeable from you! However, how could we communicate?

  21. CBD products

    Heya this is kinda of off topic but I was wondering if blogs
    use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding knowledge
    so I wanted to get guidance from someone with experience.

    Any help would be greatly appreciated!

  22. cbd gummies for pain

    Can I simply just say what a comfort to discover a person that actually understands what they are discussing online.

    You actually realize how to bring an issue to light and make it important.

    More and more people have to read this and understand this side of your story.
    I was surprised that you are not more popular since you certainly possess
    the gift.

  23. cbd oil for dogs

    Hi colleagues, how is the whole thing, and what you want to
    say concerning this article, in my view its genuinely remarkable in favor of me.

  24. anxiety

    Definitely imagine that that you stated. Your favourite reason appeared to be at the web the
    easiest factor to remember of. I say to you, I definitely get annoyed even as
    folks consider worries that they plainly do not realize about.
    You managed to hit the nail upon the top and outlined out the whole thing with no need side-effects , other folks could
    take a signal. Will probably be back to get more. Thank you

  25. buy instagram followers

    Why people still use to read news papers when in this technological world all is
    available on net?

  26. buy instagram followers

    It’s amazing to pay a visit this web site and reading the views of all mates concerning this paragraph, while I am also
    zealous of getting knowledge.

  27. ucuz takipçi satın al

    It’s very straightforward to find out any matter on net as compared
    to textbooks, as I found this paragraph at this site.

  28. stornobrzinol

    whoah this blog is wonderful i love reading your articles. Keep up the good work! You know, a lot of people are looking around for this information, you can aid them greatly.

  29. 카지노사이트

    My brother recommended I might like this blog.
    He was totally right. This post actually made my day.
    You cann’t imagine simply how much time I had spent for this information! Thanks!

  30. delta 8 carts not working

    I’m curious to find out what blog platform you are working with?
    I’m having some minor security problems with my latest blog and I would
    like to find something more safeguarded. Do you
    have any solutions?

  31. Please let me know if you’re looking for a writer for your site.
    You have some really great articles and I feel I would be a good asset.
    If you ever want to take some of the load off, I’d really like
    to write some content for your blog in exchange for a link back to mine.

    Please send me an e-mail if interested. Thank
    you!

  32. delta 8 gummies super chill

    It’s in point of fact a nice and helpful piece of information. I am happy that you shared this helpful info
    with us. Please stay us up to date like this. Thank you for sharing.

  33. delta 8 gummies dallas

    I seriously love your website.. Great colors & theme. Did
    you create this amazing site yourself? Please reply back as I’m planning to create my very own website and would like to learn where you got this from or just
    what the theme is called. Kudos!

  34. cake delta 8 gummies 500mg

    This paragraph will help the internet people for
    setting up new blog or even a weblog from start to end.

发表评论