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

一、Jquery介绍及简单使用

(一) 介绍

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

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

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

（二）使用

先把1.1版引入网页内

（三）入口函数

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

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

JQ入口函数有3个：

$(function () {
alert(1);
});//文档加载完毕，图片不加载的时候就可以执行这个函数。

$(document).ready(function () {
alert(2);
});//文档加载完毕，图片不加载的时候就可以执行这个函数。

$(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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,080评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,422评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,630评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,554评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,662评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,856评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,014评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,752评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,212评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,541评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,687评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,347评论 4赞 331
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,973评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,777评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,006评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,406评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,576评论 2赞 349

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

一、Jquery介绍及简单使用

(一) 介绍

（二）使用

（三）入口函数

（四）JQuery的选择器 $

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

二、案例

(一) 隔行变色

(二) 开关灯

三、选择器

选择器案例 下拉菜单

选择器案例 隔行变色

选择器案例

选择器案例 选项盒子

选择器案例 淘宝广告栏

推荐阅读更多精彩内容

选择器案例下拉菜单

选择器案例隔行变色

选择器案例选项盒子

选择器案例淘宝广告栏