第五模块：WEB开发基础-第8章 Jquery开发&BootStrap_jquery开发&bootstrap 53小节-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36993243/article/details/114213776

本文详细介绍了jQuery的核心用法，包括选择器、DOM操作、事件处理和Ajax技术，并深入探讨了Bootstrap的响应式设计，如媒体查询、栅格系统和常见组件的使用，旨在提升WEB开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录

Jquery开发&BootStrap

文章目录

系列文章目录
前言
一、jQuery
二、选择器
- 1.基础和层级选择器
- 2.过滤选择器和属性选择器
三、dom操作
四、鼠标事件
五、表单事件
六、动画
- 1.动画效果
七、ajax技术
- 1.如何与后端发生交互
- 2.案例-百度天气实现实况天气
七、BootStrap
总结

前言

Jquery开发&BootStrap

一、jQuery

1.知识点介绍

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。另外它只是封装了js的dom的操作和ajax，其它的未封装。所以js是包含jquery的。由此可见，jquery的出现，使我们更加容易操作DOM。

2.基础核心使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">mjj</div>
	<!-- 引包 -->
	<script src="./jquery-3.5.1.js"></script>
	<script>
		// console.log(jQuery);
		var oDiv = document.getElementById('app')
		console.log(oDiv);

		//js对象转换jquery对象
		console.log($(oDiv));
		//jquery对象转换js对象
		console.log($('#app')[0]);
		console.log($('#app').get(0));
	</script>
</body>
</html>

3.入口函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>入口函数</title>
</head>
<body>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//只执行一次，后面会覆盖前面的
		// window.onload = function(){
    
		// }
		$(document).ready(function(){
    
			alert(1);
		})
		//jquery入口函数的简写方式
		//重点
		$(function(){
    
			alert(2);
		})
	</script>
</body>
</html>

4.如何处理多个库$冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="box">mjj</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//jquery提供了一个解决多个库变量名冲突的方法
		jQuery.noConflict(); //将jquery的$变量的控制权交给index.js
		
		(function($){
    
			$(function(){
    
				$('#box').css('color','red');
			})
		})(jQuery);
	</script>
</body>
</html>

二、选择器

1.基础和层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基础和层次选择器</title>
</head>
<body>
	<div class="box">
		<p id="p1"></p>
		<ul>
			<li class="item1">张三</li>
			<li class="item2">李四</li>
			<li class="item3">王五</li>
		</ul>
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//jquery选择器的作用：选中当前元素（返回一个jquery对象）
		//id选择器
		console.log($('p1'));
		//class
		console.log($('.box'));
		//标签
		//后代
		console.log($('.box #p1'));
		console.log($('.box li'));
		//子代
		console.log($('.box>ul>li'));
		//+ prev next
		console.log($('.item1+.item2'));//获取紧挨着item1这个li标签的下一个标签
		//~
		console.log($('.item1~li'));//除item1这个标签之外的标签
		//组合
		console.log($('p,ul,li'));
	</script>
</body>
</html>

2.过滤选择器和属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>过滤选择器</title>
	<style type="text/css">
		#p1{
    
			display: none;
		}
	</style>
</head>
<body>
	<div class="box">
		<p id="p1">alex1</p>
		<p id="p2">alex2</p>
		<ul>
			<li class="item1">
				<h3>张三</h3>
			</li>
			<li class="item2">李四</li>
			<li class="item3">王五</li>
			<li id="mpt">
				<h4>hello word</h4>
			</li>
		</ul>
		<input type="text" class="user">
		<input type="password" class="pwd">
		<input type="radio" class="sex">男
		<input type="submit" name="" value="登录">
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//过滤选择器
		//非常重要
		/*console.log($('ul li:first'));
		console.log($('ul li:last'));

		console.log($('ul li:not(.item2)'));
		console.log($('ul li:even'));
		console.log($('ul li:odd'));
		//非常重要
		console.log($('ul li:eq(0)').text());
		console.log($('ul li:eq(2)').text());

		console.log($('ul li:gt(0)').text());
		console.log($('ul li:lt(2)').text());

		console.log($('ul li:contains(张三)'));
		console.log($('ul li:empty'));*/

		console.log($('ul li:has(h4)').addClass('a'));
		console.log($('.box p:hidden'));
		console.log($('.box p:visible'));

		console.log($('input[type=text]'));
		console.log($('input[type=password]'));
		console.log($('input[type!=password]'));
		console.log($('input:text'));
		console.log($('input:radio'));

		if($('input[type=button]').length>0){
    
			$('input[type=button]').click(function(){
    

			})
		}else{
    
			throw new Error('获取元素失败');
		}
	</script>
</body>
</html>

三、dom操作

1.dom操作之插入节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dom操作</title>
</head>
<body>
	<h3>小马哥</h3>
	<div class="box"></div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			var h3Tag = document.createElement('h3');
			h3Tag.innerText = 'alex';
			var htmlStr = '<h3>hello word</h3>';
			// $('.box').append(h3Tag);
			//如果是网页中的元素，是一种移动现象
			//append() appendTo()后置追加
			$('.box').append($('h3'));
			$('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function(){
    
				alert($(this).text());

			});
			//prepend() prependTo()前置追加
			$('.box').prepend('<a href="#">百度一下1</a>');
			$('<a href="#">百度一下2</a>').prependTo('.box');

			$('h3').after('<h1>武sir</h1>');
			$('<h2>老男孩</h2>').insertAfter('h1');

		})
	</script>
</body>
</html>

2.dom操作之删除节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dom操作</title>
</head>
<body>
	<h3>小马哥</h3>
	<div class="box"></div>
	<div class="wrap">
		<button>按钮</button>
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			var h3Tag = document.createElement('h3');
			h3Tag.innerText = 'alex';
			var htmlStr = '<h3>hello word</h3>';
			// $('.box').append(h3Tag);
			//如果是网页中的元素，是一种移动现象
			//append() appendTo()后置追加
			$('.box').append($('h3'));
			$('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function(){
    
				alert($(this).text());

			});
			//prepend() prependTo()前置追加
			$('.box').prepend('<a href="#">百度一下1</a>');
			$('<a href="#">百度一下2</a>').prependTo('.box');

			$('h3').after('<h1>武sir</h1>');
			$('<h2>老男孩</h2>').insertAfter('h1');

			$('button').click(function(){
    
				//既删除节点，又删除节点上的事件绑定
				// var btnJq = $(this).remove();
				// $('.box').prepend(btnJq);
				//仅仅删除了节点，事件保留
				// $(this).detach();

				//清空div.box
				$('.box').empty();
				// $('.box').text()
				$('.box').html('');

			})

		})
	</script>
</body>
</html>

3.dom操作之克隆节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dom操作</title>
</head>
<body>
	<h3>小马哥</h3>
	<div class="box"></div>
	<div class="wrap">
		<button>按钮</button>
	</div>
	<div class="clone">
		<ul>
			<li>mjj</li>
		</ul>
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			var h3Tag = document.createElement('h3');
			h3Tag.innerText = 'alex';
			var htmlStr = '<h3>hello word</h3>';
			// $('.box').append(h3Tag);
			//如果是网页中的元素，是一种移动现象
			//append() appendTo()后置追加
			$('.box').append($('h3'));
			$('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function(){
    
				alert($(this).text());

			});
			//prepend() prependTo()前置追加
			$('.box').prepend('<a href="#">百度一下1</a>');
			$('<a href="#">百度一下2</a>').prependTo('.box');

			$('h3').after('<h1>武sir</h1>');
			$('<h2>老男孩</h2>').insertAfter('h1');

			$('button').click(function(){
    
				//既删除节点，又删除节点上的事件绑定
				// var btnJq = $(this).remove();
				// $('.box').prepend(btnJq);
				//仅仅删除了节点，事件保留
				// $(this).detach();

				//清空div.box
				$('.box').empty();
				// $('.box').text()
				$('.box').html('');

			})

		})
		//克隆元素
		$('.clone ul li').click(function(){
    
			$(this).clone(true).appendTo('.clone ul');
		})
	</script>
</body>
</html>

4.dom操作之替换节点和包裹节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dom操作</title>
</head>
<body>
	<h3>小马哥</h3>
	<div class="box"></div>
	<div class="wrap">
		<button>按钮</button>
	</div>
	<div class="clone">
		<ul>
			<li>mjj</li>
		</ul>
	</div>
	<div class="replace">
		<p>hello</p>
		<p>word</p>
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			//替换节点
			// $('.replace p').replaceWith('<i>hello</i>');
			// $('<i>hello</i>').replaceAll('p');

			$('.replace p').wrap('<div class="box2"></div>');
			//删除包裹的父节点
			$('.replace p').unwrap();
			//把所有段落的每个子内容加粗
			//取到当前的p标签的子内容，用strong标签包裹起来
			$('.replace p').wrapInner('<strong></strong>');
			var h3Tag = document.createElement('h3');
			h3Tag.innerText = 'alex';
			var htmlStr = '<h3>hello word</h3>';
			// $('.box').append(h3Tag);
			//如果是网页中的元素，是一种移动现象
			//append() appendTo()后置追加
			$('.box').append($('h3'));
			$('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function(){
    
				alert($(this).text());

			});
			//prepend() prependTo()前置追加
			$('.box').prepend('<a href="#">百度一下1</a>');
			$('<a href="#">百度一下2</a>').prependTo('.box');

			$('h3').after('<h1>武sir</h1>');
			$('<h2>老男孩</h2>').insertAfter('h1');

			$('button').click(function(){
    
				//既删除节点，又删除节点上的事件绑定
				// var btnJq = $(this).remove();
				// $('.box').prepend(btnJq);
				//仅仅删除了节点，事件保留
				// $(this).detach();

				//清空div.box
				$('.box').empty();
				// $('.box').text()
				$('.box').html('');

			})

		})
		//克隆元素
		$('.clone ul li').click(function(){
    
			$(this).clone(true).appendTo('.clone ul');
		})
	</script>
</body>
</html>

5.属性操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>属性操作</title>
	<style type="text/css">
		#box{
    
			height: 200px;
			width: 200px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div name = 'b' class="active"></div>
	<img src="" alt="">
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//动态添加,获取属性
		$(function(){
    
			//设置属性值
			// $('div').attr('id','box');
			//设置多个值
			$('div').attr({
    id:'box',title:'盒子'});
			console.log($('div').attr('name'));
			console.log($('div').attr('class'));
			setTimeout(function(){
    
				$('img').attr(
					{
    src:'../images/1.jfif',
					alt:'美女'})
			},2000)
		})
	</script>
</body>
</html>

6.类操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>类操作</title>
	<style type="text/css">
		.box{
    
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.active{
    
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			$('.box').click(function(){
    	
				$(this).toggleClass('active');	
				/*if(!$(this).hasClass('active')){
					$(this).addClass('active');
				}else{
					$(this).removeClass('active');

					//$(this).addClass('active a b');
				}*/
			})

		})
	</script>
</body>
</html>

7.值操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>值操作</title>
</head>
<body>
	<div id="content">
		<ul>
			<li>
				
			</li>
		</ul>
		<input type="text" name="" value="美女">
		<select id="single">
			<option>苹果</option>
			<option>香蕉</option>
		</select>

		<select id="multiple" multiple>
			<option selected>苹果</option>
			<option>香蕉</option>
			<option selected>橘子</option>
		</select>

		<input type="checkbox" value="A">A
		<input type="checkbox" value="B">B
		<input type="radio" value="1">男
		<input type="radio" value="0">女
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			//获取html中的值,既获取文本又获取html
			console.log($('#content ul li:first').html());
			//设置html中的值
			$('#content ul li:first').append(`<img src="../images/2.jfif">
				<p>小马哥</p>
				<h3>yeshou</h3>`);
			//仅仅获取文本的值
			console.log($('#content ul li').text());
			//获取文本输入框的值
			// console.log($('input[type=text]').val());

			// $('input[type=text]').val('帅哥');

			$('#single').val('香蕉');

			$('#multiple').val(['香蕉','橘子']);
			//给input设置值要使用value属性的值，不能使用文本的值
			$('input').val(['B','0']);
		})
	</script>
</body>
</html>

8.筛选的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>筛选的方法</title>
</head>
<body>
	<div class="box">
		<p>alex</p>
		<h3>mjj</h3>
		<ul>
			<li>wusir</li>
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
	</div>
	<div class="box2"></div>
	<div class="box3"></div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			//获取匹配元素的子元素(亲儿子)的集合
			console.log($('.box').children());

			console.log($('.box').next());
			//获取老爹
			console.log($('ul li').parent());
			//获取的是祖先辈们
			console.log($('ul li').parents());

			console.log($('.box2').prev());

			$('ul li').eq(2).css('color','red');


		})
	</script>
</body>
</html>

9.siblings方法的运用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>siblings</title>
	<style type="text/css">
		button{
    
			background-color: #fff;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<button>按钮1</button>
		</li>
		<li>
			<button>按钮2</button>
		</li>
		<li>
			<button>按钮3</button>
		</li>
		<li>
			<button>按钮4</button>
		</li>
	</ul>

	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			$('button').click(function(){
    
				//$(this).css('backgroundColor','red').siblings('button').css('backgroundColor','#fff');
				$(this).css('backgroundColor','red').parent().siblings('li').children().css('backgroundColor','#fff');
			})
		})
	</script>	
</body>
</html>

10.css的dom方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css的dom操作</title>
	<style type="text/css">
		*{
    
			padding: 0;
			margin: 0;
		}
		p{
    
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: yellow;
			border: 1px solid green;
			top: 200px;
			left: 100px;
		}
		body{
    
			padding: 60px;
		}
		.fixHeader{
    
			width: 100%;
			height: 60px;
			background-color: red;
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
		}
	</style>
</head>
<body style="height: 2000px">
	<div class="fixHeader"></div>
	<div class="box">
		<p></p>
	</div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			// console.log($('.box').css('color'));
			//设置值
			// $('.box').css('color','red');
			// $('.box').css('fontSize',20);

			$('.box').css({
    
				color:'red',
				fontSize:20
			})
			//获取当前窗口的相对偏移，获取出来是一个对象，里面保存着top和left属性
			var offset = $('p').offset();
			console.log(offset);

			$(window).scroll(function(){
    
				var scrollTop = $(this).scrollTop();
				if (scrollTop>offset.top){
    
					// console.log('time to show');
					$('.fixHeader').stop().fadeIn(400);
					// $('.fixHeader').stop().slideDown(2000);
				}else{
    
					$('.fixHeader').stop().fadeOut(400);
					// $('.fixHeader').stop().slideUp(4000);
				}
			})
		})
	</script>
</body>
</html>

11.宽高设置和获取

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>宽高设置和获取</title>
	<style type="text/css">
		.box{
    
			width: 200px;
			height: 200px;
			background-color: red;
			border: 2px solid #000;
			padding: 50px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script src="./jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
    
			// 包括width
			console.log($('.box').width());
			console.log($('.box').height());
			// console.log($('.box').height(300));
			//包括width+padding
			console.log($('.box').innerWidth());
			console.log($('.box').innerHeight());
			//包括width+padding+border
			console.log($('.box').outerWidth());

		})
	</