Jquery第一天JQ選擇器及簡單使用

一略贮、Jquery介紹及簡單使用

(一) 介紹

Jquery是什么甚疟，其實就是別人封裝好的方法，它把各個功能都考慮到啦逃延，方法比較全還并且簡潔方便览妖。我們直接拿來用就可以啦。
JQ里面的源代碼設(shè)計思路是很巧妙的揽祥。代碼之美~~

相關(guān)鏈接：
Jquery百度百科
 Jquery作者

JQ已經(jīng)更新了好幾個版本讽膏，現(xiàn)在（2018年）最新的好像是3.1，我在這里就用1.1盔然，來證明我是個光棍桅打，JQ2.0之后不再支持IE678啦，自己根據(jù)需要來決定使用哪版愈案，也不全是說越新越好挺尾。

相關(guān)鏈接：
Jquery中文網(wǎng)

（二）使用

先把1.1版引入網(wǎng)頁內(nèi)

（三）入口函數(shù)

JS原生入口函數(shù)：window.onload=function(){
????// ????代碼區(qū)
}://文檔和圖片加載完畢后會執(zhí)行里面的代碼。

缺點：一個網(wǎng)頁內(nèi)只能出現(xiàn)一次站绪，如果出現(xiàn)再次后者會覆蓋前者遭铺。

JQ入口函數(shù)有3個：

$(function () {
alert(1);
});//文檔加載完畢，圖片不加載的時候就可以執(zhí)行這個函數(shù)恢准。

$(document).ready(function () {
alert(2);
});//文檔加載完畢魂挂，圖片不加載的時候就可以執(zhí)行這個函數(shù)。

$(window).ready(function () {
alert(1);
});//文檔加載完畢馁筐，圖片也加載完畢的時候在執(zhí)行這個函數(shù)涂召。

優(yōu)點：可以出現(xiàn)多次。也可以根據(jù)不同的需要選擇入口函數(shù)敏沉。

（四）JQuery的選擇器 $

選擇ID的時候：$("#ID名")果正；
選擇Class的時候：$(".Class名")炎码；
選擇標(biāo)簽的時候：$("標(biāo)簽名")；

將$美元符換成JQuery也是可以的秋泳。比如：$("#ID")和JQuery("#ID")是一樣的潦闲。
可以打印試一下：console.log($===JQuery)//返回true;

（五）JQuery元素與原生JS之間相互轉(zhuǎn)換

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

結(jié)果圖：

結(jié)果圖

結(jié)論：
可以看出來，JS打印的是整個標(biāo)簽迫皱。而JQ打印的是一個數(shù)組歉闰。我們可以以此來確定這個元素地JS的還是JQ的。
實際工作中我們需要經(jīng)常在JS和JQ之間轉(zhuǎn)換的卓起。來看看怎么轉(zhuǎn)吧和敬！

原生JS轉(zhuǎn)換JQ
var div=document.getElementsByTagName("div")[0];
div=$(div);//將JQ元素賦值給原生JS
console.log(div);

JQ轉(zhuǎn)換JS

JQ轉(zhuǎn)換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>

(二) 開關(guān)燈

效果：

開關(guān)燈

要求是要使用JQ和JS相互轉(zhuǎn)換完成此次效果戏阅。

源碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>開關(guān)燈案例</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="關(guān)燈" id="j_closeLight"/>
</body>
</html>

三概龄、選擇器

選擇器	作用
$()	基本選擇器
$("ul>li")	子代選擇器
$("ul li")	后代選擇器
$("ul li:odd")	選擇此元素的奇數(shù)元素
$("ul li:even")	選擇此元素的偶數(shù)元素
$("ul li:eq(0)")	指定索引值的元素
$("ul").children("li")方法	后代選擇器，不寫參數(shù)則是所有后代選擇器
$("ul").find("li")方法	后代選擇器饲握，必須寫參數(shù)
$("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>
        //入口函數(shù)
        $(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>

選擇器案例隔行變色

只上代碼，考驗?zāi)阕x代碼的時候到啦蚕键。

    <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 () {
            //需求：鼠標(biāo)放入li中救欧，其他的li半透明，當(dāng)前盒子锣光，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 () {
            //需求：鼠標(biāo)點擊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">標(biāo)題1</span>
        <div>我是彈出來的div1</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">標(biāo)題2</span>
        <div>我是彈出來的div2</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">標(biāo)題3</span>
        <div>我是彈出來的div3</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">標(biāo)題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 () {
            //需求：鼠標(biāo)放入兩側(cè)的li中迂卢，讓中間的ul中對應(yīng)索引值的li顯示出來，其他的隱藏桐汤。（右側(cè)的li要+9）
            //左側(cè)先綁而克。獲取綁mouseenter
            $("#left li").mouseenter(function () {
                //顯示對應(yīng)索引值的中間的li
                //alert($(this).index());  獲取索引值
                $("#center li").eq($(this).index()).show().siblings("li").hide();
            });

            //右側(cè)
            $("#right li").mouseenter(function () {
                //顯示對應(yīng)索引值的中間的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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市怔毛，隨后出現(xiàn)的幾起案子员萍，更是在濱河造成了極大的恐慌，老刑警劉巖拣度，帶你破解...
沈念sama閱讀 211,948評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件碎绎，死亡現(xiàn)場離奇詭異螃壤，居然都是意外死亡，警方通過查閱死者的電腦和手機混卵，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,371評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門映穗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人幕随，你說我怎么就攤上這事蚁滋。” “怎么了赘淮？”我有些...
開封第一講書人閱讀 157,490評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵辕录，是天一觀的道長。經(jīng)常有香客問我梢卸，道長走诞，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,521評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任蛤高，我火速辦了婚禮蚣旱，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘戴陡。我一直安慰自己塞绿，他們只是感情好，可當(dāng)我...
茶點故事閱讀 65,627評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布恤批。她就那樣靜靜地躺著异吻，像睡著了一般。火紅的嫁衣襯著肌膚如雪喜庞。梳的紋絲不亂的頭發(fā)上诀浪，一...
開封第一講書人閱讀 49,842評論 1贊 290
城市分裂傳說
那天，我揣著相機與錄音延都，去河邊找鬼雷猪。笑死，一個胖子當(dāng)著我的面吹牛窄潭，可吹牛的內(nèi)容都是我干的春宣。我是一名探鬼主播，決...
沈念sama閱讀 38,997評論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼嫉你，長吁一口氣：“原來是場噩夢啊……” “哼月帝！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起幽污，我...
開封第一講書人閱讀 37,741評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤嚷辅，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后距误，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體簸搞，經(jīng)...
沈念sama閱讀 44,203評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡扁位，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,534評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了趁俊。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片域仇。...
茶點故事閱讀 38,673評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖寺擂，靈堂內(nèi)的尸體忽然破棺而出暇务，到底是詐尸還是另有隱情，我是刑警寧澤怔软，帶...
沈念sama閱讀 34,339評論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布垦细，位于F島的核電站，受9級特大地震影響挡逼，放射性物質(zhì)發(fā)生泄漏括改。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,955評論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一家坎、第九天我趴在偏房一處隱蔽的房頂上張望嘱能。院中可真熱鬧，春花似錦虱疏、人聲如沸焰檩。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,770評論 0贊 21
一樁弒父案订框，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至兜叨，卻和暖如春穿扳，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背国旷。一陣腳步聲響...
開封第一講書人閱讀 32,000評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工矛物，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人跪但。一個月前我還...
沈念sama閱讀 46,394評論 2贊 360
代替公主和親
正文我出身青樓履羞，卻偏偏與公主長得像，于是被迫代替她去往敵國和親屡久。傳聞我的和親對象是個殘疾皇子忆首，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,562評論 2贊 349

Jquery第一天JQ選擇器及簡單使用

一略贮、Jquery介紹及簡單使用

(一) 介紹

（二）使用

（三）入口函數(shù)

（四）JQuery的選擇器 $

（五）JQuery元素與原生JS之間相互轉(zhuǎn)換

二、案例

(一) 隔行變色

(二) 開關(guān)燈

三概龄、選擇器

選擇器案例 下拉菜單

選擇器案例 隔行變色

選擇器案例

選擇器案例 選項盒子

選擇器案例 淘寶廣告欄

推薦閱讀更多精彩內(nèi)容

選擇器案例下拉菜單

選擇器案例隔行變色

選擇器案例選項盒子

選擇器案例淘寶廣告欄