jQuery基礎(chǔ)第一天（jQuery使用和選擇器）

jQuery：

簡單易用，功能強(qiáng)大，對(duì)移動(dòng)端來說，體積稍大。

1、回顧前面學(xué)到的js我們遇到的一些痛點(diǎn)

1.window.onload 事件有個(gè)事件覆蓋的問題，我們只能寫一個(gè)
2.代碼容錯(cuò)性差
3.瀏覽器兼容性問題
4.書寫很繁瑣，代碼量多
5.代碼很亂，各個(gè)頁面到處都是
6.動(dòng)畫效果，我們很難實(shí)現(xiàn)

2、jQuery解決問題

解決了我們上面遇到所有問題

3、jQuery的基本使用


min：它是壓縮過的版本

區(qū)別：我們開發(fā)過程中，會(huì)用未壓縮的版本，或者壓縮的。
項(xiàng)目上線的時(shí)候，我們要用壓縮過的版本。

版本問題：
-1.1.xxx 版本 jQuery-1.11.1.js
-2.2.xxx 版本 不再支持IE6、7、8

1/引包

1.要把我們的jQuery源文件拿到我們的項(xiàng)目里面來
2.在我們的頁面中引用jQuery文件



問題：

如果遇到這種問題，那肯定是沒有引用我們的jQuery源文件。
用jQuery之前，先引入jQuery，然后，再去寫我們的jQuery代碼。

2/入口函數(shù)

$(document).ready(function(){});
$(function(){});

3/事件處理程序

1.事件源：

Js方式：document.getElementById(“id”)
jQuery方式：$(“#id”)

2.事件：

Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click

區(qū)別：jQuery的事件不帶on

3.事件處理程序

Js 書寫方式:
document.getElementById(“id”).onclick = function(){
    // 語句
}
jQuery 書寫方式: 
$(“#id”).click(function(){
    // 語句
});

4、jQuery詳細(xì)介紹

1/$問題

a)Js命名歸法：下劃線、字母、$、數(shù)字
b)但是不能以數(shù)字作為開頭

var $ = “我是$符號(hào)”;

jQUery的兩個(gè)變量：$ 和 jQuery
jQuery占用了我們兩個(gè)變量：$ 和 jQuery

2/js入口函數(shù)跟jQuery入口函數(shù)的區(qū)別：

1.Js的window.onload事件是等到所有內(nèi)容，以及我們的外部圖片之類的文件加載完了之后，才回去執(zhí)行
2.jQuery的入口函數(shù) 是在 html所有標(biāo)簽都加載之后，就回去執(zhí)行。

5、Js創(chuàng)建對(duì)象

三種方式：

1.var obj = {};
2.var obj1 = new Object();
3.var obj2 = Object.create();

1跟2的區(qū)別：
推薦使用第一個(gè)方式
第二種方式存在效率問題，因?yàn)橐猲ew對(duì)象，會(huì)涉及到原型查找的問題。

6、jQuery基本選擇器

1/回顧C(jī)SS選擇器

2/jQuery基本選擇器

規(guī)律：$(selector).css(“background”,”red”);

7、jQuery是什么

jQuery就是javascript的一個(gè)庫，把我們常用的一些功能進(jìn)行了封裝，方便我們來調(diào)用，提高我們的開發(fā)效率。

1/Javascipt跟jQuery的區(qū)別：

Javascript是一門編程語言，我們用它來編寫客戶端瀏覽器腳本。
jQuery是javascript的一個(gè)庫，包含多個(gè)可重用的函數(shù)，用來輔助我們簡化javascript開發(fā)

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

8、jQuery其他選擇器

1/層級(jí)選擇器

** 層級(jí)選擇器選擇了選擇符 后面那個(gè)元素，比如，div > p，是選擇>后面的p元素。**

2/過濾選擇器

3/篩選選擇器

參考:

<!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 () {
            // .eq()
            // 類比 ":eq(index)" 選擇器
            //$("span").eq(1).css("font-size","40px");

            // .first()
            // 類比 ":first" 選擇器
            //$("span").first().css("font-size", "40px");

            // .parent()
            // 選擇父親元素
            //$("#sp").parent().css("background", "gold");

            //$("p").parent("#div").css("background", "gold");

            // .siblings()
            // 選擇所有的兄弟元素
            //$("#li04").siblings(".liItem").css("background", "gold");

            // .find()
            // 查找所有后代元素
            $("div").find("#li04").css("background", "gold");
        });
    </script>
</head>
<body>
<div>
    <span>我是第1個(gè)span</span>
    <span id="sp">我是第2個(gè)span</span>
    <span>我是第3個(gè)span</span>
</div>

<div id="div">
    <p>Hello</p>
</div>
<div class="selected">
    <p>Hello Again</p>
</div>

<div>
    <ul>
        <li>我是li01</li>
        <li>我是li02</li>
        <li>我是li03</li>
        <li id="li04">我是li04</li>
        <li>我是li05</li>
        <li class="liItem">我是li06</li>
        <li>我是li07</li>
        <li>我是li08</li>
    </ul>
</div>
</body>
</html>

案例：下拉菜單

下拉菜單.gif
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }

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

        .wrap li {
            float: left;
            width: 100px;
            height: 30px;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            color: black;
            text-decoration: none;
            display: block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-image: url(imgs/libg.jpg);
        }

        .wrap li ul {
            position: absolute;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // mouseenter事件 是 鼠標(biāo)經(jīng)過時(shí)觸發(fā)的事件
            /*$(".wrap li").mouseenter(function () {
                $(this).children("ul").show();
            });

            $(".wrap li").mouseleave(function () {
                $(this).children("ul").hide();
            });*/

            /*$(".wrap li").hover(function () {
                //alert("1");
                $(this).children("ul").show();
            }, function () {
                $(this).children("ul").hide();
            });*/

            /*$(".wrap li").hover(function () {
                /!*alert("1");*!/
                var $this = $(this).children("ul");
                var isShow = $this.css("display");
                if(isShow === "block") {
                    $this.hide();
                } else {
                    $this.show();
                }
            });*/

            $(".wrap li").hover(function () {
                $(this).children("ul").slideToggle();
            });

        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一級(jí)菜單1</a>
                <ul>
                    <li><a href="#">二級(jí)菜單1</a></li>
                    <li><a href="#">二級(jí)菜單2</a></li>
                    <li><a href="#">二級(jí)菜單3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一級(jí)菜單1</a>
                <ul>
                    <li><a href="#">二級(jí)菜單1</a></li>
                    <li><a href="#">二級(jí)菜單2</a></li>
                    <li><a href="#">二級(jí)菜單3</a></li>
                </ul>
            </li><li>
            <a href="#">一級(jí)菜單1</a>
            <ul>
                <li><a href="#">二級(jí)菜單1</a></li>
                <li><a href="#">二級(jí)菜單2</a></li>
                <li><a href="#">二級(jí)菜單3</a></li>
            </ul>
        </li>
        </ul>
    </div>
</body>
</html>

此案例獲取方式：
鏈接：http://pan.baidu.com/s/1gfgFPFd 密碼：4tl0

9、mouseover事件跟mouseenter事件的區(qū)別：

mouseover/mouseout事件，鼠標(biāo)經(jīng)過的時(shí)候會(huì)觸發(fā)多次，每遇到一個(gè)子元素就會(huì)觸發(fā)一次。
mouseenter/mouseleave事件，鼠標(biāo)經(jīng)過的時(shí)候只會(huì)觸發(fā)一次

10、DOM對(duì)象跟jQuery對(duì)象相互轉(zhuǎn)換

jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象:
方式一：$(“#btn”)[0]
方式二：$(“#btn”).get(0)

DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象：
$(document) -> 把DOM對(duì)象轉(zhuǎn)成了jQuery對(duì)象
var btn = document.getElementById(“bt n”);
btn -> $(btn);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 200px;
            background: #000;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象
            /*var btn = document.getElementById("btn");
            $(btn).click(function () {
                $("div").hide();
            });*/

            // jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象
            /*$("button")[1].onclick = function (){
                alert("jQuery對(duì)象轉(zhuǎn)換成dom對(duì)象");
            };*/

            // 另外一個(gè)方式
            $("button").get(0).onclick = function () {
                alert("jQuery對(duì)象轉(zhuǎn)換成dom對(duì)象");
            }

            // js里面的click() 方法：觸發(fā)click事件
            // js里面的onclick 是綁定點(diǎn)擊事件
            /*var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("我是btn的onclick");
            };
            btn.click();*/
        });
    </script>
</head>
<body>
    <button id="btn">我是按鈕</button>
    <button>我是按鈕</button>
    <div>

    </div>
</body>
</html>

今日重點(diǎn)回顧：

jQuery是什么？

它是JS的一個(gè)庫，封裝一些我們常用的功能，方便我們?nèi)フ{(diào)用，提高我們的開發(fā)效率。

jQuery基本使用：
  1. 引包
  2. 兩種方式：
    a).$(document).ready.(function(){});
    b).$(function(){});
    3.使用：
    a).獲取事件源
    b).事件
    c).事件處理程序
jQuery選擇器

基本選擇器：、element、、,
層級(jí)選擇器：空格、>、+、~
過濾選擇器：
基本過濾選擇器 :eq(index)、 :lt(index) 、:first、:last、:even、:odd
屬性選擇器：[attr]、 [attr = value]、[attr! = value]、[attr^ = value]、[attr$= value]、[attr = value]、[attr][attr1]

篩選選擇器：.eq(index)、.parent()、.children()、siblings()、.last()、.first()、.find()

DOM對(duì)象跟jQuery對(duì)象的相互轉(zhuǎn)換:

DOM –>jQuery 對(duì)象： $(document) 、$(this)
jQuery - >DOM對(duì)象：$(“div”)[0]、$(“div”).get(0)
$(“div”).show(1000).html(“我是文本內(nèi)容”);
鏈?zhǔn)骄幊?/p>

區(qū)別：
//.eq(index)獲取到的是jQuery對(duì)象
//.get(index)獲取到的是DOM對(duì)象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            //.eq(index)獲取到的是jQuery對(duì)象
            //.get(index)獲取到的是DOM對(duì)象

            $("div").eq(0).css({
                //這里面的鍵值對(duì) ， 鍵 可以帶雙引號(hào)或者單引號(hào)，也可以不帶引號(hào)
                //一些不合法的變量名字，可以使用加引號(hào)的方式來聲明
                "font-size":"40px"
            });

           var $div = $("div").eq(0);
            console.log($div);

            //獲取的是DOM
            //下面這句是錯(cuò)誤的，因?yàn)?get（index）方法獲取的是DOM對(duì)象，而DOM對(duì)象沒有CSS這個(gè)方法
            //$("div").get(1).css("font-size","40px");
            var divDom = $("div").get(0);
            console.log(divDom);
        });
    </script>

</head>
<body>
<div>
    我是div1
</div>
<div>我是div2</div>
<div></div>

</body>
</html>

jQuery的幫助文件及文檔獲?。?/h2>

鏈接：http://pan.baidu.com/s/1hrVO3WC 密碼：zy08

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識(shí)jQuery （1）環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,667評(píng)論 0贊 44
  • 第一章 jQuery簡介 1-1 jQuery簡介 1.簡介 2.優(yōu)勢 3.特性與工具方法 1-2 環(huán)境搭建 進(jìn)入...
    mo默22閱讀 1,774評(píng)論 0贊 11
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,501評(píng)論 0贊 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,272評(píng)論 0贊 1
  • jQuery基礎(chǔ)（一）——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗(yàn) $(docume...
    croyance0601閱讀 1,165評(píng)論 0贊 8

友情鏈接更多精彩內(nèi)容