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来设置。

这篇文章有 84 个评论

  1. Calvin

    I’m now not positive the place you’re getting your
    info, but great topic. I needs to spend a while studying much
    more or working out more. Thanks for great information I used to be in search of this information for
    my mission.

  2. www.jetbluemastercard.com

    Hello there! Do you use Twitter? I’d like to follow you if that would be okay. I’m absolutely enjoying your blog and look forward to new updates.

  3. jetbluemastercard.com/activate

    Hey! This is my first visit to your blog! We are a team of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a extraordinary job!

  4. www.skywestonline.com

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your site when you could be giving us something informative to read?

  5. al-jwab.com

    When someone writes an post he/she keeps the idea of
    a user in his/her brain that how a user can be aware of
    it. Therefore that’s why this article is great. Thanks!

  6. Paramount network activate

    Hello, i think that i saw you visited my site so i came to return the favor.I’m attempting to find things to enhance my site!I suppose its ok to use a few of your ideas!!

  7. Wow, marvelous weblog layout! How long have you ever been running a blog for? you made running a blog glance easy. The entire glance of your site is wonderful, let alone the content material!

  8. Click here

    I relish visiting your website. You are certainly quick-witted plus write so thoroughly. Many thanks with regards to working hard on this particular website.

  9. www.kentreporter.com

    I really like your blog.. very nice colors & theme.
    Did you make this website yourself or did you hire
    someone to do it for you? Plz respond as I’m looking to
    design my own blog and would like to know where u got
    this from. appreciate it

  10. cbd deals

    What’s up colleagues, good article and fastidious urging commented here, I
    am genuinely enjoying by these.

  11. cbd deals

    I all the time emailed this weblog post page to all my contacts, because
    if like to read it next my contacts will too.

  12. katalog firm

    Thanks for sharing your thoughts about katalog
    firm. Regards

  13. knowyourmeme.com

    Hello there! This post could not be written any better!
    Reading this post reminds me of my previous room mate!
    He always kept talking about this. I will forward this page to him.

    Fairly certain he will have a good read. Thank you for sharing!

  14. Robert Ronning

    Oh my goodness! Awesome article dude! Thank you, However I
    am experiencing difficulties with your RSS.
    I don’t know the reason why I am unable to
    subscribe to it. Is there anybody else having the same RSS
    problems? Anyone who knows the solution will
    you kindly respond? Thanx!!

  15. good cbd oil brands

    Everything is very open with a clear clarification of the issues.
    It was definitely informative. Your website is very useful.
    Thanks for sharing!

  16. www.sfgate.com

    I blog quite often and I truly thank you for your content.

    The article has truly peaked my interest. I
    will bookmark your blog and keep checking for new information about once per week.
    I subscribed to your RSS feed as well.

发表评论