jQuery基本操作

1、文本操作:

     $(..).text() ------獲取文本內(nèi)容
     $(..).text(‘<a>hhhhh</a>’) ------設(shè)置文本內(nèi)容
     $(..).html() ------獲取文本內(nèi)容
     $(..).html(‘<a>hhhhh</a>’) ------設(shè)置文本內(nèi)容
     $(..).val() ------獲取value值
     $(..).val(..) ------設(shè)置value值 

2、樣式操作:
addClass
removeClass
toggleClass
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" id="i1" value="開(kāi)關(guān)">
<div class="c1">jdfjgfdgdf</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $('#i1').click(function () {
        // if($('.c1').hasClass('hide')){
        //     $('.c1').removeClass('hide');
        // }else{
        //     $('.c1').addClass('hide');
        // }
        //toggleClass就相當(dāng)于以上的if語(yǔ)句
        $('.c1').toggleClass('hide')
    })
</script>
</body>
</html>

3、屬性操作:

    專門(mén)用于做自定義屬性:
    $(..).attr(‘n’)  ----獲取屬性n的值
    $(..).attr('n','v')----設(shè)置屬性n的值
    $(..).removeAttr('n','v')

    專門(mén)用于checkbox、radio
    $(..).prop('checked')--獲取選中狀態(tài)
    $(..).prop('checked','ture')--設(shè)置選中狀態(tài)

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

<input type="button" value="全選" onclick="checkAll();">
<input type="button" value="反選" onclick="reverseAll();">
<input type="button" value="取消" onclick="cancelAll();">

<table border="1">
    <thead></thead>
    <tr>
        <th>選項(xiàng)</th>
        <th>ip</th>
        <th>port</th>
    </tr>
    <tbody id="tb">
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1</td>
        <td>80</td>
    </tr>
   
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    function checkAll() {
        //prop('checked',true)設(shè)置選中狀態(tài)
        $(':checkbox').prop('checked',true);
    }
    function cancelAll() {
        $(':checkbox').prop('checked',false);
    }
    function reverseAll() {
        $(':checkbox').each(function(){
            // 方法一:
            // if(this.checked){
            //     this.checked = false;
            // }else {
            //     this.checked = true;
            // }


            //方法二:
            //prop('checked')獲取選中狀態(tài)
            // if($(this).prop('checked')){
            //     $(this).prop('checked',false)
            // }else {
            //      $(this).prop('checked',true)
            // }

            //方法三:
            var v= $(this).prop('checked')?false:true
            $(this).prop('checked',v)

        })
    }
</script>
</body>
</html>
?著作權(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),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • (1)jQuery加載 <!DOCTYPE html> jQuery加載 // alert();//彈...
    PySong閱讀 216評(píng)論 0 0
  • 1jquery對(duì)樣式的操作(類) 1.1增加/刪除樣式 1.1.1addClass()1.1.2removeCla...
    向布谷鳥(niǎo)說(shuō)早安閱讀 454評(píng)論 0 2
  • jquery加載將獲取元素的語(yǔ)句寫(xiě)到頁(yè)面頭部,會(huì)因?yàn)樵剡€沒(méi)有加載而出錯(cuò),jquery提供了ready方法解決這個(gè)...
    沉吟不語(yǔ)閱讀 185評(píng)論 0 0
  • 歌名(異地) 那日你說(shuō)你想我了 低著頭 想象著你的溫柔 知道你不在身后 沒(méi)事我可以想你很久 靠著身后的大笨熊 放空...
    我滾滾閱讀 369評(píng)論 5 2
  • 整體思路 先定義一些常量 比如小球的半徑 固定的坐標(biāo)位置 顏色, 重點(diǎn)是一個(gè)2維數(shù)組用來(lái)記錄數(shù)字的陣列 獲取時(shí)間,...
    蘿卜仔1閱讀 705評(píng)論 0 0

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