前端學習-jQuery-2

時間 2019-11-06

標籤前端學習 jquery 欄目 JQuery 简体版

原文原文鏈接

老師的博客地址：https://www.cnblogs.com/yuanchenqi/articles/6070667.htmlcss

day44html

屬性操做：jquery

--------------------------屬性
$("").attr();取屬性值

$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS類
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代碼/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")  修改屬性值


關於屬性操做，固有屬性用prop,自定義屬性用attr

　Jquery 遍歷：this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>

<p>000</p>
<p>111</p>
<p>222</p>

<script>
    arr=[11,22,33];
//    方式一
//    $.each(arr,function (x,y) {
//        console.log(x);
//        console.log(y)
//    })
    //方式2
    $("p").each(function () {
        console.log($(this))
    })
    
</script>

</body>
</html>

　prop 以及each 的實例正反選：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>


     <button onclick="selectall();">全選</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反選</button>

     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>

     <script>
         // 這裏咱們使用each遍歷input標籤，由於這個input是html自帶元素，$(this)當前遍歷對象，因此這裏咱們用prop方法，咱們把checked設置爲true
         function selectall() {
             $("input").each(function () {
                 $(this).prop("checked",true)
             })
         }
         function cancel() {
             $("input").each(function () {
                 $(this).prop("checked",false)
             })
         }
         function reverse() {
             $("input").each(function () {
                 if ($(this).prop("checked")){
                     $(this).prop("checked",false)
                 }
                 else {
                     $(this).prop("checked",true)
                 }
             })

         }
     </script>

</body>
</html>

文檔處理：htm

內部插入標籤對象

外部插入標籤blog

替換ip

刪除rem

複製