jquery相关及案例1

最新推荐文章于 2022-01-25 13:28:32 发布
最新推荐文章于 2022-01-25 13:28:32 发布
阅读量154 收藏 1
点赞数
文章标签： json html5 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53227758/article/details/119479960
版权

jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

这是原生js获取元素

		<script type="text/javascript">
			window.onload = function(){
				......
			}
		</script>

这是jquery获取元素

		<script type="text/javascript">

			$(function(){

     .			.....

			});

		</script>

jquery的好处是可以边加载边获取，效率比原生js快

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv = document.getElementById('div1');
				alert('原生弹出的'+oDiv)
			}
			/*ready的完整写法
			$(document).ready(function(){
				var $div = $('#div1');
				alert('jquery弹出的'+$div);
			})
			reday比window.onload 要快的原因
			window.onload 需要等渲染完
			reday 标签加载完就运行
			*/
			$(function(){
				var $div = $('#div1');
				alert('jquery弹出的'+$div);
			})
		</script>
	</head>
	<body>
		<div id="div1">这是一个div元素</div>
	</body>
</html>

先弹出jquery的然后是原生的简单说明,jquery性能高

jquery选择器

jquery选择器

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

对选择集进行过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

这是对于jquery选择器实施的简单实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $div = $('#div1');
				$div.css({'color':'red'});
				var $div2 = $('.box');
				$div2.css({'color':'green'});
				var $li = $('.list li');
				// 带-的样式属性可以写成驼峰或者原始的
				$li.css({'background-color':'pink','color':'#fff'})
			});//不加压缩容易出错
		</script>
	</head>
	<body>
		<div id="div1">这是一个div元素</div>
		<div class="box">这是第二个div元素</div>
		<div class="box">这是第三个div元素</div>
		<ul class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</body>
</html>

在这里插入图片描述
这是第二个实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('div').css({'backgroundColor':'gold'});

			$('div').has('p').css({'fontSize':'30px'});

			$('div').eq(4).css({'textIndent':'20px'});
			// prev上一个
			$('div').eq(4).prev().css({'color':'red'})
			// find找他里面的class
			$('div').find('.tip').css({'color':'red'})
			
		})
	</script>
</head>
	<body>
		<div>1</div>
		<div><p>2</p></div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div><span>8</span><span class="tip">9</span></div>
	</body>
</html>

在这里插入图片描述
这是选项卡实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $btn = $('.btns input');
				var $div = $('.cons div');
				// alert($btn.length)
				$btn.click(function(){
					// this指的是原生的this,它表示当前点击的对象
					$(this).addClass('current');
					// 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
					$(this).addClass('current').siblings().removeClass('current');
					// 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
					$div.eq( $(this).index() ).addClass('active').siblings().removeClass('active');
					
				})
			})
		</script>
		<style type="text/css">
			.btns input{
				width: 100px;
				height: 40px;
				background-color: #AFC6F6;
				border: 0;
				
			}
			.btns .current{
				background-color: gold;
			}
			.cons div{
				width: 500px;
				height: 300px;
				background-color: gold;
				display: none;
				text-align: center;
				line-height: 7.5rem;
				font-size: 2rem;
			}
			.cons .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="btns">
			
			<input type="image" value="01" class="current"/>
			<input type="image" value="01" />
			<input type="image" value="01" />
			
			<div class="cons">
				<div class="active">1111</div>
				<div>2222</div>
				<div>3333</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

绑定click事件

简单方法

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

绑定click事件实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					/*
					if($('.box').hasClass('col01'))
					{
						$('.box').removeClass('col01')
					}
					else{
						$('.box').addClass('col01')
					}
					简化成下面的，toggleClass点击，没有加上，有就减去
					*/
				   $('.box').toggleClass('col01')
				})
			})
		</script>
		<style type="text/css">
			.box{
				width: 5rem;
				height: 5rem;
				background-color: gold;
			}
			.col01 {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<input type="button" id="btn" value="切换样式">
		<div class="box">div元素</div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

实例层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>
	
	
	<style type="text/css">
		body{
			font-family:'Microsoft Yahei';
		}
		body,ul{
			margin:0px;
			padding:0px;
		}
		
		ul{list-style:none;}


		.menu{
			width:200px;
			margin:20px auto 0;
		}

		.menu .level1,.menu li ul a{
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
			border-bottom:1px solid #afc6f6;
			
		}

		.menu li ul a{
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;
					
		}

		.menu li ul li{
			border-bottom:1px solid #afc6f6;
		}

		

		.menu li ul{
			display:none;
		}

		.menu li ul.current{
			display:block;
		}

		.menu li ul li a:hover{
			background-color:#f6b544;
		}


	</style>
	
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">
		
		$(function(){

			$('.level1').click(function(){

				//当前点击的元素紧挨的同辈元素向下展开，再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),选择其他同辈元素(li)的子元素ul，然后将它向上收起。

				// 通过stop() 可以修正反复点击导致的持续动画的问题
				$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();




			})

		})

	</script>
</head>
<body>
	<ul class="menu">
		<li>
			<a href="#" class="level1">水果</a>
			<ul class="current">
				<li><a href="#">苹果</a></li>
				<li><a href="#">梨子</a></li>
				<li><a href="#">葡萄</a></li>
				<li><a href="#">火龙果</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">海鲜</a>
			<ul>
				<li><a href="#">蛏子</a></li>
				<li><a href="#">扇贝</a></li>
				<li><a href="#">龙虾</a></li>
				<li><a href="#">象拔蚌</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">肉类</a>
			<ul>
				<li><a href="#">内蒙古羊肉</a></li>
				<li><a href="#">进口牛肉</a></li>
				<li><a href="#">野猪肉</a></li>				
			</ul>
		</li>
		<li>
			<a href="#" class="level1">蔬菜</a>
			<ul>
				<li><a href="#">娃娃菜</a></li>
				<li><a href="#">西红柿</a></li>
				<li><a href="#">西芹</a></li>
				<li><a href="#">胡萝卜</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">速冻</a>
			<ul>
				<li><a href="#">冰淇淋</a></li>
				<li><a href="#">湾仔码头</a></li>
				<li><a href="#">海参</a></li>
				<li><a href="#">牛肉丸</a></li>
			</ul>
		</li>
		
	</ul>
</body>
</html>

在这里插入图片描述

小赵呢
关注
jQuery案例
Su3253067688的博客
10-24 1138
3.页面元素的综合操作。2.图书分类下拉列表。
JQuery 案例
南淮北安的博客
04-06 758
文章目录一、广告的自动显示与隐藏二、抽奖 一、广告的自动显示与隐藏 需求： * 当页面加载完，3秒后。自动显示广告 * 广告显示5秒后，自动消失。 分析： * 使用定时器来完成。setTimeout (执行一次定时器) * 分析发现JQuery的显示和隐藏动画效果其实就是控制display * 使用 show/hide方法来完成广告的显示 代码 <!--引入jquery--&g...
jquery案例
m0_57732255的博客
01-25 1019
jquery案例 1：开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开光灯</title> <style> </style> </head> <body> <button id="btn1">开灯</button> <bu.
jQuery 案例
不因俊俏难为友，正为风流始读书
06-03 623
*5 jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
06-29
在这个压缩包中，你将找到一系列与jQuery相关的Web开发案例，涵盖了以下关键知识点： 1. **DOM操作**：jQuery使得选取HTML元素变得极其简单，如`$("#id")`用于选取ID为指定值的元素，`$(".class")`用于选取所有类名...
JavaScript各种小案例，还有jQuery相关案例
最新发布
06-05
这是关于JavaScript的学习代码， 邮箱自动导航：实现一个自动导航至用户邮箱地址的功能，为用户提供便捷的联系方式...应用jQuery的show和hide等方法设计纵向导航菜单：利用jQuery的show和hide等动画效果，设计出一个用
前端：jQuery,购物车案例
03-28
(1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 (5)点击每个全选按钮将所有输入框都选中 (6)点击底部删除按钮删除选中的li (7)每一个主体...
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 ...
jquery 小例子
03-21
NULL 博文链接：https://hb-keepmoving.iteye.com/blog/937908
50个Jquery经典实例 50个Jquery经典实例
03-23
50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例
jQuery-案例
Sco_jing的博客
07-25 494
【案例】新浪下拉菜单 实现效果： 代码： <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px;
jQuery:案例
JH灰色的博客
01-14 183
文章目录(1) 案例1:简单计算器(2) 案例2:使用class改变图片的样式(3) 案例3: 全选 反选 取消 (1) 案例1:简单计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例-简单计算器</title&gt...
jQuery 实例
世事如棋__2016的博客
02-19 853
* 提示：ready() 函数不应与 一起使用。    *  jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。       可以通过下面的标记把 jQuery 添加到网页中：    1.允许使用以下三种语法：     1.$(document).ready(function)     2.$().ready(function)
jQuery小案例
weixin_49756484的博客
05-18 860
jQuery小案例 这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果 我们先开始如何该表网页的背景颜色： 第一步：还是老规矩，先把页面新建好，在开始写我们的代码 第二步：开始写我们的html和css样式。这里我就把html和css样式的代码省略了，（图表1 则是我写的最终效果） 图表 1 样式写出来了，可是不我想要的一个效果，我想要的是点击一下红色方块整个网页的背景就变成了红色，点击绿色方块整个网页又变成了绿色，这个效果该
JQuery小案例
小头Sophia
03-18 2457
1.
jQuery技巧与案例深度解析
"Jquery方法技巧和案例大全" 在JavaScript的世界里，jQuery库以其简洁的语法和强大的功能，极大地简化了DOM操作和事件处理。本文将深入探讨jQuery的一些关键技巧和实用案例，帮助开发者更好地理解和应用jQuery。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值