jquery基礎知識2

阿新 • • 發佈：2018-09-29

use rem classname lin span toggle fff dex alert

1.js和jquery對象的轉換

　　js==>jquery對象　　$(js對象)

　　jquery==>js　　　　jq對象[index]　　jq對象.get(index)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li class="item">qing</li>
        <li>qingqing</li>
        <li>qingqingqing
     
</ul>
    <script src="jquery.js"></script>
    <script>
        //js innerText innerHTML value
        //標簽屬性的操作  .src  .href .id .claaName
        //樣式 .style.屬性
        //DOM操作

        var datas = ["red","green","yellow"]
        //1.jquery對象轉化成js對象（js包含jquery）
        // console.log($("li")[0]); 

        var item = document.getElementsByClassName("item")[0];
        //讓js對象轉換成jquery對象
        // console.log($(item));
        console.log($(item).css("color","red").click(function(){
            alert(1111);
        }))
        //鏈式編程
        $(item).css("color","red").click(function(){
            alert( 
111);
        })
        for(var i = 0;i < datas.length;i++){
            $("li")[i].style.backgroundColor = datas[i];
        }
    </script>
</body>
</html>

View Code

2.選擇器：選中標簽對應的jq對象

　　jq高級選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
       <p id="a">qing</p>
        <p>q</p>
        <p>ing</p>
    </div>
    <p>zhang</p>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // $(".box>p").css("color","green");
            //挨著的下一個兄弟元素
            console.log($("#a+p"));
        })
    </script>
</body>
</html>

View Code

　　基本過濾選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            var i = 2;
            $(`ul li:eq(${i})`).css("color","red");
            $("ul li:first").css("color","red");
            $("ul li:last").css("color","red");
        })
    </script>
</body>
</html>

View Code

　　屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"]{
            border: none;
            outline: none;
            width: 200px;
            height: 100px;
            font-size: 30px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form action="#">
        <input type="text" name="user" aaa="bbb">
        <input type="password" name="pwd">
        <input type="submit" >
    </form>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log($("input[type=text]"));
        })
    </script>
</body>
</html>

View Code

　　篩選選擇器

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

</head>
<body>
    <div class="father">
        <p>qing</p>
        <a href="#">asd</a>
        <span>qwe</span>
        <div class="g">
            <span>91</span>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // console.log($(".father").find(".g"));
            $(".g").click(function () {
                //js對象
                // console.log(this);
                // $(this).css("color","red");
            });
            //find()方法會找到後代無論是子代還是子孫
            // console.log($(".father").find("span"));
            //誰觸發了點擊事件this就是誰
            // $(".father").find(".g>span").click(function () {
            //     console.log(this)
            // })
            //只找子代
            console.log($(".father").children("span"));
            //parent()獲取的是親爹
            console.log($(".g span").parent());
        })
    </script>
</body>
</html>

View Code

3.siblings方法（排他思想）

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

</head>
<body>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
    <script src="jquery.js"></script>
<script>
    $(function () {
        //點元素 變紅色
        $("ul li").click(function () {
            $(this).css("color","red").siblings("li").css("color","black");
        })
    })
</script>
</body>
</html>

View Code

4.選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 400px;
            height: 300px;

        }
        .box ul {
            width: 100%;
            overflow: hidden;
        }
        .box ul li{
            float: left;
            width: 50px;
            height: 70px;
            margin: 0 10px;
            background-color: red;
            text-align: center;
            line-height: 70px;
        }
        a{
            color: #fff;
        }
        .active{
            width: 100%;
            height: 100px;
            background-color: green;
            display: none;
        }
        </style>
</head>
<body>
    <div class="box">
        <ul>

        </ul>
        <div class="active">

        </div>
        <form action="#">
            <input type="text" value="123">
        </form>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            console.log($("input[type=text]").val("111"));
            //初始化操作
            $(".box ul").html(`<li>
                <a href="javascript:void(0);">張三</a>
            </li>
            <li>
                <a href="javascript:void(0);">李四</a>
            </li>
            <li>
                <a href="javascript:void(0);">王五</a>
            </li>
            <li>
                <a href="javascript:void(0);">趙六</a>
            </li>`);
            //點擊a標簽的時候執行的操作
            $(".box ul li a").click(function () {
                $(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
                var textVal = $(this).text();
                var newVal = `<h1>${textVal}</h1>`;
                $(".active").show().html(newVal);
            })
        })
    </script>
</body>
</html>

View Code

5.動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">動畫</button>
    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                // $(".box").hide();
                //toggle自己判斷顯隱狀態
                $(".box").stop().toggle(1000);
            })
        })
    </script>
</body>
</html>

View Code

6.自定義動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button>動畫</button>
    <div></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {

            // $(‘div‘).animate(
            // {
            //     param1: value1,
            //     param2: value2
            // },
            // speed,
            // function() {
            //     /* stuff to do after animation is complete */
            // });
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</body>
</html>

View Code

7.html的標簽屬性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tt{
            color: red;
        }
        .active{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //初始化操作
            // $(".box").html("<a href=‘http://www.baidu.com‘>百度一下</a>");
            $(".box").html("<a id=‘anchor‘></a>");
            $("#anchor").attr("href","http://www.baidu.com").text("百度一下");
            console.log($("#anchor").attr("id"));
            $("#anchor").attr({
                title:"123",
                class:"tt"
            });
            $("body").click(function () {
                // $("#anchor").attr("class","active");
                $("#anchor").addClass("active");
                //移除多個類名
                $("#anchor").removeClass("active tt");
                $("#anchor").removeAttr("title href");
            })

        })
    </script>
</body>
</html>

View Code

8.prop標簽對象屬性操作

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

</head>
<body>
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // console.log($("input[type=radio]").eq(0).attr("checked"));
            console.dir($("input[type=radio]").eq(1).prop("checked"));
            $("input[type=radio]").eq(1).prop("abc","123");
            console.log($("input[type=radio]").eq(1));
        })
    </script>
</body>
</html>

View Code

9.控制元素顯示隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <button>隱藏</button>
    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // var isShow = true;
            // $("button").click(function () {
            //     if (isShow){
            //         $(".box").addClass("hidden");
            //         isShow = false;
            //     } else{
            //         $(".box").removeClass("hidden");
            //         isShow = true;
            //     }
            // })

            $("button").click(function () {
                $(".box").toggleClass("hidden");
            })
        })
    </script>
</body>
</html>

View Code

10.選項卡的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 400px;
            height: 300px;
        }
        .box ul{
            width: 100%;
            overflow: hidden;
        }
        .box ul li{
            float: left;
            width: 50px;
            height: 70px;
            margin: 0 10px;
            background-color: red;
            text-align: center;
            line-height: 70px;
        }
        a{
            color: #fff;
        }
        .active{
            width: 100%;
            height: 100px;
            background-color: green;
            display: none;
        }
        .show{
            display: block;

        }
    </style>
</head>
<body>
   <button class="next">下一張</button>
    <div class="box">
        <ul>
            <li>
                <a href="javascript:void(0);">張三</a>
            </li>
            <li>
                <a href="javascript:void(0);">李四</a>
            </li>
            <li>
                <a href="javascript:void(0);">王五</a>
            </li>
            <li>
                <a href="javascript:void(0);">趙六</a>
            </li>
        </ul>
        <div class="active"></div>
        <div class="active"></div>
        <div class="active"></div>
        <div class="active"></div>
    </div>
   <script src="jquery.js"></script>
   <script>
       $(function () {
            var count = 0;
            $(".next").click(function () {
                console.log(1)
                count++;
                $(‘ul li‘).eq(count).css(‘backgroundColor‘,‘green‘).siblings(‘li‘).css(‘backgroundColor‘,‘red‘);
                $("div.active").eq(count).addClass("show").html("abc").siblings("div.active").removeClass("show");
            })
            $(".box ul li a").click(function () {
                $(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
                //index()方法獲取索引
                console.log($(this).parent().index());

            })
       })
   </script>
</body>
</html>

View Code

jquery基礎知識2

use rem classname lin span toggle fff dex alert 1.js和jquery對象的轉換　　js==>jquery對象　　$(js對象) 　　jquery==>js　　　　jq對象[index]　　jq對象.get(in

CSS基礎知識2

empty int align import 文件中 lean tex 文檔 nbsp 1 基本規範1.1 文件命名規範基本樣式：base.css全局樣式：global.css框架布局：layout.css字體樣式：font.css鏈接樣式：link.css打印樣式：pri

javascript基礎知識2

script mil 語句 () 三元運算符 true 表達檢測做的 1:if……else……就是根據某種條件執行某些語句，不執行某些語句。if(){}else if(){}else if(){}else{ }else只能有一個，並且一定要放在最後。表示所有的分支都不滿

基礎知識2

普通用戶修改配置 yellow {} 卸載 x86_64 檢查 med sta 指定yum軟件源服務端: 讓光盤內容出現,在系統的一個目錄下 mount /dev/cdrom /nsd 客戶端: 書寫一個配置文件,指定服務端位置配置

linux雲自動化運維基礎知識2（系統的基本操作）

linux運維切換用戶如圖所示：在命令提示符之後輸入su - username 註意：高級用戶切換到低級用戶不需要密碼，低級用戶切換身份需要密碼。註意：此處密碼無回顯。2.虛擬控制臺：Ctrl+Alt+F(1|7) 進入圖形 Ctrl+Alt+F(2~6) 進入虛擬控制

jquery基礎知識

select 簡潔方便如果 lin 一個 container rip asc 一、jquery的基本介紹　　1、什麽是jquery? 　　　　jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML 、documents、events、實

python零基礎學習-基礎知識2-代碼初見

name clas nco and tin put 輸出 strong break 註釋及引號的使用 #我是一行註釋 ‘‘‘ 那麽巧, 我也是一行註釋 ‘‘‘ print(‘‘‘打印多行字符串-第一行打印多行字符串-第二行 ‘‘‘) print("我在嘗試引號嵌套‘我在

2017-9-19Linux基礎知識(2)

linux2017-9-19Linux基礎知識一、操作系統的進階歷史1、單用戶單任務2、批處理3、多用戶多任務4、Unix的誕生5、Linux的誕生一、操作系統的進階歷史1、單用戶單任務在上回章節說道，早期的操作系統是單用戶單任務，也就是說，一次只能運行一個任務，時間等待很長，而且任務出錯之後你還沒辦法去

jQuery 基礎知識

first cte nextall eight 當前基本選擇器 eve msg all 一、序言　　jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後的又一個優秀的JavaScript代碼庫(JavaScript框架)。jQuery設計

【Shell】-- 基礎知識(2)

命令別名進程 ply exp ron -s 歷史 size 接收 1、Shell腳本運行方式　　創建Shell腳本文件，一般以.sh結尾（如：example.sh）　　Shell腳本運行方式如下：添加 ‘x’ 執行權限（相對或絕對路徑執行）使用bash或sour

做馬戲團demo所學相關u3d基礎知識2

ont tro spa strong gpo blog family log bsp a.要獲取對方腳本組件上的值，要先獲取對象。 b." cd -= Time.deltaTime;"是倒計時。 c." Random.Range(-0.5f,0.5f)"隨機數。做馬戲團de

2D拾荒者開發所學U3D的基礎知識2

nbsp triger 結束 mat ger set 動畫 exit duration a.動畫狀態機setting是幀動畫，可以把duration設置為0哦. b.triger就是當triger一結束自動切換狀態，所以要設置時長。雙擊可以查看動畫時長。exitTime多久

oracle基礎知識2

需要數字 insert add llb 修改表 into 分享圖片記錄什麽是連接：使用連接可以從多個表中查詢數據。 Select table1.column,table2.column from table1, table2 where table1.column

jquery基礎知識基本使用概述（1）

手動 ring 一次 BE 集合 AS asc sta tar jQuery基本介紹為什麽要學jQuery 【01-讓div顯示與設置內容.html】使用JS操作DOM的時候，會遇到以下的一些缺點： //1. 獲取元素的方法太少且長，麻煩。//2. 遍歷偽數組很麻煩

linux基礎知識-2

提示命令 ron 了解同進程顏色顯示顯示器 clas 安全一、內核 ??操作系統是程序運行的環境，而內核是操作系統的核心，負責與硬件進行交互。如按下鍵盤，移動鼠標，網絡傳輸，訪問內存，磁盤等。 ?? 二、程序 ??程序是存儲在計算機硬盤裏的文件。是一系列基本指令，

Python開發基礎知識 2.變量 ( *arg, **kwargs )

python開發 nbsp brush 若有 return pri bsp true justin 變量 *args 和 **kwargs ( *和**為本體，名稱為通俗的名稱約定 ) *args 用於函式定義。可將不定數量的參數傳遞給一個函數，傳入函式的引數，會先以

AD電子設計基礎知識2

抗干擾設計原則 1）電源線設計 1.選擇合適的電源 2.儘量加寬電源線 3.保證電源線、底線走向和資料傳輸方向一致 4.使用抗干擾元器件（磁珠、電源濾波器） 5.電源入口新增去耦電容 2）地線設計 1.模擬地和數字地分開 2.儘量採用單點接地 3.儘量加寬地線 4將敏感電路連線到穩定的接

數理統計基礎知識2

數理統計基礎知識 1. 總體、個體和樣本 2. 統計量與充分統計量統計量常用統計量順序統計量充分統計量 1. 總體、個體和樣本在使用數理統計方法研究某個實際問題時，往往把所研究物

前端基礎知識2

作用域理解就是一塊"地盤", 一個程式碼段所在的區域它是靜態的(相對於上下文物件), 在編寫程式碼時就確定了分類全域性作用域函式作用域沒有塊作用域(ES6有了) 作用

軟體測試基礎知識2

測試的四個階段： 1）單元測試（屬於白盒測試）測試函式開發人員完成一個函式，測試人員檢查一個函式檢查函式是否和lld（詳細設計說明書）一致由開發人員完成 2）整合測試（屬於灰盒測試）測試模組開發人員完成一個模組，測試人員檢查一個模組檢查模組是否和hld（概要設

jquery基礎知識2

相關推薦