文章目录

先懂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对象的转换

《Python进阶》学习笔记

Leetcode 3161. 物块放置查询

leetcode 60 排列序列

一个docker容器暴露多个端口

微服务实践之使用 Visual Studio 2022 调试Dapr 应用程序

wpf附加属性理解 WPF附加属性

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以太網驅動總結