python jquery初識

時間  2020-05-09
標籤 python jquery 欄目 Python 简体版
原文   原文鏈接

 jQuery的介紹

jQuery是一個快速，小巧，功能豐富的JavaScript庫。它經過易於使用的API在大量瀏覽器中運行，使得HTML文檔遍歷和操做， 事件處理動畫和Ajax更加簡單。經過多功能性和可擴展性的結合， jQuery改變了數百萬人編寫JavaScript的方式。 jquery 中 98%的都是方法

爲何要使用jquery?

JavaScript書寫代碼的不足javascript

  • window.onload 事件有事件覆蓋的問題，所以只能寫一個事件。css

  • 代碼容錯性差。html

  • 瀏覽器兼容性問題。java

  • 書寫很繁瑣，代碼量多。jquery

  • 代碼很亂，各個頁面處處都是。bootstrap

  • 動畫效果很難實現。瀏覽器

jQuery的下載

jQuery的使用

1 基礎選擇器app

 

 

- 標籤選擇器 $('div') - id選擇器$('#box') - class選擇器$('.box') - 後代 $("x y")     // x的全部後代y（子子孫孫）
- 子代 $("x >y")  // x的全部兒子y（兒子）
- 組合  $("#id, .className, tagName") //多個標籤配合使用
- 交集   //表示2者選中以後共有的特徵
- 兄弟 $("x + y")  // 找到全部緊挨在x後面的y
         $("x ~ y")  // x以後全部的兄弟y

 簡單案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div class = "box" id = "wrap">
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script> $(function(){ //jQuery的選擇器(獲取DOM對象 注意,它獲取的是jQuery對象而不是jsDOM對象)
        $("div")[0].style.backgroundColor = "red"; console.log($("#wrap")); //id選擇器
        console.log($(".box"));  //類選擇器
        console.log($("#wrap .active"));  //後代選擇器
        // 獲取到jQuery對象,click時間
        $("#wrap .active").click(function(){ // console.log(this.innerText); //錯誤寫法由於獲取到的是jQuery對象而不是結束DOM對象
            // //isdom =>jQuery對象
            // console.log($(this));
 console.log($(this).text()); //點擊獲取jqery對象的text值 7個alex
            $(this).text("haha");   //將獲取當前點擊的jQuery值修改
            console.log($(this).text("haha")); //打印出來修改的值 }) }) </script>
</body>
</html>

 

2基本過濾器

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

　表單篩選器（多用於找form表單裏面出現的input標籤，固然經過屬性選擇器找確定也是沒問題的，這樣就是寫着簡單一些）：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
 

 
 

過濾器案例
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>天龍八部</li>
    <li>射鵰英雄傳</li>
    <li>神鵰俠侶</li>
    <li>倚天屠龍記</li>
</ul>
<input type="text">
<script src="./jquery-3.3.1.min.js"></script>
<script> $(function () { //獲取值,eq()的使用 console.log($("li:eq(1)").css("color")); //設置單個值 // $("li:eq(1)").css("color", 'red'); $("li:eq(1)").css({ color: "red", backgroundColor: 'blue' }); //屬性選擇器 $("input[type='text']").css({ backgroundColor: 'yellow' }) }) </script>
</body>
</html>
 

 

 
 
 

3 篩選選擇器
 

 

 
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>天龍八部</li>
    <li class="item"><a href="">曉峯</a></li>
    <li>神鵰俠侶</li>
    <li>倚天屠龍記</li>
</ul>
<input type="text">
<script src="./jquery-3.3.1.min.js"></script>
<script> $(function () { //查的是後代 length: 1
        console.log($("li").find("a")); //親兒子 ul下的全部li
        console.log($("ul").children()); //親老爸 a標籤的親爸
        console.log($("a").parent()); //         console.log($('ul li').eq(1)) }) </script>
</body>
</html>
 

 

小結:dom
 

 
 
- find() 查找的是後代 - children() 查找的是親兒子 - parent()查找的是親爹 - eq() 選擇匹配的元素 - siblings() 選擇兄弟元素(除了本身自己)
 
 
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id爲i2的標籤就結束查找，不包含它
上一個元素
 
 
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

 
 
//this  誰作的事件操做 this指向誰
 

 
 

 siblings() 兄弟標籤方法的用途
 

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

    </style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<script src="jquery-3.3.1.min.js"></script>
<script> $(function () { $("button").click(function () { console.log($(this).css("backgroundColor", "red")); //獲取索引
            let i = $(this).index() console.log(i); //把本身按鈕變成紅色 把除了他之外的背景變成灰色
            $(this).css("backgroundColor", "red").siblings("button").css("backgroundColor", "#666"); //把當前的索引添加class屬性 除了他之外的所有刪除
            $("div").eq(i).addClass("active").siblings("div").removeClass("active"); addClass();// 添加指定的CSS類名。
            removeClass();// 移除指定的CSS類名。
            hasClass();// 判斷樣式存不存在
            toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。
 }) }) </script>

</body>

</html>
 

 

升級版的選擇卡ide
 

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

    </style>
</head>
<body>
<ul>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script> $(function () { $("ul li").click(function () { //先找到ul下的全部li標籤 把顏色更改成紅色,找到a父親也就是li,
            //除了他以外的a標籤所有變爲藍色
            $(this).find("a").css("color", 'red').parent() .siblings('li').find('a').css('color', 'bule'); }) }) </script>

</body>

</html>
 

 

 
 
 

jQuery的文檔操做
 
 

1插入操做
 

 
 
//語法:
父元素.append(子元素) //解釋:追加某子元素:
stirng| element(js對象)|jquery元素
 

 

代碼演示
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龍</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script> $(function () { //追加字符串
        $('.comment').append('<li id="item">張無忌</li>'); $('#item').click(function () { alert($(this).text()) }); //追加js對象
        var li = document.createElement('li'); li.innerText = '趙敏'; $(".comment").append(li); //若是是jquery對象,至關於移動操做 //setTimeout方法用於在指定的毫秒數後調用函數或計算表達式。 // setTimeout(function(){ // $(".comment").append($("li").eq(0)); // },2000);
        $("<li>周芷若</li>").appendTo(".comment").click(function () { alert($(this).html()) }) }) </script>

</body>

</html>
 

 
 

2.前置插入
 

 
 
//語法
$(A).append(B)// 把B追加到A A是父B是子
$(A).appendTo(B)// 把A追加到B A是子B是父
 

 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龍</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script> $("#append").click(function () { let content = $('input[type=text]').val(); // $('.comment').prepend(`<li>${content}</li>`);
        //第二種添加方式
        $(`<li>${content}</li>`).prependTo('.comment')
 }) </script>

</body>

</html>
 

 
 

後置追加
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龍</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script>
    //後置追加 正序
    $("#append").click(function () { let content = $("input[type=Text]").val(); if (!content) { return; } $('.comment').append(`<li>${content}</li>`);
 }) </script>
</body>

</html>
 

 
 

3.兄弟追加(後)
 

 
 
目標兄弟.after(要插入的兄弟) 要插入的兄弟.inertAfter(目標兄弟)
 

 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="after">追加</button>
<ul class="comment">
    <li>倚天屠龍</li>
    <li id="item">張無忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script> $("#after").click(function () { let content=$('input[type=text]').val() $('#item').after(`<li>${content}</li>`);
        //第二種寫法
        // $(`<li>${content}</li>`).insertAfter('#item')
 }) </script>
</body>

</html>
 

 
 

兄弟追加(前)
 

 
 
目標兄弟.before(要插入的兄弟) 要插入的兄弟.insertBefore(目標兄弟)
 

 
 

attr prop
 

attr 設置屬性值或者 返回被選元素的屬性值   
 

prop() 方法設置或返回被選元素的屬性和值。
 

$(':checkbox').prop('checked', true)
 

1.是有true,false兩個屬性使用prop();
 

2.其餘則使用attr();
 
 

4.刪除和清空
 

 
 
//刪除
$(seletor).remove();//刪除整個標籤 事件也刪除
$(seletor).detach();//刪除整個標籤 事件保留
 
 
//清空
$(seletor).empty();//刪除匹配的元素集合中全部的子節點，包括文本被所有刪除，可是匹配的元素還在
 
 
$(seletor).html(''); 
$(seletor).text('');
 

 
 

刪除代碼
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="del">追加</button>
<button id="detach">追加2</button>
<ul class="comment">
    <li>倚天屠龍</li>
    <li id="item">張無忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script> $("#del").click(function(){ alert(1); //remove()刪除,表示整個標籤都刪除(事件也刪除)
        // $("ul").remove();
        var jbtn = $(this).remove(); $(".comment #item").append(jbtn) }); //detach 刪除標籤,事件不刪除 再次點擊detach按鈕時還會有個彈出事件
    $("#detach").click(function(){ alert(1); var jbtn =  $(this).detach(); console.log(jbtn); $('.comment #item').append(jbtn) }) </script>
</body>

</html>
 

 
 

 清空代碼
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="empty">追加</button>
<ul class="comment">
    <li>倚天屠龍</li>
    <li id="item">張無忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script> $('#empty').click(function () { $('.comment').empty(); // $(".comment").html("");
        // $('.comment').text("");
 }) </script>
</body>

</html>
 

 
 

 替換
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="replace">追加</button>
<ul class="comment">
    <li><a href="">倚天屠龍</a></li>
    <li id="item">張無忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script> $(function () { $('#replace').click(function () { $(".comment li a").replaceWith('<span>1</span>') }) }) </script>
</body>

</html>
 

 
 

事件
 
 

(1)常見事件
 
 

(2)觸發方式
 

 
 
$('#btn1').click(function () { alert('666'); })
 $('#btn1').on('click',function () { alert('66666') })
 

 
 

常見事件
 

 
 
click //點擊
hover //鼠標移動上去
focus //光標觸發時間
blur //光標移走觸發事件
change //內容發生變化，input，select等 觸發另外一個標籤事件
keyup //鍵盤按下
keyup //鍵盤擡起
keyCode//獲取鍵盤值
mouseover //事件只要你在綁定該事件的對象上移動就會一直觸發
mouseenter  //事件只觸發一次，表示鼠標進入這個對象
 

 
 

案例 一
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .d1, .d2 { background-color: green; width: 100px; height: 100px;
        }
    </style>
</head>
<body>
<button id="btn1">點擊</button>
<div class="d1"></div>
<input type="text" id="i1">

<div class="d2"></div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // $('#btn1').click(function () {
    // alert('666');
    // })
    // $('#btn1').on('click',function () {
    // alert('66666')
    // })

    //鼠標移動上去以前是紅色 移動上去是綠色
 $('.d1').hover( //鼠標移動上去
        function () { $(this).css('background-color', 'green') }, //鼠標移動出來
        function () { $(this).css('background-color', 'red') } ); //獲取光標觸發的事件
 $('#i1').focus(function () { $(this).css('background-color', 'red') }); //光標移走觸發的事件
 $('#i1').blur(function () { $(this).css('background-color', 'green') }); $(window).keyup(function (e) { if (e.keyCode === 16) { console.log('這是shift鍵') } }) //mouseover事件只要你在綁定該事件的對象上移動就會一直觸發
    // $('.d2').mouseover(function () {
    // console.log('xxxx')
    // })

    //mmouseenter事件只觸發一次，表示鼠標進入這個對象
 $('.d2').mouseenter(function () { console.log('2222'); }); </script>

</body>
</html>
 

 
 

批量操做案例
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>操做</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>張三</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>張三2</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>張三3</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>張三4</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>


    </tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
    var flag = false; //shift 按鍵按下的時候
 $(window).keydown(function (e) { // console.log(e.keyCode);
        if (e.keyCode === 16) { flag = true; } else { return; } }) //shift按鍵被擡起的時候
 $(window).keyup(function (e) { // console.log(e.keyCode);
        if (e.keyCode === 16) { flag = false } }) $("select").change(function (e) { //匹配 父級 選擇兄弟元素(除了本身自己) td標籤 第一個 :checkbox
        // var a=$(this).parent().siblings().first().find(":checkbox")
        // console.log(a);

        // prop() 方法設置或返回被選元素的屬性和值。
        // $(':checkbox').prop('checked', true)

        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); //獲取匹配到的checkbox值
 console.log(isChecked); if (flag && isChecked){//2邊條件都成立的時候
            var value=$(this).val(); var $select = $("input:checked").parent().parent().find("select"); $select.val(value); } }) </script>
</body>
</html>

 

 
 

事件冒泡 點擊子時間 會觸發 父的事件
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> #d2 { height: 100px; width: 100px; background-color: green;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>

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

<script> $('#d1').click(function () { alert('父級標籤') }) //執行子標籤的事件會觸發父標籤的
 $('#d2').click(function () { alert('子標籤') //return false 能夠避免上面的狀況
        return false }) </script>
</body>
</html>
 

 
 

事件委託  可讓新增條目 有刪除功能
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*底部黑框樣式*/ .shadow { position: fixed; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; bottom: 0; right: 0; z-index: 999;
        } .modal { position: fixed; width: 400px; height: 200px; background-color: #ffffff; top: 50%; left: 50%; z-index: 1000; margin-top: -100px; margin-left: -200px;
        } .hide { display: none;
        }
    </style>

</head>
<body>
<button id="all">全選</button>
<button id="reverse">反選</button>
<button id="cancel">取消</button>
<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>愛好</th>
        <th>操做</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老闆</td>
        <td>開車</td>
        <td>
            <button class="b1">刪除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="b1">刪除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗頭、不翻車、不要臉</td>
        <td>
            <button class="b1">刪除</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="modal hide">
    <div>
        <lable for="name">姓名</lable>
        <input type="text" id="name">
    </div>
    <div>
        <lable for="hobby">愛好</lable>
        <input type="text" id="hobby">
    </div>
    <div>
        <button class="bt2">保存</button>
    </div>
</div>

<div class="shadow hide"></div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    //全選
 $("#all").click(function () { $(":checkbox").prop('checked', true) }); //取消
 $("#cancel").on("click", function () { $(":checkbox").prop("checked", false) }) //反選
 $("#reverse").click(function () { //for循環全部的checkbox,挨個判斷原來選中就取消選中，原來沒選中就選中
        var $checkbox = $(":checkbox"); for (var i = 0; i < $checkbox.length; i++) { var status = $($checkbox[i]).prop('checked'); //獲得當前選中標籤的值的狀態
            // console.log(status);
            //而後把結果反着來
 $($checkbox[i]).prop('checked', !status); } }) //點擊新增,彈出模態框
 $('#add').click(function () { //底部黑影shadow 彈出框modal
 $('.modal,.shadow').removeClass('hide') }) //彈出框保存數據步驟
 $('.bt2').click(function () { //1.獲取用戶輸入信息
        var name = $('#name').val(); var hobby = $('#hobby').val(); //2.建立標籤 數據加入標籤
        var s = "<tr>" +
            " <td><input type=\"checkbox\"></td>" +
            " <td>" + name + "</td>" +
            " <td>" + hobby + "</td>" +
            " <td>" +
            " <button class=\"b1\">刪除</button>" +
            " </td>" +
            " </tr>"
        // var s = "<tr class='cc'></tr>"
        //3.將建立好的標籤,添加到表格裏面去
 $('tbody').append(s); //4.隱藏對話框
 $(".modal,.shadow").addClass('hide') //5清空用戶輸入內容
 $('#name').val(''); $('#hobby').val(''); }) //事件委託,將button的click事件委託給了祖父tbody標籤,實現的效果就是點擊button按鈕,
    // 觸發tbody的click事件,$(this)表示的仍是被點擊的那個標籤,只能使用on click
 $('tbody').on('click','.b1',function () { $(this).parent().parent().remove(); }); </script>
</body>
</html>

 
 
 
 
 
 
 

 
 

 頁面加載 解決了代碼執行順序
 

 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .d1 { background-color: red; width: 100px; height: 100px;
        }
    </style>

    <!--這樣是不生效的 由於先執行操做 後找的標籤-->
    <!--<script>-->
        <!--$('.d1').click(function () {-->
            <!--alert('xxx');-->
        <!--})-->
    <!--</script>-->
</head>
<body>
<div class="d1"></div>
<script src="jquery-3.3.1.min.js"></script>
<script src="01test.js"></script>
<script>
    //jquery 頁面加載完成以後作某些事情的操做 解決了上面問題
 $(function () { $('.d1').click(function () { alert('xxx'); }) }) </script>
</body>
</html>
 

 
 

動畫效果 animate 自定義
 

 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>點贊動畫示例</title>
  <style> div { position: relative; display: inline-block;
    } div>i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">點贊</div>
<script src="jquery-3.3.1.min.js"></script>
<script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ opacity: 0  //1秒以後透明度變爲0，注意寫法，animate({屬性：值},毫秒數)
 }, 1000) }) </script>
</body>
</html>
 

 

 
 

做業1
 

 
 

 
 
 

val和text方法的區別
 

 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<span>hello</span>
<div class="c1">你好 <span>xx</span>
</div>

<input id="username" type="text">

<input type="checkbox" name="hobby">籃球 <input type="checkbox" name="hobby" value="2">足球 <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女 <select name="" id="s1">

    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>

</select>

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>
 

 

 
 

 
 
$('span').text(); $('.c1').text(); $('.c1').html(); $('#usernmae').val() 是空的 由於input val默認是from表單提交的值 $('input:checkbox').val(); 默認是on $('input:checkbox').val([1,2]); 有val的值就得就會被選中 $('input:checkbox').prop('checked',true); 給他們設置屬性值 讓他們都選中 $('select').val() select能夠選中val $('span').text('xxx') 改掉了標籤裏面值
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程