学习jquery的第一天

已于 2022-03-26 11:18:52 修改
阅读量1k 收藏
点赞数
文章标签： jquery 学习 前端
于 2022-03-14 11:39:21 首次发布
原文链接：http://yun.itheima.com/
版权

 标签设置id 选择器用#   标签用class 选择器用.

1.原生js

2.jquery（<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>）

3.

4.添加新设置文本

5.设置样式

 6.层级选择器

 7.隔行变色

<< odd 序号为奇数行 even 序号为偶数行

<< eq（*） 任意选择行

6.鼠标移入移除隐藏显示（show也可以替换为slideDown加上参数）

<<   mouseover 和 mouseout 鼠标移到到子元素都会触发
 <<  所以使用 nouseenter 和 mouseleave

6.突出展示

 

7.风手琴

8.class类的操作

<< addClass添加某一个类

<< removeClass删除某一个类 

9.tab栏操作

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
        <style>
        .beijing{
            background: pink;
        }
        .btn{
            border:5px solid skyblue;
            border-radius:55px;
            margin:40px;
        }
        .lll>.main{
            display:none;
        }
        .lll>.main.ss{
            display:block;
        }</style>
    </head>
    <body>

        <div class="con">
            <div class=cont>
            <input type="button" class="btn" value="输入框按钮">
            <input type="button" class="btn" value="输入框按钮">
            <input type="button" class="btn" value="提交按钮">
        </div>
        <div class="lll">
                <div class="main"><a href=""><img src="img/jk2.webp"></a></div>
                <div class="main"><a href=""><img src="img/jk3.webp"></a></div>
                <div class="main ss"><a href=""><img src="img/jk4.webp"></a></div>
        </div>
        </div>
    </body>
</html>

10.jquery基本动画

<< 东南方向放大缩放 和西北方向缩小（show，hide，toggle）

<<      (slideDown,sideUp,slideToggle)  向下向上平滑效果

<< 淡入淡出效果(fadeIn,fadeOut,fadeToggle,fadeTo)

原理是修改透明度

<< 移动效果 （linear匀速 swing缓动）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      position: absolute;
	  opacity:0.5;
    }
	.im{
		width: 100px;
		height: 100px;
	}
	#box1 {
	  background-color: blue;
	  margin-top: 100px;
	}
    #box2 {
      background-color: blue;
      margin-top: 300px;
    }
    
    #box3 {
      background-color: yellowgreen;
      margin-top: 500px;
    }
  </style>
</head>
<body>
<input type="button" value="开始" id="ll">
<div id="box1"><img src="img/jk4.webp" class="im"></div>
<div id="box2"><img src="img/jk2.webp" class="im"></div>
<div id="box3"><img src="img/jk3.webp" class="im"></div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(function () {
    $("#ll").click(function () {
	   $("#box1").animate({
		   left:1350,
		   }, 3000, "swing");
		   
      $("#box2").animate({
		  left:1400,
		  }, 3000, "swing");
		  
      $("#box3").animate({
		  left:1320,
		  }, 3000, "linear");
    });
  });
</script>
</body>
</html>

添加一个回调函数

10.stop的用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#div1{
			width:150px;
			height:300px;
			background-color: #6495ED;
			display:none;
		}</style>
	</head>
	<body>
		<input type="button" value="开始" id="kaishi">
		<input type="button" value="停止" id="tingzhi">
		<div id="div1"></div>
		</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#kaishi').click(function(){
		$('#div1').slideDown(2000).slideUp(2000);
	});
	//stop方法
	// 第一个参数是否清除队列
	// 第二个参数是否跳转到最终效果
	$('#tingzhi').click(function(){
		// $('#div1').stop(true,true);
		//$('#div1').stop(true,false);
		  //$('#div1').stop(false,true);
		 $('#div1').stop(false,false);
	});
	});
</script>

11.html创建节点 $()创建元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<style>
			.div1{
				border:5px solid hotpink;
				width:300px;
				height:400px;
			}</style>
			</head>
	<body>
		<input type="button" value="百度链接" id="baidu">
		<input type="button" value="百度链接" id="tengxun">
		<div class="div1">我是一个文本</div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#baidu').mouseenter(function(){
		//会覆盖原有的内容 可以写标签
		$('.div1').html('<a href="www.baidu.com">百度一下</a>');
	});
	//$() 创建元素 只存在内存中，要使用append追加
	$('#tengxun').mouseenter(function(){
		var $link = $('<a href="www.qq.com">腾讯首页</a>');
		// console.log($link);
		$(".div1").append($link);
	});
});
</script>

12.生成表格案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="生成按钮" id="anniu">
<div class="div1"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		var data = [{
			name: "猴王",
			sex: "男",
			age: 18,
		}, {
			name: "猴儿",
			sex: "女",
			age: 18,
		}, {
			name: "猴哥",
			sex: "公",
			age: 250,
		}];
		$('#anniu').click(function() {
			var list = [];
			for (var i = 0; i < data.length; i++) {
				list.push("<tr>");
				for (var key in data[i]) {
					list.push('<td>');
					list.push(data[i][key]);
					list.push('</td>');
				}
				list.push("</tr>");
			}
			// console.log(list.join(""));
			$('.div1').html(list.join(""));
		});
	});
</script>

使用的$的方式来写（同样的效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="生成按钮" id="anniu">
<div class="div1"></div>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		var data = [{
			name: "猴王",
			sex: "男",
			age: 18,
		}, {
			name: "猴儿",
			sex: "女",
			age: 18,
		}, {
			name: "猴哥",
			sex: "公",
			age: 250,
		}];
		$('#anniu').click(function() {
		// 	var list = [];
		// 	for (var i = 0; i < data.length; i++) {
		// 		list.push("<tr>");
		// 		for (var key in data[i]) {
		// 			list.push('<td>');
		// 			list.push(data[i][key]);
		// 			list.push('</td>');
		// 		}
		// 		list.push("</tr>");
		// 	}
		// 	// console.log(list.join(""));
		// 	$('.div1').html(list.join(""));
		for(var i=0;i<data.length;i++){
			var $tr=$("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['sex']+"</td><td>"+data[i]['age']+"</td></tr>");
			$('.div1').append($tr);
		}
		
		 });
	});
</script>

13.添加节点的几种方式    p32

<< append和prepend

<< 父元素.append(子元素)；作为最后一个子元素添加

<< 父元素.perpend(子元素)；作为最前一个子元素添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="添加尾部" id="anniu1">
		<input type="button" value="添加首部" id="anniu2">
		<ul id="u1">
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li id="u13">我是第三个</li>
			<li>我是第四个</li>
			<li>我是第五个</li>
		</ul>
		<ul id="u2">
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li id="u23">我是第三个</li>
			<li>我是第四个</li>
			<li>我是第五个</li>
		</ul>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$('#anniu1').click(function(){
		var $lixin = $("<li>我是新添加的li标签</li>");
		$('#u1').append($lixin);
	});
});
</script>

<<修改点击事件的两行代码

相当于将u23的东西复制剪切到ul的尾行

var $lixin = $('#u23');
		$('#u1').append($lixin);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="添加尾部" id="anniu1">
		<input type="button" value="添加首部" id="anniu2">
		<ul id="u1">
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li id="u13">我是第三个</li>
			<li>我是第四个</li>
			<li>我是第五个</li>
		</ul>
		<ul id="u2">
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li id="u23">我是第三个</li>
			<li>我是第四个</li>
			<li>我是第五个</li>
		</ul>
	</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	// $('#anniu1').click(function(){
	// 	var $lixin = $("<li>我是新添加的li标签</li>");
	// 	$('#u1').append($lixin);
	// 	// var $lixin = $('#u23');
	// 	// $('#u1').append($lixin);
	// });
	$('#anniu2').click(function(){
		var $lixin = $("<li>我是新添加的li标签</li>");
		$('#u1').prepend($lixin);
		
	});
});
</script>

<<修改点击事件的两行代码

相当于将u23的东西复制剪切到ul的首行

var $lixin = $('#u23');
		$('#u1').prepend($lixin);

 << bofore和after和appendTo

<<元素A.before(元素B)将元素B插入元素A前面，作为兄弟元素添加

<<元素A.after(元素B)将元素B插入元素A后面，作为兄弟元素添加

<< 子元素。appendTo（父元素）；  把子元素作为父元素的最后一个子元素添加

 

 

13.城市管理器

实现选中移动到  和全部移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		select{
			background:skyblue;
			width:200px;
			height:200px;
			font-size:20px;
		}
		
		.btn-box {
		  width: 30px;
		  display: inline-block;
		  vertical-align: top;
		}</style>
	</head>
<body>
	<select id="src-city" name="src-city" multiple>
		<option value="1">北京</option>
		<option value="2">上海</option>
		<option value="3">深圳</option>
		<option value="4">广州</option>
		<option value="5">西红柿</option>
	</select>
	<div class="btn-box">
	  <!--实体字符-->
	  <button id="btn1"> &gt;&gt; </button>
	  <button id="btn2"> &lt;&lt; </button>
	  <button id="btn3"> &gt;</button>
	  <button id="btn4"> &lt; </button>
	</div>
	<select id="tar-city" name="src-city" multiple>
		</select>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	//左面的全部移动到右边
	$('#btn1').click(function(){
		$('#src-city>option').appendTo($('#tar-city'));
	});
	//右面的全部移动到左边
	$('#btn2').click(function(){
		$('#tar-city>option').appendTo($('#src-city'));
	});
	$('#btn3').click(function(){
		//selected是过滤器
		// console.log($('#src-city>option:selected'));
		$('#src-city>option:selected').appendTo($('#tar-city'));
	});
	$('#btn4').click(function(){
		$('#tar-city>option:Selected').appendTo($('#src-city'));
	});
});</script>

14.移除元素

重庆李豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
疯狂Jquery第一天(Jquery学习笔记)
10-28
疯狂Jquery第一天的学习笔记主要涵盖了Jquery的入门知识，包括了Jquery的引用方式、链式操作的介绍和实际应用。下面是根据提供的内容，详细解释的一些知识点。 ### Jquery的引用 Jquery作为一个JavaScript库，其...
学习jquery mvc第一天，hello
04-03
【标题】：“学习jQuery MVC第一天，Hello” 这篇文章的标题表明了作者正开始探索jQuery与MVC（Model-View-Controller）架构的结合使用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及...
通过CDN引入jQuery的几种方式
baocuan8515的博客
07-04 2246
百度 CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> 新浪 CDN <head> <script ...
boostrap布局( 二）—后台布局实例（左侧菜单激活、右边页面切换）
鲸鱼姐的专栏
06-18 7238
实际项目效果如下： 选中左侧菜单，右边自动变换页面。默认选中Page1页面产品信息。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 布局实例</title> <link ...
用Jquery实现Ajax将接口数据渲染到HTML表给中
weixin_44153063的博客
11-26 4630
用Jquery实现Ajax将接口数据渲染到HTML表给中 jQuery依赖，本文是采用的CDN <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> .ajax() 参数简介 包含了1个参数,这个参数里面包含了$.ajax()所需要的请求设置以及回调函数 参数说明 ...
Angular中集成Script脚本你还不会？看这篇就够了
qq_40677590的博客
04-17 2315
背景： 最近在做angular项目时，需要集成一个控件，其中需要引入最新的js文件，所以我们要使用： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 像这样的方式，并需要写一些初始化的逻辑显示此控件。 先看看效果： 分析： angula...
Bootstrap4知识(1)
airar的博客
09-24 1313
1.Bootstrap简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利 用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大 的插件系统，能够快速为你的想法开发出原型或者构建整个 app Sass--CSS扩展语言 Mixin--包含一段合法Sass代码，类似...
学习jQuery的第一天
chnnds的博客
01-05 895
目录 前言 1、jQuery简介 1.1、JavaScript库 1.2、jQuery的概念 1.3、jQuery的优点 1.4、jQuery的入口函数 2、jQuery选择器 2.1、jQuery基本选择器 2.2、jQuery层次选择器 2.3、jQuery筛选选择器 3、jQuery中的排他思想 总结 前言 小编我又回来了，今天又是元气满满的一天，今天又是好好学习的一天。小编我今天又来和大家做分享了。今天是小编接触jQuery的第一天。了解到...
学习jQuery第一天总结（一）、each（function）循环函数、jQuery与DOM相互转换、判断是jq还是dom，data函数
m0_57446284的博客
09-26 966
一、JQuery核心基础 jquery的核心是函数，简写$(); 示例： 使用jQuery查找所有元素，并且显示出来 <div> <p id="p_1">迟日江山丽</p> <p>春风花草香</p> <p>泥融飞燕子</p> <p>沙暖睡鸳鸯</p> </div> <script>
jQuery第一天，笔记总结
一个前端开发者
04-25 165
jQuery-01 学习目标： 1.能够说出什么是 jQuery 2.能够说出 jQuery 的优点 3.能够简单使用 jQuery 4.能够说出 DOM 对象和 jQuery 对象的区别 5.能够写出常用的 jQuery 选择器 6.能够操作 jQuery 样式 7.能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1. JavaScript 库 ​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库
jQuery学习笔记第二天的电梯导航案例代码
03-01
本篇将详细探讨jQuery学习笔记中第二天涉及的电梯导航案例，该案例旨在实现一个网页上的楼层跳转功能，通过点击楼层链接，页面会平滑滚动到相应的位置，提升用户体验。 首先，我们要理解电梯导航的基本原理。在网页...
JQuery自学第一天.docx
04-15
了解以上基本概念后，你可以开始深入学习JQuery的选区操作、事件绑定、动画效果和Ajax功能。JQuery的强大之处在于它的易用性和丰富的API，使得开发者能够更高效地实现复杂的前端功能。通过持续实践，你将能够熟练...
iomuxc、pinctrl子系统、gpio子系统（学习总结）
weixin_61385844的博客
09-04 920
IOMUXC是SOC设计中实现引脚复用的关键组件，它通过动态切换引脚功能，提高了IO资源的利用率，满足了不同外设和功能的IO需求。在配置和使用IOMUXC时，需要参考芯片使用手册和设备树文档，确保引脚功能的正确设置。
java重点学习-spring
qq_40453972的博客
09-03 862
AOP称为面向切面编程，用于将那些与业务无关，但却对多个对象产生影响的公共行为和逻辑，抽取并封装为一个可重用的模块，这个模块被命名为“切面”(Aspect)，减少系统中的重复代码，降低了模块间的耦合度，同时提高了系统的可维护性。常见的AOP使用场景记录操作日志、●缓存处理Spring中内置的事务处理什么是AOP面向切面编程，用于将那些与业务无关，但却对多个对象产生影响的公共行为和逻辑，抽取公共模块复用，降低耦合你们项目中有没有使用到AOP。
学习项目1
m0_62803606的博客
09-03 1606
这篇文章主要记录你最近入手的无线串口模块的配置情况，这是个很好的习惯，尤其是在你以后需要重复操作或排查问题时，会非常有帮助。- **DL_20无线串口模块**：这是一个常见的无线串口通信模块，通常基于nRF24L01+等无线通信芯片，支持点对点或多点通信，适合短距离的无线数据传输。是的，如果你按照步骤成功配置了两个模块并将它们连接到单机和电脑，当你在上位机软件（如SSCOM）上能稳定地接收到从单片机发送的数据（例如每秒输出的T值），就说明两个无线模块之间的通信已经配置成功。
假期学习-- iOS runtime的简单了解
m0_74217598的博客
09-04 919
（Runtime字典转模型，数据的接受取决于模型的属性）首先需要了解，属性定义在类里面，那么类里面就有一个属性列表，属性列表以数组的形式存在，根据属性列表就可以获得类里面的所有属性名，所以遍历属性列表，也就可以遍历模型中的所有属性名。所以RunTime字典转模型过程就很清晰了。
网络编程学习：TCP/IP协议
kkbbaaii的博客
09-01 1707
网络编程学习：TCP/IP协议
9.6学习记录+三场笔试
最新发布
m0_62956971的博客
09-07 658
短作业优先。
精通jQuery：15天学习指南
在第二章中，主题是"比window.onload更快一些的载入"，这部分可能涉及如何使用JQuery更高效地处理页面加载事件，例如利用JQuery的$(document).ready()函数来替代传统的window.onload，以便更快地执行脚本，提高用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值