一文詳解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>

視頻講解

ab選項卡切換效果應用到很多網頁中，今天總結了一個超簡單的切換效果，相信你一看就能學會。

<!DOCTYPE html>

<head>

<title>tab選項卡切換</title>

<style>

* {

list-style: none;

}

#outer {

width: 450px;

margin: 150px auto;

background: #fff;

}

#tab {

width: 409px;

border: #ccc solid 1px;

margin: 50px auto 0 auto;

}

#tab li {

float: left;

color: #7c4b04;

height: 30px;

cursor: pointer;

line-height: 30px;

padding: 0 20px;

}

#tab li.current {

color: #fff;

background: blue;

}

#content {

border: 1px solid #ccc;

border-top-width: 0;

height: 223px;

}

#content ul {

line-height: 25px;

display: none;

margin: 0 30px;

padding: 40px 0;

}

#content ul li {

line-height: 28px;

}

#content ul li a {

cursor: pointer;

}

</style>

</head>

<body>

</ul>

<li>

<a>女子網上曬貓被瀘州老窖索賠20萬</a>

</li>

<li>

<a>韓國丈夫陪妻子打疫苗，得知資金也可以打后，瞬間激動得滿眼放光</a>

</li>

<li>美國出現“招魂女孩”，現場表演異能，評委嚇得逃走了</li>

</ul>

<ul>

<li>

<a>CBA三分王耍大牌</a>

</li>

<li>

<a>歐協杯附件賽傳捷報，穆里尼奧羅馬首秀獲勝</a>

</li>

<li>

<a>096期體彩大樂透曬票，看著開獎結果，彩民笑了</a>

</li>

</ul>

<ul>

</ul>

</div>

$(function () {

$("#tab li").mouseover(function () {

var index = $(this).index();

$(this).addClass('current').siblings().removeClass('current');

$("#content ul").eq(index).css("display", "block").siblings().css("display", "none")

})

</script>

</body>

</html>

定義動畫的效果

<!DOCTYPE html>

<html>

<head>

<title>47-jQuery自定義動畫效果</title>

margin: 0; /*外邊距：0*/

padding: 0; /*內邊距：0*/

}

div{

width: 100px; /*寬：100*/

height: 100px; /*高：100*/

background: red; /*背景：紅色*/

margin-top: 20px; /*外上邊距：20*/

}

.two{

background: blue; /*背景：藍色*/

}

</style>

$(function(){

$("button").eq(0).click(function(){ // 第一個按鈕的點擊事件

// 紅色div的左邊距用3秒時間移動到500像素，完成后彈窗

$(".one").animate({marginLeft: 500}, 3000, function(){alert('自定義動畫執行完畢')})

// 藍色div的左邊距用3秒時間移動到500像素，完成后彈窗

$(".two").animate({marginLeft: 500}, 3000, 'linear', function(){alert('自定義動畫執行完畢')})

})

// 累加屬性的點擊事件

$('button').eq(1).click(function(){

// 紅色div的寬度用1秒時間增加100像素，完成后彈窗

$('.one').animate({width:'+=100'}, 1000, function(){alert('累加動畫執行完畢')})

})

</script>

</head>

<body>

</body>

</html>

在線咨詢

上一篇：谷歌瀏覽器不顯示圖片怎么解決
下一篇：自媒體新手必備5個工具網站，再也不用愁素材了，強烈推薦

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一文詳解javascript jQuery庫，極大簡化網頁交互編程

么是jQuery？

元素的隱藏、展現

常用選擇器

篩選選擇器

選擇集轉移

對內容、文本操作

事件傳遞

對類的操作

相關推薦

視頻講解

您的項目需求