文章目錄

先懂js：我的js博客

JQuery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。
jQuery設計的宗旨是 Write Less, Do More! ，即倡導寫更少的代碼，做更多的事情。
輕量級的js庫，jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

下載/複製保存
https://jquery.com/download/
將文件放在自己的項目下調用

jQuery對象

基本語法 $(selector).action()

尋找元素

選擇器

基本選擇器

通配符：$(’*’);
根據Id：$("#id");
根據class：$(".class");
根據標籤名：$(“element”);
多項選擇：$("#p1,div,.class");

層級選擇器

後代選擇器：$(’.div1 p’);
子代選擇器：$(’.div1>p’);
兄弟選擇器：$(’.div1~p’);(向下找所有兄弟p標籤)
毗鄰選擇器：$(’.div1+p’);

基本篩選器

第一個：$(".div ul li:first");
最後一個：$(".div ul li:last");
索引(從0開始)：$(".div ul li:eq(2)");
小於索引：$(".div ul li:lt(4)");
大於索引：$(".div ul li:gt(4)");

屬性選擇器

$("[id=‘div1’]"); $("[wolf=‘wolf’];

表單選擇器

$(":text");
$(":button");

篩選器

過濾篩選器

$(“li”).eq(2)，用於傳參
$(“ul li”).first();
$(“li”).hasclass(‘test’);判斷是否有class=‘test’

查找篩選器

子代：$(".div1").children();
- $(".div1").children(’.p1’);
後代：$(".div1").find(’.p1’);
$(".div1").next();
$(".div1").nextAll();
$(".div1").nextUntil(".p6");向下一直到.p6，不包括.p6
$(".div4").prev(‘p’);
$(".div4").prevAll(‘p’);
$(".div4").prevUntil(‘p’);向上一直到.p6，不包括.p6
$(".div4").parent(); 父標籤
$(".div4").parentsUntil(".div1"); 叔標籤
$(".div4").sibling(‘p’); 上下兄弟標籤

示例

1. 二級菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        .hide{
            display:none;
        }
    </style>
    <script src="jquary-3.4.js"></script>
    <script>
        function func1(self){
            $(self).next().removeClass('hide');		// 顯示當前菜單
            $(self).parent().siblings().children('.con').addClass('hide');		// 隱藏其他菜單，給其他菜單加上display:none的class
        }
    </script>
</head>
<body>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜單1</div>
        <div class="con">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜單2</div>
        <div class="con hide">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜單3</div>
        <div class="con hide">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
    <div class="menu">
        <div class="title" onclick="func1(this)">菜單4</div>
        <div class="con hide">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>
</body>
</html>

效果：點擊某一菜單時，顯示其菜單，並隱藏其他菜單，僅兩行代碼

2.上面的示例中將菜單與內容盒子分開
tip：$(self).attr(‘x’)獲取屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
            margin:0;
        }
        #div1{
            width:800px;
            height:50px;
            line-height: 50px;
            background: darkturquoise 100px 0;
            margin-left: 500px;
            text-align: center;
            border-bottom: purple solid 3px;
        }
        .title{
            float: left;
            width:60px;
        }
        .sel{
            color:white;
            background-color: black;
        }
        #div2{
            margin-left: 500px;
            width:800px;
            height:1000px;
            border-left: darkturquoise 1px solid;
            border-right: darkturquoise 1px solid;
        }
        .hide{
            display: none;
        }
        .con{

        }
    </style>
</head>
<body>
    <div id="div1">
        <div x="con1" class="title sel" onmouseover="func1(this)">菜單1</div>
        <div x="con2" class="title" onmouseover="func1(this)">菜單2</div>
        <div x="con3" class="title" onmouseover="func1(this)">菜單3</div>
    </div>
    <div id="div2">
        <div id="con1" class="con">111111111111</div>
        <div id="con2" class="con hide">2222222222222</div>
        <div id="con3" class="con hide">312e12e12e1</div>
    </div>
<script src="jquary-3.4.js"></script>
<script>
    function func1(self){
        $(self).addClass('sel').siblings().removeClass('sel'); // 移除菜單標題選中樣式
        $(self).parent().next().children('#'+$(self).attr('x')).removeClass('hide').siblings().addClass('hide');		// 隱藏原來的內容，顯示當前菜單內容，通過自定義的x屬性值，與內容的id，相互關聯
    }
</script>
</body>
</html>

屬性

jQuery API 中文文檔

$(self).attr('old', 'new');	// 改變屬性值,可以改變自定義屬性值
$(self).attr('xxx');	// 找屬性

$(self).attr('checked','true');	// 給複選框打勾
$(self).removeAttr('checked');		// 取消打勾

$(self).prop('checked',true); // 給複選框打勾,
$(self).prop('checked',false);	// 取消打勾

$(self).html()	// 獲取html
$(self).text()	// 獲取文本
$(self).val();		// 獲取值，對於checkbox沒選中時默認爲on
$(' :checkbox').val();	// --> on
$(' :text').val('xxx');	// 給輸入框一個值xxx
$(' :text').val();	// 不加參數則是獲取輸入框的值

var p1=$('p');	// 創建一個p標籤
$(".div1").append(p1);	// 在.div1中插如p1作爲子標籤，在最後插入
p1.appendTo($('.div1'));	// 將p1標籤插入.div1中
.prepend(p1);	// 在最前面插入
p1.prepend();

.after();	// 作爲兄弟標籤，在後面插入標籤
.insertafter();  //插入標籤與被插入標籤換位置，類似append/appenTo
.before();	// 作爲兄弟標籤，在前面插入標籤
.insertbefore();

$('div').remove();		// 刪除整個標籤
$('p').empty();		// 清空標籤文本

$('p').clone();	// 複製p標籤
$("p").clone().prependTo("div");	// 複製一個p標籤，再作爲子標籤添加到div標籤中，在前面插入

$('body').scrollTop();		// 當前滾輪滾動高度

onscroll='func1()';		// 監聽滾輪滾動事件

$('.div1').offset();		// 獲取當前標籤距離文檔上，左的高度，有top/left屬性
$('.div1').offset().top;
$('.div1').offset().left;
$('.div1').height();		// 獲取標籤當前高度
.Width()
$('.div1').innerheight(false);	// height(+padding) 包括邊距，不包括邊框,參數true時包括邊框
.innerWidth([options])
$('.div1').outerheight([options]); 	// 	height+padding+border(+margin) true/false
.outerWidth([options])

$(window).height;	// 瀏覽器窗口高度
$(document).height;		// 獲取整個文檔高度

$('.div1').show(time);	// 顯示隱藏的標籤
$('.div1').hide(time);	// 隱藏顯示的標籤
$('.div1').toggle(time);		// 切換標籤隱藏或顯示狀態，都可加參數轉化時間

$('.div1').fadeIn(1000);	// 漸變隱藏
$('.div1').fadeOut();	// 漸變顯示
$('.div1').fadeToggle();	// 漸變切換
$('.div1').fadeTo(1000, 0.5);	//改變透明度

$('.div1').slideDown();		// 滑出
$('.div1').slideUp();		// 滑去
$('.div1').slideToggle();	// 滑動切換，

回調函數

<script>
	$('#div1').show(1000,function(
		alert('顯示成功');
	));
	// 在前面的動作完成後操作的函數，叫回調函數
</script>

jQuery遍歷

l=['1','2','3','4'];
$.each(li, function(index,ele)){
	console.log(index,ele);		// 得到index和ele，類似py的枚舉
}

d={'1':'1','2':'2'};
$('ul li').each(d,function(key,value)){
	console.log(key,value);
}

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
<script src="jquary-3.4.js"></script>
<script>
    $('ul li').each(function(){
	console.log($(this).html());	// 直接得到標籤的文本
	//.text()
	//.val()
})
</script>
</body>
</html>

示例

示例一：全選，全部取消選擇，反選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
            margin:0;
        }
        td{
            border: 1px red solid;
            padding: 5px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4</td>
        </tr>
    </table>
    <input type="button" onclick="sel_all()" value="全選">
    <input type="button" onclick="nsel_all()" value="全取消">
    <input type="button" onclick="reverse_sel()" value="反選">
<script src="jquary-3.4.js"></script>
<script>
    function sel_all(){
        $('table :checkbox').each(function(){   // 遍歷table標籤中的所有checkbox
            $(this).prop('checked',true);
        });
    }
    function nsel_all(){
        $('table :checkbox').each(function(){
            $(this).prop('checked',false);
        });
    }
    function reverse_sel(){
        $('table input:checkbox').each(function(){
            if($(this).prop('checked')){
                $(this).prop('checked',false);      // 選擇的取消選擇
            }else{
                $(this).prop('checked',true);       // 沒有選擇的，選擇
            }
        })
    }
</script>
</body>
</html>

示例二：添加與刪除克隆標籤

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

    </style>
</head>
<body>
    <div id="outer">
        <div class="item">
            <input type="button" onclick="func1(this)" value="+">
            <input type="text">
        </div>
    </div>
<script src="jquary-3.4.js"></script>
<script>
    function func1(self){
        var clo=$(self).parent().clone();       // clone item標籤
        clo.children(' :button').val('-').attr('onclick','func2(this)');    // 修改item屬性(觸發函數和value)
        clo.appendTo($('#outer'))           // 添加修改的item標籤
    }
    function func2(self){
        $(self).parent().remove();  // 刪除當前item標籤
    }
</script>
</body>
</html>

示例三：滾動滑輪中，其中一個盒子不動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
            margin: 0;
            border: 0;
            /*background-color: lightgray;*/
        }
        #title{
            background-color: darkturquoise;
            width:100%;
            height:48px;
        }
        #div1{
            width:980px;
            margin:0 auto;
            height:48px;
        }
        .menu{
            display: inline-block;
            line-height: 48px;
            margin-left: 20px;
        }
        .left{
            width:200px;
            position:absolute;
            left:200px;
            top:48px;
            bottom:0;
            border: 2px red solid;
        }
        #right{
            position: absolute;
            left:400px;
            border: 2px gray solid;
            overflow: auto;
            width: 780px;
        }
        .fixx{
            position:fixed;
            top:0;
        }
    </style>
</head>
<body onscroll="fi()">
    <div id="title">
        <div id="div1">
            <div class="menu">菜單1</div>
            <div class="menu">菜單2</div>
            <div class="menu">菜單3</div>
        </div>
    </div>
    <div id="left" class="left fixx">
        <p>1</p><p>2</p><p>3</p><p>3</p>
    </div>
    <div id="right">
        <div class="con"><p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p>
            <p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p><p>第一張</p>
        </div>
        <div class="con"><p>第2張</p>
            <p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p>
            <p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p>
            <p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p>
            <p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p>
            <p>第2張</p>
        </div>
        <div class="con">
            <p>第2張</p><p>第2張</p>
            <p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p><p>第2張</p>
            <p>第2張</p>
        </div>
        <a href="#left" id="back_button">back</a>
    </div>
<script src="jquary-3.4.js"></script>
<script>
    function fi(){
        var s_top=$(window).scrollTop();
        if(s_top>48){
            $('#left').addClass('fixx');
        }else{
            $('#left').removeClass('fixx');
        }
    }
</script>
</body>
</html>

效果：滾動滑輪後，上面和右邊滾動，左邊列表不動

示例三完整版：

滾動滾輪時左邊標題不動

左邊標題鏈接關聯右邊文本動

點擊左邊標題，滑動滾輪改變主要內容以及點擊back時，左邊標題樣式跟着變

可點擊部分光標變成小手 cursor:pointer;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
            margin: 0;
            border: 0;
            /*background-color: lightgray;*/
        }
        #title{
            background-color: darkturquoise;
            width:100%;
            height:48px;
        }
        #div1{
            width:980px;
            margin:0 auto;
            height:48px;
        }
        .menu{
            display: inline-block;
            line-height: 48px;
            margin-left: 20px;
        }
        .l_a{
            display: block;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: center;
            text-decoration: none;
        }
        .l_a:hover{
            color:red;
        }
        .left{
            width:200px;
            position:absolute;
            left:200px;
            top:48px;
            bottom:0;
            border: 2px red solid;
        }
        #right{
            position: absolute;
            left:420px;
            border: 2px gray solid;
            overflow: auto;
            width: 780px;
        }
        .fixx{
            position:fixed;
            top:0;
        }
        .l_a_2{
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div id="title">        <!--最上邊主菜單-->
        <div id="div1">
            <a class="menu">菜單1</a>
            <a class="menu">菜單2</a>
            <a class="menu">菜單3</a>
        </div>
    </div>
    <div id="left" class="left">    <!--左邊標題列表-->
        <a class='l_a' b="1" onclick='re_style(this)' href="#c1">第一章</a>
        <a class='l_a' b="2" onclick='re_style(this)' href="#c2">第二章</a>
        <a class='l_a' b="3" onclick='re_style(this)' href="#c3">第三章</a>
        <a class='l_a' b="4" onclick='re_style(this)' href="#c4">第四章</a>
        <a class='l_a' b="5" onclick='re_style(this)' href="#c5">第五章</a>
    </div>
    <div id="right">        <!--右邊框主要文本-->
        <div id='c1' class="content" a="1">
            <div class="a" style="color:red;">第一章</div>
            <div class="con"><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
        <div id='c2' class="content" a="2">
            <div class="a" style="color:red;">第二章</div>
            <div class="con"><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
        <div id="c3" class="content" a="3">
            <div class="a" style="color:red;">第三章</div>
            <div class="con"><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
        <div id="c4" class="content" a="4">
            <div class="a" style="color:red;">第四章</div>
            <div class="con"><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
        <div id="c5" class="content" a="5">
            <div class="a" style="color:red;">第五章</div>
            <div class="con"><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </div>
        </div>
    </div>
    <div id="back_button" onclick="back_botton();" style="background-color: gray;position: fixed;right: 20px;bottom:20px;cursor:pointer;padding: 10px;">back</div>
<script src="jquary-3.4.js"></script>
<script>
    // 窗口滾動時觸發
    window.onscroll=function (){
        var srcHeight=$(window).scrollTop();
        var docHeight=$(document).height();
        var winHeight=$(window).height();
        
        // 固定左邊章節列表
        if(srcHeight>48){
            $('#left').addClass('fixx');
        }else{
            $('#left').removeClass('fixx');
            $('#left a[b=1]').removeClass('l_a_2');
        }

        // 左邊章節標題樣式關聯右邊文本
        $('#right').children().each(function (){
            var ele_top=$(this).offset().top;
            if(docHeight-srcHeight===winHeight){
                $('#left a:last').addClass('l_a_2').siblings().removeClass('l_a_2');
            }else if(srcHeight>ele_top && srcHeight<ele_top+$(this).innerHeight()){
                var a=$(this).attr('a');
                $('#left a[b="'+a+'"]').addClass('l_a_2').siblings('a').removeClass('l_a_2');
                return;
            }
        })
    }
    
    // 返回的同時清空標題樣式
    $('#back_button').click(
        function(){
            $(window).scrollTop(0);
            $('#left a').removeClass('l_a_2');
        }
    )
    // function back_botton(){
    //     $(window).scrollTop(0);
    // }
    
    // 點擊標題跳轉時 改變標題樣式
    function re_style(self){
        $(self).addClass('l_a_2').siblings().removeClass('l_a_2');
    }
</script>
</body>
</html>

jQuery對象和DOM對象的轉換

obj = document.getElementById('#div')
$(obj) // --> $(DOMobj)：jquery對象
$('#div')[0]	// --> 在jquery對象後加 [0] 即轉換爲DOM對象

前端篇—JQuary

文章目錄

JQuery

jQuery對象

尋找元素

選擇器

篩選器

示例

屬性

回調函數

示例

jQuery對象和DOM對象的轉換

SQL優化-20231016

python學習—基礎概念

前端篇—JQuary

Python—MySQL

前端篇—html

python—matplotlib2

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結