jQuery基礎(chǔ)操作有哪些-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)jQuery基礎(chǔ)操作有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

超過(guò)10余年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，小程序開(kāi)發(fā)，微信開(kāi)發(fā)，APP應(yīng)用開(kāi)發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷和我們一樣獲得訂單和生意！

1.選擇器
1.1.id選擇器

$('#id')

1.2.class選擇器

$('.cl')

1.3.標(biāo)簽選擇器

<div></div>

$('div')

1.4組合選擇器

<div id="i1">
    <div class="c1">
        <a>1</a>
        <a>2</a>
        <a>3</a>
    </div>
</div>

$('#i1,.c1,a ')   #i1和.c1和a的所有標(biāo)簽

1.5.層級(jí)選擇器

<div id="i1">
    <div class="c1">
        <a>1</a>
        <a>2</a>
        <a>3</a>
    </div>
</div>

$('#i1 .c1 a ')  #i1下的.c1下的所有a標(biāo)簽(包括子孫后代)
$('#i1.c1>a ')  #i1下的.c1下的所有a標(biāo)簽(只有兒子代)

1.6.基本

:first   $('#i1 .c1 a:first') #i1下的.c1下的第一個(gè)a標(biāo)簽
:last   $('#i1 .c1 a:last') #i1下的.c1下的最后一個(gè)a標(biāo)簽
:eq()  $('#i1 .c1 a:eq(1)') #i1下的.c1下的最后一個(gè)a標(biāo)簽

1.7.屬性

$('[name]')       具有name屬性的所有標(biāo)簽
$('[name="user"]') name屬性等于user的標(biāo)簽

1.8.篩選器

<ul>
    <li></li><li></li><li id="i1"></li><li></li>
</ul>
$('i1').next()       #下一個(gè)
$('i1').prev()      #上一個(gè)
$('i1').parent()  #父標(biāo)簽
$('i1').children()#子標(biāo)簽
$('i1').siblings()#兄弟標(biāo)簽

2.操作實(shí)例
jQuery基礎(chǔ)操作有哪些

<body>
<input type="button" value="全選" onclick="selectAll();"/>
<input type="button" value="反選" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="1">
    <thead>
    <tr>
        <th>選項(xiàng)</th>
        <th>IP</th>
        <th>PORT</th>
    </tr>
    <tbody>
    <tr>
        <td><input type="checkbox" /></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>1.1.1.2</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>1.1.1.3</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>1.1.1.4</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>1.1.1.5</td>
        <td>80</td>
    </tr>
    </tbody>
    </thead>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    //全選
    function selectAll() {
        //prop() 方法設(shè)置或返回被選元素的屬性和值
        $(':checkbox').prop('checked',true);
    }
    //取消
    function cancleAll() {
        $(':checkbox').prop('checked',false);
    }
    //反選
    function reverseAll() {
        //each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)
        $(':checkbox').each(function () {
            //三元運(yùn)算var v = 條件? 真值：假值
            var v=$(this).prop('checked')?false:true;
            $(this).prop('checked',v);
        })
    }

</script>
</body>

3.左側(cè)菜單展開(kāi)實(shí)例
jQuery基礎(chǔ)操作有哪些

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .left_menu{
            height: 140px;
            width: 200px;
            border: 1px dashed #000000;
        }
        .item .head{
            background-color: #000000;
            color: antiquewhite;
        }
        .item .content{
            min-height:80px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="left_menu">
        <div class="item">
            <div class="head">標(biāo)題一</div>
            <div class="content">內(nèi)容</div>
        </div>
        <div class="item">
            <div class="head">標(biāo)題二</div>
            <div class="content hide">內(nèi)容</div>
        </div>
        <div class="item">
            <div class="head">標(biāo)題三</div>
            <div class="content hide">內(nèi)容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //當(dāng)點(diǎn)擊.head類標(biāo)簽時(shí)觸發(fā)函數(shù)
        $('.head').click(function () {
            //從當(dāng)前點(diǎn)擊的標(biāo)簽的下一個(gè)標(biāo)簽移除hide類屬性
            $(this).next().removeClass('hide');
            //從當(dāng)前點(diǎn)擊的標(biāo)簽的父級(jí)標(biāo)簽的兄弟標(biāo)簽中找到包含.content類的標(biāo)簽并添加hide類屬性
            $(this).parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>

4.自動(dòng)添加
jQuery基礎(chǔ)操作有哪些
jQuery基礎(chǔ)操作有哪些

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 350px;
            margin-top: -200px;
            margin-left: -250px;
            background-color: aliceblue;
            z-index: 10;
        }
        .model p,h3{
            text-align: center;
        }
        .model p input[type="text"]{
            width: 300px;
            height: 28px;
        }
        .model p input[type="button"]{
            width: 150px;
            height: 35px;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addModel();">添加</a>
    <table border="1">
        <thead>
            <tr>
                <th>地址</th>
                <th>端口</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.11</td>
                <td>80</td>
                <td><a class="edit">編輯</a>|<a>刪除</a></td>
            </tr>
            <tr>
                <td>1.1.1.12</td>
                <td>80</td>
                <td><a class="edit">編輯</a>|<a>刪除</a></td>
            </tr>
            <tr>
                <td>1.1.1.13</td>
                <td>80</td>
                <td><a class="edit">編輯</a>|<a>刪除</a></td>
            </tr>
        </tbody>
    </table>
    <div class="model hide">
        <p><h3>操作</h3></p>
        <p>地址：<input type="text" name="host"/></p>
        <p>端口：<input type="text" name="port"/></p>
        <p><input type="button"  value="取消" onclick="removeModel();"/></p>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //打開(kāi)添加框
        function addModel() {
            $('.model,.shadow').removeClass('hide');
            $('.model p input[type="text"]').val('');
        }
        //關(guān)閉添加框
        function removeModel() {
            $('.model,.shadow').addClass('hide');
        }
        //點(diǎn)擊編輯時(shí)執(zhí)行函數(shù)
        $('.edit').click(function () {
            $('.model,.shadow').removeClass('hide');
            //獲取當(dāng)前點(diǎn)擊元素的父級(jí)標(biāo)簽的所有兄弟標(biāo)簽
            var tds=$(this).parent().prevAll();
            //取得標(biāo)簽中的值，既innerText
            var port=$(tds[0]).text();
            var host=$(tds[1]).text();
            //給model賦值
            $('.model p input[name="port"]').val(port);
            $('.model p input[name="host"]').val(host);
        })
    </script>
</body>

5.開(kāi)關(guān)toggleClass

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" id="button1" value="按鈕"/>
    <div class="c1">dsajadw</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //點(diǎn)擊#button1時(shí)觸發(fā)函數(shù)
        $('#button1').click(function () {
            //調(diào)用toggleClass開(kāi)關(guān)屬性
            $('.c1').toggleClass('hide')
        })
    </script>
</body>

感謝各位的閱讀！關(guān)于“jQuery基礎(chǔ)操作有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：jQuery基礎(chǔ)操作有哪些-創(chuàng)新互聯(lián)
文章地址：http://bm7419.com/article8/ijcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、軟件開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司