JQuery练习案列

最新推荐文章于 2024-05-08 02:39:14 发布
最新推荐文章于 2024-05-08 02:39:14 发布
阅读量415 收藏 1
点赞数
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71467744/article/details/127282579
版权

1.隔行换色

首先需要定义一个入口函数$(function(){}); 在函数中用过滤选择器选择索引号为奇数的用

$("tr:gt(1):odd")后面绑定对应的操作
$("tr:gt(1):odd").css("backgroundColor","pink");

奇数与其一致采用不同的

$("tr:gt(1):even").css("backgroundColor","yellow");

执行效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		
		<script>
			//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
			$(function () {
				$("tr:gt(1):odd").css("backgroundColor","pink");
				$("tr:gt(1):even").css("backgroundColor","yellow");
			});
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="删除"></td>
			</tr>
			<tr style="background-color: #999999;">
				<th><input type="checkbox"></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

2.全选与全不选

在表头复选框绑定事件，

<th><input type="checkbox" οnclick="selectAll(this)" ></th>

在<script></script>内部实现事件函数，并采用类选择器，将表中复选框的checked属性值设置为与当前复选框的值一样

function selectAll(obj) {
   $(".itemSelect").prop("checked",obj.checked);
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		<script>
			function selectAll(obj) {
				$(".itemSelect").prop("checked",obj.checked);
			}


		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="删除"></td>
			</tr>
			<tr>
				<th><input type="checkbox" onclick="selectAll(this)" ></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

3.qq表情选择

在<script></script>内部写一个入口函数，并给所有的表情绑定事件

$(function () {
    //1.给表情加事件
    $("ul img").click(function () {
    });

});

最后将获取到的表情append添加到对应的p标签后面，因为p标签定义了class采用class选择器将对应的表情添加到该标签后，因为this是一个js标签不能直接使用JQuery的方法，需要将其转换为jq标签$(this)；但是为了达到点击一次后原表情仍在原处，后面点击可以继续使用需要使用到jQuery的克隆方法.clone()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择</title>
	 <script  src="../../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}
    ul{overflow: hidden;}
    li{float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{ cursor: pointer; }
    </style>
	<script>
        //需求：点击qq表情，将其追加到发言框中
        $(function () {
            //1.给表情加事件
            $("ul img").click(function () {

                //2.追加到p标签后
                $(".word").append($(this).clone());
            });

        });

		
		
    </script>
	
</head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>请发言：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
</html>

4.下拉列表的左移和右移

首先需要在入口函数中采用id选择器获得左（或者右）列表中选中的option对象，采用append（或者appendTo）方法拼接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>


		<style>
			#leftName , #btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
				height: 500px;
				padding: 100px;
			}
		</style>

		<script>
			$(function () {
				$("#toRight").click(function () {
					//获取右边下拉列表对象，append（在边选中的option）
					$("#rightName").append($("#leftName>option:selected"));
				});
				$("#toLeft").click(function () {

					//$("#leftName").append($("#rightName>option:selected"));
					//appendTo
					$("#rightName>option:selected").appendTo($("#leftName"));
				});
			});
			//需求：实现下拉列表选择条目左右选择功能


		</script>



	</head>
	<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>张三</option>
				<option>李四</option>
				<option>王五</option>
				<option>赵六</option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">

			</div>

			<select id="rightName" multiple="multiple">
				<option>钱七</option>
			</select>

		</div>


	</body>
</html>

m0_71467744
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1237
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
jQuery练习
张子又
01-19 1128
城市多选移动案例： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;st
笔记：jquery基础方法——lt(),gt(),eq()方法
qq_44604924的博客
04-20 4412
（1）lt():匹配所有小于给定索引值的元素,索引从0开始 例： 1 2 3 4 $(“tr:lt(3)”) 会找到表格中1，2，3的单元格。 （2）gt():匹配所有大于给定索引值的元素,索引从0开始 例： 1 2 3 4 $(“tr:gt(1)”) 会找到表格中3，4的单元格 （3）eq()方法：将匹配元素为指定给索引，索引从0开始 例： 1 2 3 4 $(“tr:eq(1)”) 会找...
jQuery基础
weixin_43544588的博客
06-23 171
jQuery基础 学习目标： 能够理解js框架的概念(了解) 能够引入jQuery(掌握) 能够使用jQuery的基本选择器(掌握) 能够使用jQuery的层级选择器(了解) 能够使用jQuery的属性选择器(了解) 能够使用jQuery的基本过滤选择器(了解) 能够使用jQuery的属性过滤选择器(了解) 能够使用jQuery的DOM操作的方法(掌握) 能够完成隔行换色案例(掌握) 能够完成全选全不选案例(掌握) 第1章 自定义js框架 1.1 js框架概述 框架（Framework）是整个或部分系统
最新JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码，2024年最新阿里三面
最新发布
2401_84185556的博客
05-08 1002
/通过给$.fn添加方法就能够扩展jquery对象});});标题1我是弹出来的div1◆◆◆});});});
jQuery练习案例：实现用户登录验证和图书列表添加删除（+原生）
欢迎来到长风沛雨的博客
11-20 3401
练一个普通的JS案例...
jQuery--表格隔行变色
qq_52567967的博客
09-27 2287
jQuery--表格隔行变色
jquery一些案列和一些选择器
11-15
本教程将基于提供的"jquery一些案列和一些选择器"来深入理解jQuery的核心概念和常用选择器。 1. **jQuery引入** 在HTML文档中，可以通过在`<head>`标签内添加`<script>`标签来引入jQuery库。通常，我们从CDN（内容...
jquery案列实战
03-24
弹幕效果案列。
JQuery综合练习.docx
06-11
在给定的文档中，我们看到了一个关于jQuery的综合练习，主要涵盖了两个核心知识点：全选与反选复选框的操作以及下拉框选项的移动功能。以下是这两个知识点的详细说明： 1. **全选与反选复选框操作**： 这个练习...
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
JQuery综合练习2.docx
06-11
在本篇关于jQuery的综合练习中，我们涵盖了多个核心知识点，包括jQuery对象的隐式迭代、DOM对象与jQuery对象的转换、以及`text()`、`attr()`和`val()`等方法的使用。以下是对这些概念的详细解释： 1. **jQuery对象...
jQuery过滤器
陈 浩
11-04 948
在jQuery中可以使用过滤器对选取的数据进行过滤，从而选择更明确的元素。jQuery过滤器的通常用法如下， $(“选择器 : 过滤器”) 1．基本过滤器 1.1 :first      使用 :first 过滤器可以匹配到找到的第一个元素。例如，使用 $(“tr:first”) 可以选择表格的第一行 1.2 :last      使用 :last 过滤器可以匹配到找到的最后一个元素。
50个实用的jquery案例
二手农民的学习博客
02-25 4659
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
JQuery小练习
qizhichao110的专栏
01-23 8231
1、加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。             $(function () {             $('#btn').click(function () {                 var first = parseInt($('#btnFirst').val());                 var
jQuery常用编程案例
Zijian Su的博客
02-10 339
文章目录jQuery实现全选，反选和取消按钮基于DOM来实现反选基于jQuery的写法基于jQuery（使用三元运算符） jQuery实现全选，反选和取消按钮 以下是要操控的HTML代码 <input type="button" value="全选" onclick="selectAll()"/> <input type="button" value="取消" oncli...
JavaWeb学习总结：JQuery
怪咖的博客
09-02 325
JQuery基础 一，概念 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScrip...
jquery案列dom操作
03-13
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务。下面是一个使用jQuery进行DOM操作的示例： HTML代码： ```html <div id="myDiv"> <p>Hello, jQuery!</p> </div> ``` JavaScript代码： ```javascript // 通过id选择器获取元素 var myDiv = $("#myDiv"); // 修改元素的文本内容 myDiv.text("Hello, CSDN!"); // 添加新的元素 var newParagraph = $("<p>New paragraph</p>"); myDiv.append(newParagraph); // 修改元素的样式 myDiv.css("color", "red"); // 绑定点击事件 myDiv.click(function() { alert("You clicked the div!"); }); ``` 上述代码中，首先通过`$("#myDiv")`使用id选择器获取到id为"myDiv"的元素，然后使用`.text()`方法修改元素的文本内容。接着使用`$("<p>New paragraph</p>")`创建一个新的`<p>`元素，并使用`.append()`方法将其添加到`myDiv`元素中。使用`.css()`方法修改元素的样式，将文本颜色设置为红色。最后使用`.click()`方法绑定点击事件，当点击`myDiv`元素时弹出提示框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值