jQuery、jquery实现隔行换色、jquery实现省市联动、jquery实现商品左右选择

最新推荐文章于 2022-09-18 08:29:48 发布
最新推荐文章于 2022-09-18 08:29:48 发布
阅读量213 收藏 1
点赞数
分类专栏： JS 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44518089/article/details/108249142
版权

jQuery

jQuery就是js写好的框架，直接用就可以了。今天的jquery全部实现昨天的javascript案例。
1.文档加载事件

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		alert("点我弹出来");
	})
</script>
<body>
	<button type="button" id="btn">点击</button>
</body>

js和jq互换

	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		document.getElementById("btn1").onclick=function(){
			document.getElementById("dv").innerHTML="js变成jq"
		}
		
		$("#btn2").click(function(){
			$("#dv").get(0).innerHTML="jq-->js"; //get()获取下标为0的元素
		})
	})
</script>

、

js–>jq
jq–>js


看效果

jquery实现遍历

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		var arr = ["xx","yy","zz",123,345];
		$(arr).each(function(i,m){ //方法一
			console.log(i,m);
		})
		$.each(arr,function(j,n){ //方法二
			console.log(j,n);
		})
	})
</script>

jquery定时广告

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		setTimeout(function(){
			$("#img").show(3000);
		})
		setTimeout(function(){
			$("#img").hide(3000);
		})
	})
</script>
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
	<img id="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1516106012,1668938260&fm=26&gp=0.jpg" style="display: none;">
</body>

jquery图片的显示与隐藏

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			// $("#img").show() 显示
			// $("#img").slideDown(); //滑动
			$("#img").fadeIn() //淡入淡出
		})
		$("#btn2").click(function(){
			// $("#img").hide()
			// $("#img").slideUp();  
			$("#img").fadeOut()
		})
	})
</script>
<body>
	<button type="button" id="btn1">显示</button>
	<button type="button" id="btn2">隐藏</button>
	<img style="display: none;" id="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1516106012,1668938260&fm=26&gp=0.jpg" >
</body>

jquery基础选择器
基础选择器：id选择器（#），类选择器（.）元素选择器（标签）通配符选择器（*），多个选择器

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#dv1").css("color","red");
		})
		$("#btn2").click(function(){
			$(".m").css("font-size","50px");
		})
		$("#btn3").click(function(){
			$("*").css("background","pink");
		})
		$("#btn4").click(function(){
			$("div").css("border","5px solid red")
		})
	})
</script>
<body>
	<button type="button" id="btn1">点击查看区别</button>
	<button type="button" id="btn2">点击查看区别</button>
	<button type="button" id="btn3">点击查看区别</button>
	<button type="button" id="btn4">点击查看区别</button>
	
	<div id="dv1">
		<div class="m">
			1.1
		</div>
	</div>
	
	<div>
		<div class="m">
			2.1
		</div>
		<div class="m">
			2.2
		</div>
	</div>
	
	<div>
		<div class="m">
			3.1
		</div>
		<div class="m">
			3.2
		</div>
		<div class="m">
			3.3
		</div>
	</div>
	<span id="span">
		span
	</span>
</body>

层级选择器：
子选择器：选择器1>选择器2 找到选择器1内所有的内符合选择器的元素
后代选择器：选择器1 选择器2 可以找到下一层和下下一层的
相邻兄弟选择器：选择器1+选择器2 两个紧挨着的选择器，只能向下，不能向上，
找出所有的子选择器：选择器1~选择器2（在div里面最上面的就是最大的选择器）

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" 				type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#dv1 > div").css("font-size","30px");
		})
		$("#btn2").click(function(){
			$("#dv2 div").css("background","pink");
		})
		$("#btn3").click(function(){
			$("#dv2+#dv3").css("color","red");
		})
		$("#btn4").click(function(){
			$("#dv2~div").css("color","yellow");
		})
	})
</script>
<body>
	<button type="button" id="btn1">点击查看区别</button>
	<button type="button" id="btn2">点击查看区别</button>
	<button type="button" id="btn3">点击查看区别</button>
	<button type="button" id="btn4">点击查看区别</button>
	
	<div id="dv1">
		<div class="m">
			1.1
		</div>
	</div>
	
	<div id="dv2">
		<div class="m">
			2.1
		</div>
		<div class="m">
			2.2
		</div>
	</div>
	
	<div id="dv3">
		<div class="m">
			3.1
		</div>
		<div class="m">
			3.2
		</div>
		<div class="m">
			3.3
		</div>
	</div>
	<span id="span">
		span
	</span>
</body>

属性选择器：根据属性来选择元素
div[id] 筛选出所有div中的id属性的div
attr设置属性和属性返回的值

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("div[id]").css("background","red");
		$("#btn").click(function(){
			$("#img").attr("src","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3827979925,394068707&fm=26&gp=0.jpg")
		})
	})
</script>
<body>
	<div><p>第一个</p></div>
	<div id="dv">展示</div>
	<button type="button" id="btn">修改图片</button>
	<img id="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1516106012,1668938260&fm=26&gp=0.jpg" >
</body>

jquery实现隔行换色

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" type="text/javascript" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("tr:even").css("background","red");
		$("tr:odd").css("background","blue");
		 num = 0;
		$("input:first").click(function(){
			$.each($("input:gt(0)"),function(i,m){
				$(m).prop("checked",$("input:first").prop("checked"));
			})
			if($("input:first").prop("checked")){
				// console.log($("input").length)
				num = $("input:gt(0)").length;
			}else{
				num = 0;
			}
		})
		$("input:gt(0)").click(function(){
			if(!$(this).prop("checked")){
				$("input:fitst").prop("checked",false);
				num--;
			}else{
				num++;
			}
			if(num == $("input:gt(0)").length){
				$("input:first").prop("checked",true);
			}
		})
	})
</script>
<body>
	<center>
		<table border="1" id="tb">
			<tr>
				<th><input type="checkbox" id="check"/></th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td><input type="checkbox" id="check"/></td>
				<td>rr</td>
				<td>12</td>
				<td>女</td>
				<td>ta</td>
				<td>ta</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check"/></td>
				<td>rr</td>
				<td>12</td>
				<td>女</td>
				<td>ta</td>
				<td>ta</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check"/></td>
				<td>rr</td>
				<td>12</td>
				<td>女</td>
				<td>ta</td>
				<td>ta</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check"/></td>
				<td>rr</td>
				<td>12</td>
				<td>女</td>
				<td>ta</td>
				<td>ta</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check"/></td>
				<td>rr</td>
				<td>12</td>
				<td>女</td>
				<td>ta</td>
				<td>ta</td>
			</tr>
		</table>
	</center>
</body>

query实现省市联动

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js" 			type="text/javascript" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("#se1").click(function(){
			cityList= [["成都","乐山","绵阳"],["长沙","岳阳","雍州"],["昆明","大理","丽江"]];
			citys = cityList[this.value];
			city = $("#se2").get(0);
			 $("#se2").empty();
			 $(citys).each(function(i,m){
				 $("#se2").append("<option>"+m+"</option>");
			 })
		})
	})
</script>
<body>
	<h1>省市联动</h1>
	<select id="se1">
		<option value="">---请选择省份---</option>
		<option value="0">四川省</option>
		<option value="1">湖南省</option>
		<option value="2">云南省</option>
	</select>
	<select id="se2">
		
	</select>
</body>

jquery实现商品左右选择

<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#select2").append($("#select1 option:selected"));
		})
		$("#btn2").click(function(){
			$("#select1").append($("#select2 option:selected"));
		})
	})
</script>
<body bgcolor="antiquewhite">
	<center>
		<h1>商品的左右选择</h1>
		<table border="1">
			<tr>
				<th>分类名称</th>
				<th><input type="text" value="手机数码" style="float: left;" /></th>
			</tr>
			<tr>
				<th>分类描述</th>
				<td>
					<div class="fl">
						<h1>已有商品</h1>
						<select multiple="multiple" id="select1">
							<option value="0">iphone</option>
							<option value="1">小米</option>
							<option value="2">华为</option>
							<option value="3">oppo</option>
							<option value="4">apple</option>
						</select>
						<br>
						<button type="button" id="btn1"> >></button>
					</div>
					
					<div class="fr">
						<h1>未有商品</h1>
						<select id="select2" multiple="multiple">
							<option value="0">诺基亚</option>
							<option value="1">三星</option>
							<option value="2">htc</option>
							<option value="3">bttb</option>
							<option value="4">otto</option>
						</select>
						<br>
						<button type="button" id="btn2"> << </button>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="button">提交</button>
				</td>
			</tr>
		</table>
	</center>
</body>
三月计划
关注
专栏目录
jquery根据条件变换表格颜色
Hxuening的博客
10-10 591
$(document).ready(function(){ //库存低于库存预警变色 $("#listTable").find("tr").each(function () { var v1 = parseFloat($(this).children('td:eq(5)').text()); //取行第5列值 var v2 = parseFloat($(t..
JQuery中的商品左右选择
mqingo的博客
11-25 553
步骤分析:                 1. 导入JQ的文件                 2. 文档加载函数 :页面初始化                 3.确定事件 :　点击事件　onclick                 4. 事件触发函数                     1. 移动被选中的那一项到右边   01JQuery中的商品左右选择.html &lt;!DO...
java结合jQuery.ajax实现左右菜单联动刷新列表内容
dgz41976的博客
08-23 252
http://域名/一级菜单ID-二级菜单ID/用这样的URL请求页面，出现如图所示内容； 该页面包含四部分，顶部目录+左侧菜单+右侧菜单+右下侧数据列表； 左侧菜单包含一级菜单和二级菜单，点击某个一级菜单时打开对应的二级菜单，同时右侧也显示二级菜单；选中左侧某个二级菜单，右侧对应的二级菜单也被选中，点击右侧二级菜单，显示对应的三级菜单，默认选中三级菜单的全部，点击某个三级菜单，列...
jQuery隔行换色
ahao4311的博客
02-20 283
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
jquery入门—选择器实现隔行变色实例代码 (仅仅一行代码，实现隔行变色！)
xueshandugu的专栏
06-11 742
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。  2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。  3、使用JQuery选择器实现隔行变色，示例代码如下：  复制代码代码如下:       使用JQuery实现隔行变色            
jQuery方法简洁实现隔行换色及toggleClass的使用
12-12
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下： 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>隔行换色</title> [removed][removed] ...
jquery实现表格隔行换色效果
10-23
要实现表格隔行换色的效果，最常见的方式是利用jQuery的`:odd`和`:even`选择器来选取奇偶行，然后通过`.addClass()`方法为这些行添加特定的CSS类，从而改变它们的背景颜色。 #### 1. 创建项目和引入jQuery库 首先...
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
01-19
js代码： css代码： 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
jquery实现隔行换色特效特效代码
03-20
`jQuery`是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及动画效果的创建，因此使用`jQuery`来实现隔行换色特效是一种常见且高效的方法。 首先，我们需要了解`jQuery`的基本用法。`jQuery`的核心是...
使用简洁的jQuery方法实现隔行换色功能
10-26
最后，通过使用jQuery选择器和方法，我们能够以非常简洁的代码实现隔行换色的功能。第一种方法虽然直观，但代码相对较长。第二种方法通过toggleClass()方法简化了实现过程，减少了代码量，同时也让代码的逻辑更加...
jQuery商品左右滑动切换代码
最新发布
ICode联盟
09-18 148
jQuery商品左右滑动切换代码，开抢倒计时特效代码。
jq中实现2级联动
涐的野心就是占有沵
03-16 894
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
表单对象属性过滤选择器，隔行换色，选中行换色，全选，反选，全不选，开关灯，加法计算
AutisticRoad的博客
08-04 270
表单对象属性过滤选择器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/
【jquery】购物车-全选与全不选，修改商品背景颜色，删除商品，增减商品数目并计算总价格
sanqianjia的博客
12-02 1959
1-实现购物车增减商品数目
jquery实现两元素联动样式
菜菜鸟的博客
07-25 432
通过下标defaultIndex，联动轮播图和ul列表样式
JQuery——实现隔行换色
Melonico的博客
07-01 3468
基础页面显示 页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="jquery-3.5.1.js"></script> <style> table{ margin: auto;
jquery(操作元素样式)隔行换色
wei_Bug的博客
05-02 254
下面附上部分代码: 1. 首先导入插件: <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="boostrap/js/bootstrap.min.js" >&l...
Javascript知识【jQuery样式操作&案例：jQuery隔行换色】
日常学习总结
08-11 4868
主要介绍jQuery操作css样式，以及巩固知识的一个案例用jQuery进行隔行换色
JQuery实现表格隔行换色，鼠标移动变色，点击选择变色
dengqi4009的博客
11-23 265
Code <%@PageLanguage="C#"AutoEventWireup="true"Codebehind="WebForm1.aspx.cs"Inherits="WebApplication14.WebForm1"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitiona...
Jquery实现表格隔行、点击、移动换色插件
隔行变色功能通过jQuery的选择器`tbody>tr:enev`和`tbody>tr:odd`实现，分别对偶数行和奇数行添加相应的CSS类，从而改变背景颜色。 点击行变色功能通过监听`tbody>tr`元素的点击事件来实现。当用户点击某一行时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值