Educoder jQuery 入门

最新推荐文章于 2024-04-24 10:00:20 发布
最新推荐文章于 2024-04-24 10:00:20 发布
阅读量895 收藏 8
点赞数 1
分类专栏： （jQuery+Bootstrap) of Educoder 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65391975/article/details/128190879
版权

目录

Educoder jQuery 入门

第1关：jQuery入门

第2关：jQuery基本选择器

第3关：过滤选择器

第4关：过滤选择器

第5关：tab选项卡

 

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>
川尚丘库
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery入门
08-09
jQuery入门1 适合零基础初学者，讲解详细，易于理解，
jQuery 入门讲解1
10-30
本文将深入讲解jQuery的入门知识，包括其优点、构造函数以及一些基本的DOM操作方法。 首先，jQuery 的优点是多方面的。它的体积小巧，例如，版本1.2.3只有15kb，这使得它在网页加载速度方面表现优秀。jQuery 提供了...
jQuery 上部分--头歌（educoder)实训作业题目及答案
最新发布
qq_69173578的博客
04-24 2536
jquery基础
Educoder/头歌JAVA——jQuery基础
舟舟的博客
12-12 7247
jQuery 是一个 JavaScript 函数库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery入门第一章（jQuery初体验）
m0_56344602的博客
09-05 489
JQ 基本概念 jQuery 其实就是别的团队封装好的一个 JS 文件。 常见错误 没有引入 jQuery 文件，引入失败，请检查 jquery.js 文件的路径。 JQ 对象 和 DOM 对象互相转换 不同类型的对象拥有不同的属性和方法 JQ 对象调用 JQ 对象的方法和属性。 DOM 对象调用 DOM 对象的方法和属性。 JQ 对象和 DOM 对象可以互相转换。 JQ 对象和 DOM 对象关系图 JQ 对象可以提取出 DOM 对象 DOM 对象也
jQuery01 入门
m0_67477525的博客
03-16 408
一，jQuery是什么？ jQuery是javaScript的类库 里面封装了许多js代码 二，为什么我们要学习jQuery？ write less ，do more 是一些前端的基础 三、如何使用 1.下载jQuery库 2.复制到js中 3.使用·js 四、jQuery选择器 1.基本选择器：{ ID选择器:#ID 类选择器:.class 元素选择器:element } 2.层次选择器{ a,b :并集 a+b:兄弟关系 a>b:父子关系 a b 交集 }
前端基础学习——jQuery入门
jyn15159的博客
09-18 199
jQuery 1. jQuery 介绍 1.1. JavaScript 库 ​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
一、Jquery入门（超详）
weixin_44009656的博客
05-02 4627
本文将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。
jQuery入门 构造函数
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。在本文中，我们将深入探讨jQuery的构造函数及其相关的功能。 首先，jQuery的构造函数是创建jQuery对象的关键，它...
JQuery 入门实例1
10-29
JQuery 入门实例 大家可以参考下。
jQuery入门jQuery入门
04-26
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jQuery入门知识简介
10-29
seektanjQuery是最近比较火的一个JavaScript库，从del.icio.us/上相关的收藏可见一斑。
JQuery入门基础
m0_74934282的博客
03-30 8652
jQuery 是一个快速、简洁的 **`JavaScript 库`**，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JavaScript库**`仓库`**： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。**`JavaScript库`**：即 library，是一个封装好的特定的集合（方法和函数）。
Jquery第一章 Jquery基础
chuanlinlaile的博客
03-15 327
第一章 Jquery基础一.基础介绍什么是jquery？jquery就是一个javascript库,这个库封装了很多函数和对象,其目的就是为了简化我们的javascript操作dom的代码。在书写jquery程序中,对于页面元素的选择,内置的功能函数,都必须用$符号,而这个$符号就是jquery对象。因此jquery是可以完全替代$符号,其二者是等意。&lt;script type="text/j...
jQuery选择器 过滤选择器(一.基本过滤选择器)
妖怪的博客
02-17 805
1.:first;2.:last;3.;not(selector);4.:even;5.:odd;6.:eq(index);7.:gt(index);8.:lt(index);9.:header;10.:animated;11.:focus;
tab选项卡
weixin_54420874的博客
10-18 518
注意看红色箭头，共有12个步骤，按顺序操作下去 1、新建一个HTML文档，<title>标签里面改此页面在浏览器中显示的名称。给个<div>标签，给个类。用到了<ul>无序列表标签把选项卡的标题敲出来，标题有五个，分别代表五个不同的内容。有公告、规则、论坛、安全、公益。 2、第一个标题的内容，首先一个<div>标签，其次就是<ul>无序列表标签。<li>标签里面是内容，每个<li>标签里的内容都有一个<a.
(JavaScript学习记录)：jQuery 介绍、基本使用
baidu_41388533的博客
09-30 299
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4 目录 jQuery 介绍 JavaScript 库 jQuery的概念 jQuery的优点 jQuery 的基本使用 jQuery 的下载 体验jQuery jQuery的入口函数 jQuery中的顶级对象$ jQuery 对象和 DOM 对象 jQuery 对象和 DOM 对象转换 】jQuery 介绍 .
JQuery 选择器 过滤器 其他 总结
u011073057的博客
03-20 771
JQuery选择器 一、基本选择器 id选择器： $("#id") 类选择器：$(".class") 元素选择器：$("div") 合成选择器 ：$("div,#id,p") //意味着多选 返回所有文档节点的选择器：$("*") //少用 二、层级选择器 子筛选选择器： $("select1select2"

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值