一文詳解javascript jQuery庫，極大簡化網頁互動程式設計

什麼是jQuery？

jQuery和JavaScript的作用一樣，都是負責網頁行為操作，增加網頁和使用者的互動效果的，而且jQuery簡化了JavaScript程式設計，jQuery實作互動效果更簡單。

jQuery也相容了現在主流的浏覽器，增加了程式員的開發效率。

可以通過jQuery官網擷取庫檔案：

引入jquery.js檔案：

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

jQuery入口函數：（速度比window.onload更快）

<script>
    $(document).ready(function(){
        alert("hello jQuery");
    });
</script>           

簡寫：

$(function(){
    alert("Hello jQuery");
});           

元素的隐藏、展現

• $box.hide()：隐藏，可以添加參數，表示消失時間
• $box.show()：展現，可以添加參數，表示出現時間
• $box.fadeOut()：慢慢消失，可以添加參數，表示消失時間
• $box.fadeIn()：慢慢出現，可以添加參數，表示出現時間

常用選擇器

• $('#myId')：選擇id為myId的标簽
• $('.myClass')：選擇class為myClass的标簽
• $('div')：選擇所有的div标簽
• $("a[target='_blank']")：選取所有target屬性值等于"_blank"的<a>元素

項目目标：點選叉号，關閉彈窗。

$(function(){
	let $container = $("#container");
	// console.log($container);
	let $btn = $("#btn");

	$btn.click(function(){
		$container.css({'display': 'none'});
	});
});           

篩選選擇器

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>

    $(function(){
        $("li:first").css({"color": "red"});
        $("li:eq(1)").css({"color": "blue"});
        $("li:odd").css({"color": "pink"});
        $("li:even").css({"color": "green"});
    });
</script>           

選擇集轉移

• $('#box').prev(); 表示選擇id是box元素的上一個的同級元素
• $('#box').prevAll(); 表示選擇id是box元素的上面所有的同級元素
• $('#box').next(); 表示選擇id是box元素的下一個的同級元素
• $('#box').nextAll(); 表示選擇id是box元素的下面所有的同級元素
• $('#box').parent(); 表示選擇id是box元素的父元素
• $('#box').children(); 表示選擇id是box元素的所有子元素
• $('#box').siblings(); 表示選擇id是box元素的其它同級元素
• $('#box').find('.myClass'); 表示選擇id是box後代元素的class等于myClass的元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    
    <ul id="list">
        <li class="box1">4-1</li>
        <li class="box1">4-2</li>
        <ul>
            <li class="box1">4-3-1</li>
            <li class="box2">4-3-2</li>
            <li class="box2">4-3-3</li>
        </ul>
    </ul>
   
    <li>5</li>
    <li>6</li>
</ul>
<script>

    $(function(){
        // $("#list").prev().css({'color':'red'});
        // $("#list").prevAll().css({'color':'red'});
        // $("#list").next().css({'color':'red'});
        // $("#list").nextAll().css({'color':'red'});
        // $("#list").children(".box1").css({'color':'red'});
        // $("#list").siblings().css({'color':'red'});
        $("#list").find(".box1").css({'color':'red'});
    });
</script>           

對内容、文本操作

• $box.html()：擷取、修改HTML内容
• $box.text()：擷取、修改文本資訊
• $box.val()：擷取、修改文本的值

<div id="box">hello</div>
<input type="text" name="" id="" value="100">
<a href="" id="mylink">黑貓程式設計</a>
<script>
    let $box = $("#box");
    console.log($box.html());
    console.log($box.text());

    $box.html("<span style='color:red'>你好</span>");
    $box.append("<span style='color:green'>你好</span>");

    let $input =$("input");
    $input.val("200");

    let $a = $("a");
    $a.prop({"href":"https://noi.hioier.com/", "target":"_blank"});
</script>           

事件傳遞

<div id="box1">
    <div id="box2">

    </div>

</div>

<button>停止</button>

<script>
    $("#box1").on("click", function(e){
        console.log("click box1");
    });

    $("#box2").on("click", function(e){
        console.log("click box2");

        return false;  // 阻止事件冒泡
    });

    $("button").on("click", function(e){
        $("#box1").off("click");
        $("#box2").off("click");
    });
</script>           

對類的操作

• $box.addClass(class_name)：添加某個類
• $box.removeClass(class_name)：删除某個類
• $box.hasClass(class_name)：判斷某個類是否存在

<div></div>

<script>
    $(function(){
        let $div = $("div");
        console.log($div);
        $div.on("click", function(e){
            $(this).addClass("active");
            console.log($(this).hasClass("active"));
        });
    });
</script>           

相關推薦

• Javascript對象和頁籤實作
• 一文詳解javascript輪播圖
• Javascript簡介和基礎資料類型
• 一文詳解Javascript定時器
• 一文詳解Javascript DOM樹結構
• 一文詳解Javascript滑鼠事件，拖拽原理
• Javascript點選按鈕控制圖檔切換
• 一文詳解javascript函數和面向對象程式設計

視訊講解

視訊加載中...