Python入门小例子——jQuery例子

已于 2022-04-07 16:13:38 修改
阅读量1.8k 收藏
点赞数
文章标签： python
于 2022-04-02 19:27:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68103748/article/details/123927338
版权

jQuery例子

左侧菜单

Tab切换

在这里插入图片描述

tab 
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .tab_outer{
        margin: 20px auto;
        width: 60%;
    }
    .menu{
        background-color: #cccccc;
        /*border: 1px solid red;*/
        line-height: 40px;
        text-align: center;
    }
    .menu li{
        display: inline-block;
        margin-left: 14px;
        padding:5px 20px;

    }
    .menu a{
        border-right: 1px solid red;
        padding: 11px;
    }
    .content{
        background-color: tan;
        border: 1px solid green;
        height: 300px;

    }
    .hide{
        display: none;
    }

    .current{
        background-color: #2868c8;
        color: white;
        border-top: solid 2px rebeccapurple;
    }
</style>
  • 菜单一
  • 菜单二
  • 菜单三
内容一
内容二
内容三 
  </div>

<script>
      $(".menu li").click(function(){

           var index=$(this).attr("relation");
           $("#"+index).removeClass("hide").siblings().addClass("hide");
           $(this).addClass("current").siblings().removeClass("current");

      });


</script>
table正反选 1554094959942 Title 
 <button>全选</button>
 <button>取消</button>
 <button>反选</button>
 <hr>
 <table border="1">
     <tr>
         <td><input type="checkbox"></td>
         <td>111</td>
         <td>111</td>
         <td>111</td>
         <td>111</td>
     </tr>
     <tr>
         <td><input type="checkbox"></td>
         <td>222</td>
         <td>222</td>
         <td>222</td>
         <td>222</td>
     </tr>
     <tr>
         <td><input type="checkbox"></td>
         <td>333</td>
         <td>333</td>
         <td>333</td>
         <td>333</td>
     </tr>
     <tr>
         <td><input type="checkbox"></td>
         <td>444</td>
         <td>444</td>
         <td>444</td>
         <td>444</td>
     </tr>
 </table>

<script>

        $("button").click(function(){

           if($(this).text()=="全选"){    // $(this)代指当前点击标签

               $("table :checkbox").prop("checked",true)
           }
            else if($(this).text()=="取消"){
               $("table :checkbox").prop("checked",false)
           }
            else {
               $("table :checkbox").each(function(){

                 $(this).prop("checked",!$(this).prop("checked"));

             });
           }



        });

</script>
轮播图效果一 轮播图效果 
	<ul class="imglist">
		<li class="current">
			<a href="#">
				<img src="./images/play01.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="#">
				<img src="./images/play02.jpg" alt="">
			</a>
		</li>
		
		<li>
			<a href="#">
				<img src="./images/play03.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="#">
				<img src="./images/play04.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="#">
				<img src="./images/play05.jpg" alt="">
			</a>
		</li>
	</ul>
	<div class="control-list">
		<span class="current">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>
	<div class="slide-list">
		<span class="slide slide-left"><</span>
		<span class="slide slide-right">></span>
	</div>
</div>
<script src="../jquery-3.3.1.js"></script>
<script>
	//轮播图效果
	$(function(){
		var m = 0; 			//循环变量
		var delay = 3000; 	//轮播的时间间隔
		var length = 5; 	//轮播的数量
		//1.设置定时
		var runTime = setInterval(runPlay, delay);
		//鼠标悬浮 定时停止4
		$('#play').on('mouseenter', function(){
			clearInterval(runTime);
		}).on('mouseleave', function(){
			runTime = setInterval(runPlay, delay)
		});
		//给控制按钮 绑定 单击事件
		$('.control-list span').on('click', function(){
			//console.log($(this).index())
			// 刷新m
			m = $(this).index();
			controlImage(m);
		});
		//向右
		$('.slide-right').on('click', function(){
			m ++;
			if (m >= length) {
				m = 0;
			}
			controlImage(m)
		});
		//向左 上一个
		$('.slide-left').on('click', function(){
			m --;
			if (m < 0) {
				m = length-1
			}
			controlImage(m)
		})
		//定时函数2
		function runPlay() {
			//循环变量累加
			m ++;
			//判断
			if (m >= length) {
				m = 0;
			}
			//调用函数 控制图片
			controlImage(m)
		}
		//控制图片的变化3
		// n表示 要第几个显示
		function controlImage(n) {
			$('.imglist li').removeClass('current').eq(n).addClass('current');
			$('.control-list span').removeClass('current').eq(n).addClass('current');
		}
	//	插入:
	//	内联元素可以同设置块状去掉空格 image是内联元素
	//	font-size也能去掉空格
	//	让他们在一起的策略是  定位加  改变透明度
	})
</script>
轮播图效果二 1554095210189 轮播图
  • 1
  • 2
  • 3
  • 4
全屏滚动 1554095097551 全屏滚动

Page1

A
B
C

Page3

Page4

<script src="../jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.js"></script>
<script>
	$('#fullpage').fullpage({
		 navigation: true,
		 sectionsColor: ['red','green','purple','orange']
	});
</script>
菜单实例 1554095639281 菜单实例

后台管理

<div class="nav">
	<h2>用户管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>

	<h2>订单管理</h2>
	<ul>
		<li><a href="#">订单列表</a></li>
		<li><a href="#">订单添加</a></li>
		<li><a href="#">订单删除</a></li>
		<li><a href="#">订单修改</a></li>
	</ul>


	<h2>商品管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>

	<h2>评论管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>
</div>

<script src="../jquery-3.3.1.js"></script>
<script>
	$(function(){
			//找到具体的触发  jquery元素. on('事件',function(){})
		$('.nav h2').on('click', function(){
			//$(this).next('ul').toggle();
			//当前元素的下一个兄弟元素  然后调用隐藏显示的方法
			$(this).next('ul').slideToggle();
		})
	})
</script>
菜单实例css3 1554095692446 菜单实例

后台管理

<div class="nav">
	<h2>用户管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>

	<h2>订单管理</h2>
	<ul>
		<li><a href="#">订单列表</a></li>
		<li><a href="#">订单添加</a></li>
		<li><a href="#">订单删除</a></li>
		<li><a href="#">订单修改</a></li>
	</ul>


	<h2>商品管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>

	<h2>评论管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>
</div>

<script src="../jquery-3.3.1.js"></script>
<script>
	$(function(){
		$('.nav h2').on('click', function(){
			$(this).next('ul').toggleClass('active')
		})
	})
</script>
手风琴 1554095816685 菜单实例

后台管理

<div class="nav">
	<h2>用户管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>

	<h2>订单管理</h2>
	<ul>
		<li><a href="#">订单列表</a></li>
		<li><a href="#">订单添加</a></li>
		<li><a href="#">订单删除</a></li>
		<li><a href="#">订单修改</a></li>
	</ul>


	<h2>商品管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>

	<h2>评论管理</h2>
	<ul>
		<li><a href="#">用户列表</a></li>
		<li><a href="#">用户添加</a></li>
		<li><a href="#">用户删除</a></li>
		<li><a href="#">用户修改</a></li>
	</ul>
</div>

<script src="../jquery-3.3.1.js"></script>
<script>
	$(function(){
		$('.nav ul:first').show();
		$('.nav h2').on('click', function(){
			$(this).next('ul').slideDown().siblings('ul').slideUp();
		})
	})
</script>

在这里我也整理了一份学习资料，主要包含爬虫入门(爬虫工作流程 http工作流程)、逆向工程、逆向算法、异步爬虫、安卓逆向这几个板块，适合Python入门的朋友学习，都是精华，有需要的话可以添加名片领取。

哪吒敲代码闹海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
beautifulsoup爬取网页中的表格_Python 爬虫基础教程——BeautifulSoup抓取入门
weixin_39923945的博客
11-20 1595
点击上方蓝色文字关注我们吧有你想要的精彩作者| 東不归出品 | Python知识学堂大家好，上篇推文介绍了爬虫方面需要注意的地方、使用vscode开发环境的时候会遇到的问题以及使用正则表达式的方式爬取页面信息，本篇内容主要是介绍BeautifulSoup模块的使用教程。BeautifulSoup介紹引用官方的解释：Beautiful Soup 是一个可以从HTML或XML文件中提取数据...
echarts python 教程_Echarts入门(零基础小白教程)
weixin_39598308的博客
12-16 1759
前言适合0前端基础的小白，什么配置啊，不会啊，我就想画个图先，没问题，按照步骤做，先来实现第一个图，之后官方教程会教会你更多的。下载echarts小白建议，直接下完整版，先搞清楚怎么画出一张图再说点击这里下载Echarts，进入链接，选择完整版下载，之后会得到一个echarts.min.js的一个js脚本，别管他，先放着。新建一个html文件我这里取名为echartstest.html,然后将下面...
Python 爬虫基础教程——BeautifulSoup抓取入门（2）
th1522856954的博客
03-04 381
大家好，上篇推文介绍了BeautifulSoup抓取的一些基础用法，本篇内容主要是介绍BeautifulSoup模块的文档树使用以及实例。 一、遍历文档树 直接看代码吧 from bs4 import BeautifulSoup html='<html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"/> <meta content="IE=Edg...
【前端Vue3】——JQuery知识点总结（超详细）
shsjssnn的博客
06-04 6741
总之，jQuery作为一个广泛使用的JavaScript库，它极大地简化了开发者的工作流程，允许以更少的代码完成更多的工作。通过提供丰富的选择器、便捷的事件处理方法、流畅的动画效果以及简化的Ajax交互等，jQuery帮助开发者高效地构建互动性强、兼容性好的网页应用。
Python爬虫从入门到精通——解析库pyquery的使用
冯·诺依曼
06-06 1万+
分类目录：《Python爬虫从入门到精通》总目录 在《解析库Beautiful Soup的使用》中，我们介绍了Beautiful Soup的用法，它是一个非常强大的网页解析库，但如果你对Web有所涉及，如果你比较喜欢用CSS选择器，如果你对jQuery有所了解，那么这里有一个更适合你的解析库——pyquery。 pyquery初始化 像Beautiful Soup一样，初始化pyquery的时候，...
Python交互式绘图——Pygal绘图包（一、安装及入门）
热门推荐
TomRen
09-22 1万+
Python交互式绘图主要有以下工具包（帖子一）： https://blog.modeanalytics.com/python-interactive-plot-libraries/ python交互式绘图 介绍，巴拉巴拉 安装：官方文档 初步使用 jupyter中如何使用 prepaer import sys reload(sys) sys.setdefaultencoding('utf-8...
前端必备——JQuery基础知识体系详解
实验楼
08-20 811
今天推荐一个前端学习干货——【JQuery基础教程】。jQuery是一个优秀的轻量级Javascript库，兼容CSS3，还兼容各种浏览器，在Web前端开发中广泛使用...
基于python的web框架——Flask 学习笔记
lingfeng5的专栏
06-29 4340
Flask Web开发：基于Python的Web应用开发实战。
python爬虫入门到精通_Python爬虫从入门到精通
weixin_39550587的博客
01-14 111
在《解析库Beautiful Soup的使用》中，我们介绍了Beautiful Soup的用法，它是一个非常强大的网页解析库，但如果你对Web有所涉及，如果你比较喜欢用CSS选择器，如果你对jQuery有所了解，那么这里有一个更适合你的解析库——pyquery。pyquery初始化像Beautiful Soup一样，初始化pyquery的时候，也需要传入HTML文本来初始化一个PyQuery对象。...
Python小游戏大全——40个
05-14
Python小游戏大全——40个，快来下载吧！ Python小游戏大全——40个，快来下载吧！ Python小游戏大全——40个，快来下载吧！ Python小游戏大全——40个，快来下载吧！ ...
Python爬虫小例子——爬取51job发布的工作职位
12-17
所以两者形影相随，不离不弃，本文主要以一个简单的小例子，简述Python在爬虫方面的简单应用，仅供学习分享使用，如有不足之处，还请指正。 涉及知识点 本例主要爬取51job发布的工作职位，用到的知识点如下： 开发...
python入门 入门例子和代码
05-31
python入门 python入门 入门例子和代码
全网最详细Gradio教程系列5——Gradio Client: python
shao918516的博客
07-26 618
程序部署完成后，如何将Gradio App作为API访问使用呢，这就用到Gradio Client。本章讲解Gradio Client的三种使用方式：python、javascript和curl，受字数限制，所以分三篇博客发布。 使用Gradio Python Client非常易于将Gradio应用程序作为API使用，本节讲述gradio_client安装、如何连接Gradio应用程序、查看可用API及其使用方式、job及session等用法。 通过Gradio Python Cli
随机数种子的作用
帆的博客
07-23 1255
设置随机数种子（random seed）的目的是为了确保随机数生成器在每次运行时产生相同的随机数序列，从而保证实验结果的一致性。随机数种子通过初始化随机数生成器的内部状态，使得在相同的种子值下，随机数生成器每次调用时生成的序列是相同的。
安卓手机部署大模型实战
奇舞周刊
07-25 514
本文作者系360奇舞团前端开发工程师前言自ChatGPT发布以来，大语言模型（Large language model, LLM)就成了AI乃至整个计算机科学的话题中心。学术界，工业界围绕大语言模型本身及其应用展开了广泛的讨论，大量的新的实践层出不穷。由于LLM对计算资源的需求极大，有能力部署大语言模型的公司和实验室一般通过搭建集群，然后开放API或者网页demo的方式让用户可以使用模型。在人们纷...
Java实现拼图小游戏
Aishangyuwen的博客
07-22 1562
Java实现拼图小游戏
【Python】 基于Q-learning 强化学习的贪吃蛇游戏（源码+论文）【独一无二】
最新发布
测试开发自动化
07-26 993
贪吃蛇环境模块：定义了游戏规则、状态空间、动作空间，并实现了环境的重置和步进逻辑。Q-learning 算法代理模块：实现了 Q-learning 算法，用于学习和决策游戏中的动作选择。游戏窗口模块：使用 Tkinter 创建图形界面展示游戏过程，并与环境和 Q-learning 代理进行交互。该设计使得贪吃蛇游戏能够通过强化学习算法进行自动训练，并通过图形界面展示训练过程。👉👉👉 源码获取 关注【测试开发自动化】公众号，回复 “ 强化贪吃蛇 ” 获取，拿来即用。👈👈👈。
第G2周：人脸图像生成（DCGAN）
lihuhelihu的博客
07-23 965
除了生成器模型的输出层和判别器模型的输入层，在整个对抗网络的其它层上都使用了Batch Normalization，原因是Batch Normalization可以稳定学习，有助于优化初始化参数值不良而导致的训练问题。通过这些层的组合，输入的图像逐渐被降维并提取特征，最终输出一个标量值，表示输入图像被判别为真实图像的概率。总体来说，这段代码实现了GAN的训练过程，通过交替更新判别器和生成器的参数，目标是使生成器生成逼真的图像样本，同时判别器能够准确区分真实图像样本和生成图像样本。
Python编程入门教程——简明指南
"简明Python教程是一本基础的Python学习资料，由Swaroop C.H.撰写并由沈洁元翻译成简体中文。这本书旨在帮助初学者和有一定编程经验的人学习Python语言。遵循创作公用约定，允许署名、非派生、非商业用途的使用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值