javascipt中的jQuery用法

發(fā)布時間：2020-05-28 10:05:04 來源：億速云閱讀：292 作者：Leah 欄目：編程語言

今天小編給大家分享的是javascipt中的jQuery用法。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

jQuery介紹
jquery是一個函數(shù)庫,一個js文件,頁面用script標(biāo)簽引入這個js文件就可以使用。
下載地址:
jQuery官方網(wǎng)站: http://jquery.com/
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

將獲取元素的語句寫到頁面頭部,會因為元素還沒有加載而出錯,jquery提供了ready方法解決這個
問題,它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
詳細(xì)寫法
<script type="text/javascript">
$(function(){
......
});
</script>
簡寫
將獲取元素的語句寫到頁面頭部,會因為元素還沒有加載而出錯,jquery提供了ready方法解決這個
問題,它的速度比原生的 window.onload 更快
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>

jQuery選擇器
基本選擇器
選擇某個網(wǎng)頁元素,然后對它進(jìn)行某種操作, jquery選擇器 jquery選擇器可以快速地選擇元素,
選擇規(guī)則和css樣式相同,使用length屬性判斷是否選擇成功。
jquery用法思想一 : 選擇某個網(wǎng)頁元素,然后對它進(jìn)行某種操作
$(document) //選擇整個文檔對象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網(wǎng)頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span')
//選擇id為為ul1元素下的所有l(wèi)i下的span元素

$('#ul1 li:first')
$('#ul1 li:odd')
選擇器修飾過濾
//選擇id為ul1元素下的第一個li
//選擇id為ul1元素下的li的奇數(shù)行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素

選擇器函數(shù)過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素

選擇器轉(zhuǎn)移
$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素后面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素

操作行間樣式
jquery用法思想二同一個函數(shù)完成取值和賦值
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設(shè)置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

操作樣式類名
jquery用法思想二同一個函數(shù)完成取值和賦值
$("#div1").addClass("divClass2")
//為id為div1的對象追加樣式divClass2
$("#div1").removeClass("divClass")
//移除id為div1的對象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2")
//移除多個樣式
$("#div1").toggleClass("anotherClass")
//重復(fù)切換anotherClass樣式

jQuery屬性操作
設(shè)置html內(nèi)容
// 取出文本內(nèi)容
// 取出html內(nèi)容
var $htm = $('#div1').text();
var $htm = $('#div1').html();
// 設(shè)置文本內(nèi)容
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
$('#div1').text('<span>添加文字</span>');

設(shè)置屬性值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

綁定click事件
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對象
// 使用jquery對象用 $(this)
})

jquery特殊效果
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個元素
slideDown() 向下展開
slideUp() 向上卷起
slideToggle() 依次展開或卷起某個元素

jquery特殊效果
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});

jQuery使用.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

</body>

基于jQuery實現(xiàn)電影排行榜.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 450px;
            border: 1px solid gray;
            margin: 0 auto;
            margin-top: 50px;
        }

        .box h2 {
            color: green;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed gray;
            padding-left: 10px;
        }

        .box li {
            list-style: none;
            padding: 10px 15px;
            border: 1px dashed gray;

        }

        .box li span {
            background-color: gray;
            display: inline-block;
            width: 20px;
            height: 20px;
            color: white;
            text-align: center;
        }

        .box li:nth-child(-n+3) span {
            background-color: green;
            color: white;
        }

        .content {
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }

        .content img {
            width: 80px;
            height: 120px;
            float: left;
        }

        .content p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;

        }

        .current .content{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

    <script>
        $(function () {
            $('li').mouseenter(function () {
                $(this).addClass('current');

            });

            $('li').mouseleave(function () {
                $(this).removeClass('current');

            });
        })

    </script>
</head>
<body>

<div class="box">
    <h2>電影排行榜</h2>
    <ul>
        <li>
            <span>1</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/movie.jpg">
                <p>
                    天地靈氣孕育出一顆能量巨大的混元珠，元始天尊將混元珠提煉成靈珠和魔丸， 靈珠投胎為人，助周伐紂時可堪大用；而魔丸則會誕出魔王，為禍人間。 元始天尊啟動了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>2</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/movie.jpg">
                <p>
                    天地靈氣孕育出一顆能量巨大的混元珠，元始天尊將混元珠提煉成靈珠和魔丸， 靈珠投胎為人，助周伐紂時可堪大用；而魔丸則會誕出魔王，為禍人間。 元始天尊啟動了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>3</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地靈氣孕育出一顆能量巨大的混元珠，元始天尊將混元珠提煉成靈珠和魔丸， 靈珠投胎為人，助周伐紂時可堪大用；而魔丸則會誕出魔王，為禍人間。 元始天尊啟動了天劫咒
                </p>
            </div>
        </li>
        <li>
            <span>4</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地靈氣孕育出一顆能量巨大的混元珠，元始天尊將混元珠提煉成靈珠和魔丸， 靈珠投胎為人，助周伐紂時可堪大用；而魔丸則會誕出魔王，為禍人間。 元始天尊啟動了天劫咒
                </p>
            </div>
        </li>
        <li>
            <span>5</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地靈氣孕育出一顆能量巨大的混元珠，元始天尊將混元珠提煉成靈珠和魔丸， 靈珠投胎為人，助周伐紂時可堪大用；而魔丸則會誕出魔王，為禍人間。 元始天尊啟動了天劫咒
                </p>
            </div>
        </li>

    </ul>
</div>

</body>

基于jQuery實現(xiàn)Tab選項卡.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 448px;
            height: 298px;
            border: 1px solid lightgray;
            margin: 50px auto;
        }

        .nav > li {
            list-style: none;
            width: 110px;
            height: 50px;
            background: darkseagreen;
            color: white;
            text-align: center;
            line-height: 50px;
            float: left;
            border: 1px solid white;
        }

        .nav > li:hover {
            background-color: green;
        }

        .nav > .current {
            background-color: green;
        }

        .content > li {
            list-style: none;
            display: none;
        }

        .content > .show {
            display: block;
        }

        .content > li > img {
            width: 448px;
            height: 248px;

        }
    </style>

    <script src="js/jquery-3.4.1.min.js"></script>

    <script> $(function () {
        $(".nav>li").mouseenter(function () {
            $(this).addClass("current");
            $(this).siblings().removeClass("current");
            var $idx = $(this).index();
            var $li = $(".content>li").eq($idx);
            $li.siblings().removeClass("show");
            $li.addClass("show");
        })
    }) </script>

</head>
<body>

<div class="box">
    <ul class="nav">
        <li class="current">主頁</li>
        <li>遇見好貨</li>
        <li>年中狂歡</li>
        <li>夏日尚新</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="./img/img5.jpg" alt=""></li>
        <li><img src="./img/img1.jpg" alt=""></li>
        <li><img src="./img/img2.jpg" alt=""></li>
        <li><img src="./img/img3.jpg" alt=""></li>

    </ul>
</div>
</body>

關(guān)于javascipt中的jQuery用法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

javascipt中的jQuery用法

jQuery使用.html

基于jQuery實現(xiàn)電影排行榜.html

基于jQuery實現(xiàn)Tab選項卡.html

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽