Educoder jQuery 入门
2024-06-16 09:20:57
Educoder实训 jQuery 入门
第1关：jQuery入门
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body><div id="content"></div><script>//------------begin---------var content = $("#content");content.html("这是我的第一个jquery程序");//-----------end------------</script><style>#content{width: 300px;height: 60px;text-align: center;line-height: 60px;margin: 30px auto;font-size: 20px;border: 2px solid #000;}</style>
</body>
</html>
第2关：jQuery基本选择器
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body><ul class="container"><li class="item"><button>id</button><div id="box"></div></li><li class="item"><button>类</button><div class="box"></div></li><li class="item"><button>元素</button><p></p></li></ul><script>$(function(){$("button").click(function(){//inner是当前点击的button元素的内容var inner = $(this).html();if(inner == "id"){//----------begin----------var box = $("#box");box.html("我是id选择器添加的内容");//----------end------------}if(inner == "类"){//----------begin----------var box = $(".box");box.html("我是类选择器添加的内容");//----------end------------}if(inner == "元素"){//----------begin----------var box = $("p");box.html("我是元素选择器添加的内容");//----------end------------}})})</script> <style>ul,li{list-style-type: none;}.container{width: 400px;margin: 40px auto;}.container .item{height: 60px;line-height: 60px;margin: 0 20px 20px 0;overflow: hidden;}.container .item button{float:left;width: 60px;line-height: 40px;text-align: center;font-size: 18px;margin-right: 20px;}.container .item div{width: 240px;height: 40px;line-height: 40px;border: 2px solid #ccc;text-align: center;float: left;}.container .item p{width: 240px;height: 40px;line-height: 40px;border: 2px solid #ccc;text-align: center;margin-top: 0px;float: left;}</style>
</body>
</html>第3关：过滤选择器
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body><table border="1" cellspacing="0" cellpadding="10" align="center"><!--<caption>Monthly savings</caption>--><tr id="tb-head"><th>姓名</th><th>性别</th><th>年龄</th><th>住址</th></tr><tr><td>张三</td><td>男</td><td>20</td><td>北京</td></tr><tr><td>李四</td><td>男</td><td>30</td><td>洛杉矶</td></tr><tr><td>丽丽</td><td>女</td><td>24</td><td>上海</td></tr><tr><td>王五</td><td>男</td><td>26</td><td>河南</td></tr>
</table><script>//-----------begin-----------$("tr:odd").css("background","lightyellow");$("tr:even").css("background","lavenderblush");$("tr:first").css("background","yellowgreen");//------------end------------ </script></body>
</html>第4关：过滤选择器
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body><ul class="container"><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li><li class="item">点赞！中国自主卫星电话正式放号，从此告别“不在服务</li></ul><script>$(function(){//------------- begin -------------$(".item:eq(2)").css("background","#eee");$(".item:not(:last)").css("border-bottom","1px dashed #ccc");//------------ end ---------------})</script> <style>*{margin: 0;padding: 0;}.container{width: 400px;margin: 40px auto;border: 2px solid #ccc;padding: 0 20px;}.container .item{height: 40px;line-height: 40px;padding: 0;overflow: hidden;}.container .item span{width: 30px;height: 40px;line-height: 40px;padding: 0;overflow: hidden;}/*.container .item:not(:last-child){border-bottom: 1px dashed #ccc;}*/</style>
</body>
</html>第5关：tab选项卡
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body><div class="container"><ul class="head"><li>全部实训</li><li>实训路径</li><li>在线课堂</li><li>讨论区</li></ul><div class="content"><div>我是全部实训的内容</div><div>我是实训路径的内容</div><div>我是在线课堂的内容</div><div>我是讨论区的内容</div></div></div><script>$(function(){//tab的初始化$(".head li").removeClass('active').eq(0).addClass('active');$(".content div").hide().eq(0).show();$(".head li").on('click', function(){// index是点击的li的索引var index = $(this).index();//-----------begin-----------$(".head li").removeClass("active").eq(index).addClass("active");$(".content div").hide().eq(index).show(); //------------end------------ })})</script><style>.container{width: 500px;margin: 40px auto;}ul,li{list-style-type: none;}.container ul{overflow: hidden;background: #000;color: #fff;}.container li{width: 100px;float: left;text-align: center;line-height: 60px;font-size: 18px;cursor: pointer;}.container li.active{color: orange;}.container .content{width: 460px;height: 200px;padding: 20px;background: #ccc;font-size: 18px;}</style>
</body>
</html>Educoder jQuery 入门相关推荐
- Jquery入门详解
JQuery 入门介绍 1.JQuery概述:Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(I ...
- jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件 一.事件初探 加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
- jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
- jQuery——入门（二）动画
jQuery -- 入门(二)动画/效果 一.案例解析 hide([speed,[easing],[fn]]) []:意思表示的方括号中的东西是可选的,可有可无的: []中,会有对应的参数名称[变量名 ...
- jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用 一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...
- jQuery入门[1]－构造函数
jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQuery入门[4]-链式代码 jQuery入门[5]-AJAX jQuery入门[6]-动画 JQu ...
- jQuery入门选择器
Hilo Everybody wellcometo my channel ! 今天Lion带大家初步认识一下 jQuery(jquery01) 首先第一个我们来聊聊 & ...
- jQuery入门 jQuery入门第三天
jQuery入门 jQuery入门第三天 老师:黑马程序员 文章目录 jQuery入门 jQuery入门第三天 老师:黑马程序员 3. jQuery事件 3.1 jQuery事件注册 3.1.1 单个 ...
- JQuery入门(1) - 选择器
JQuery入门(1) - 选择器 $("元素") // 选取元素 $("元素.类名") // 选取元素中class为"类名"的元素 $(& ...
- jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
最新文章
- 使用Mahout搭建推荐系统之入门篇3-Mahout源码初探
- Android studio 4.1 不显示光标当前的类名、方法名
- Altium Designer chapter6总结
- 使用SHA256证书进行微软数字签名代码签名
- Redis数据类型操作(五) —— Sorted Set
- 学习韩立刚老师IT运维课程，成为韩立刚老师正式学生，在全国范围为你就近推荐工作。...
- python可迭代对象，迭代器，生成器
- 119_Power Pivot 长尾明细显示为【其他】
- python语音程序设计教程_Python语言程序设计（视频教程）
- swig c java gemt,SWIG C函数指针和JAVA
- nw.js---创建一个点击菜单
- C#学习系列之H264解码
- UVC 摄像头驱动开发
- 【Windows】无法访问指定设备,路径或文件，您可能没有合适的权限访问这个项目
- pytorch1.10新功能inference_mode
- 非常规方法彻底删除System Volume Information.exe
- 资料分享：送你一本《C#区块链编程》电子书！
- Scroll View控制菜单栏的伸缩
- Oracle table move tablespace
- 我终于又可以在头条上赚钱啦