Jquery第一天JQ选择器及简单使用

一、Jquery介绍及简单使用

(一) 介绍

Jquery是什么，其实就是别人封装好的方法，它把各个功能都考虑到啦，方法比较全还并且简洁方便。我们直接拿来用就可以啦。
JQ里面的源代码设计思路是很巧妙的。代码之美~~

相关链接：
Jquery百度百科
Jquery作者

JQ已经更新了好几个版本，现在（2018年）最新的好像是3.1，我在这里就用1.1，来证明我是个光棍，JQ2.0之后不再支持IE678啦，自己根据需要来决定使用哪版，也不全是说越新越好。

相关链接：
Jquery中文网

（二）使用

  • 先把1.1版引入网页内

（三）入口函数

JS原生入口函数：window.onload=function(){
    //     代码区
}://文档和图片加载完毕后会执行里面的代码。

缺点：一个网页内只能出现一次，如果出现再次后者会覆盖前者。

  • JQ入口函数有3个：
  1. $(function () {
    alert(1);
    });//文档加载完毕，图片不加载的时候就可以执行这个函数。
  1. $(document).ready(function () {
    alert(2);
    });//文档加载完毕，图片不加载的时候就可以执行这个函数。
  1. $(window).ready(function () {
    alert(1);
    });//文档加载完毕，图片也加载完毕的时候在执行这个函数。

优点：可以出现多次。也可以根据不同的需要选择入口函数。

（四）JQuery的选择器 $

选择ID的时候：$("#ID名")；
选择Class的时候：$(".Class名")；
选择标签的时候：$("标签名")；

将$美元符换成JQuery也是可以的。 比如：$("#ID")和JQuery("#ID")是一样的。
可以打印试一下：console.log($===JQuery)//返回true;

（五）JQuery元素与原生JS之间相互转换

<html>
<head>
    <title></title>
</head>
<script src="jquery-1.11.1.js"></script>
<script>
    jQuery(window).ready(function () {
        console.log(document.getElementsByTagName("div")[0]);//打印原生JS的元素
        console.log($("div"));//打印原生JQ的元素
    })  
</script>
<body>
    <div style="width:100px;height:100px;background: pink"></div>
</body>
</html>

结果图：


结果图

结论：
可以看出来，JS打印的是整个标签。而JQ打印的是一个数组。我们可以以此来确定这个元素地JS的还是JQ的。
实际工作中我们需要经常在JS和JQ之间转换的。来看看怎么转吧！

  • 原生JS转换JQ
    var div=document.getElementsByTagName("div")[0];
    div=$(div);//将JQ元素赋值给原生JS
    console.log(div);

  • JQ转换JS
    JQ转换JS

二、案例

(一) 隔行变色

效果：


隔行变色

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
     jQuery(function(){
        var li=$("li");
        for(var i=0;i<li.length;i++){
            if(i%2===0){
                li[i].style.background="#488569"
            }else{
                li.get(i).style.background="#f0756f"
            }
        }
     })
    </script>
</head>
<body>
<ul>
    <li>JS很好玩嘛~~~~~</li>
    <li>JS很好玩嘛~~~~~</li>
    <li>JS很好玩嘛~~~~~</li>
    <li>JS很好玩嘛~~~~~</li>
    <li>JS很好玩嘛~~~~~</li>
    <li>JS很好玩嘛~~~~~</li>
    <li>JS很好玩嘛~~~~~</li>
</ul>
</body>
</html>

(二) 开关灯

效果：
开关灯

要求是要使用JQ和JS相互转换完成此次效果。

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>开关灯案例</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $($("input")[0]).click(function(){
            $("body")[0].style.backgroundColor="#fff";
        })
         $($("input")[1]).click(function(){
            $("body").get(0).style.backgroundColor="#000";
        })
      })
    </script>
</head>

<body>
    <input type="button" value="开灯" id="j_openLight"/>
    <input type="button" value="关灯" id="j_closeLight"/>
</body>
</html>

三、选择器

选择器 作用
$() 基本选择器
$("ul>li") 子代选择器
$("ul li") 后代选择器
$("ul li:odd") 选择此元素的奇数元素
$("ul li:even") 选择此元素的偶数元素
$("ul li:eq(0)") 指定索引值的元素
$("ul").children("li")方法 后代选择器，不写参数则是所有后代选择器
$("ul").find("li")方法 后代选择器，必须写参数
$("ul li").eq(0)方法 索引方法
$("ul li").eq(0).next()方法 该元素的下一个兄弟元素
$("ul li").eq(0).siblings()方法 该元素的所有兄弟元素
$("ul li").eq(0).parent()方法 该元素的父元素

  • 选择器案例 下拉菜单

下拉菜单

用JQ超简单

$(".wrap>ul>li").mouseover(function () {
       $(this).children().show()
  })
$(".wrap>ul>li").mouseout(function () {
       $(this).find("ul").hide()
  })

源码：

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

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(imgs/bg.jpg);
        }

        .wrap li{
            background-image: url(imgs/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {


                $(".wrap>ul>li").mouseover(function () {
                    $(this).children().show()
                })
                $(".wrap>ul>li").mouseout(function () {
                    $(this).find("ul").hide()
                })

        });
    </script>

</head>
<body>
    <div class="wrap">
    <ul>
        <li>
            <a href="">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

  • 选择器案例 隔行变色

只上代码，考验你读代码的时候到啦。

    <script>
        $(function () {

           $("li:even").css("background","pink");
           $("li:odd").css("background","red");
           var color=""
           $("li").mouseover(function () {
               color=$(this).css("background");
               $(this).css("background","yellow");
           })
           $("li").mouseout(function () {
                $(this).css("background", color);
           })
        });
    </script>

  • 选择器案例

123.gif

源码：

<!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.11.1.js"></script>
    <script>
        jQuery(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);
            });

            //离开wrap的时候所有的li全部opacity值为1；
            $(".wrap").mouseleave(function () {
                $(this).children().children("li").css("opacity",1);
//                $(".wrap 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>

  • 选择器案例 选项盒子

效果图：
123.gif

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {padding: 0;margin: 0;}
        ul { list-style-type: none;}
        .parentWrap {
            width: 200px;
            text-align:center;
        }
        .menuGroup {
            border:1px solid #999;
            background-color:#e0ecff;
        }
        .groupTitle {
            display:block;
            height:20px;
            line-height:20px;
            font-size: 16px;
            border-bottom:1px solid #ccc;
            cursor:pointer;
        }
        .menuGroup > div {
            height: 200px;
            background-color:#fff;
            display:none;
        }

    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(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();
            });
        })
    </script>
</head>
<body>
<ul class="parentWrap">
    <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
    </li>
</ul>
</body>
</html>

  • 选择器案例 淘宝广告栏

效果：
123 (1).gif

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a, #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        jQuery(function () {
            //需求：鼠标放入两侧的li中，让中间的ul中对应索引值的li显示出来，其他的隐藏。（右侧的li要+9）
            //左侧先绑。获取绑mouseenter
            $("#left li").mouseenter(function () {
                //显示对应索引值的中间的li
                //alert($(this).index());  获取索引值
                $("#center li").eq($(this).index()).show().siblings("li").hide();
            });

            //右侧
            $("#right li").mouseenter(function () {
                //显示对应索引值的中间的li
                //alert($(this).index());  获取索引值
                $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
            });
        });
    </script>
</head>
<body>
<div class="wrapper">

    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>

</div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 1,724评论 1赞 7
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,695评论 1赞 45
  • 08-jQuery学习与使用
    为甚嚒要学习jQuery？ 因为JS中有很多痛点： window.onload事件只能出现一次，如果出现多次，后面...
    magic_pill阅读 844评论 0赞 13
  • 2018-02-08
    前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 785评论 0赞 3
  • 季渡
    一季秋风一过渡，短袖收来长袖出。 不与寒风比凛冽，只缘萧瑟嗤我骨。
    冷面老生阅读 349评论 0赞 0