jQuery应用举例

最新推荐文章于 2022-08-04 09:55:06 发布
最新推荐文章于 2022-08-04 09:55:06 发布
阅读量298 收藏 1
点赞数
分类专栏： Java Web jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Levana1994/article/details/90154370
版权
该博客详细介绍了jQuery在实际应用中的多个示例，包括隔行换色、全选全消、QQ表情选择、分组菜单、省市联动、左右选择、定时广告、抽奖程序以及表单校验等实用功能，展示了jQuery在网页交互和增强用户体验方面的强大能力。

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

jQuery应用举例

文章目录

一.隔行换色

  • 页面:
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 500px;
				margin: 0 auto;
				border-collapse: collapse;
			}
			td,th{
				border: 1px solid blue;
				text-align: center;
			}
		
			.evenTr{
                /*偶数行样式*/
                background-color: lightblue;
            }
            .oddTr{
                /*奇数行样式*/
                background-color: lightgreen;
            }
            .activeTr{
                /*鼠标移入后 所在行样式*/
                background-color: #ccc;
            }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>1</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>2</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>3</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>4</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>5</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>6</td>
				<td></td>
				<td></td>
			</tr>
		</table>

		<script src="../js/jquery-3.3.1.min.js"></script>
		<script>
			//奇数行设置oddTr的类名
            $("tr:gt(0):odd").addClass("oddTr");
			//偶数行设置evenTr的类名
            $("tr:gt(0):even").addClass("evenTr");
            //鼠标移入变色，移走还原
			$("tr:gt(0)").mouseover(function () {
                $(this).toggleClass("activeTr");
            }).mouseout(function () {
                $(this).toggleClass("activeTr");
            })
		</script>
	</body>
</html>

二.全选全消

  • 页面:
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 500px;
				margin: 0 auto;
				border-collapse: collapse;
			}
			td,th{
				border: 1px solid blue;
				text-align: center;
			}
		
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th style="width:100px;">
					<input type="checkbox" id="checkall" title="全选/全消"/>
					<input type="button" value="反选" id="reverse">
				</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>1</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>2</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>3</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>4</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>5</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>6</td>
				<td></td>
				<td></td>
			</tr>
		</table>
	<!--
	要求：
		点击checkall的时候，
			if checkall是选中状态，那么所有的item都要设置为：选中状态
			if checkall是未选中状态，那么所有的item都要设置为：未选中状态
	-->

		<script src="../js/jquery-3.3.1.min.js"></script>
		<script>
			$("#checkall").click(function () {
				//1.先得到checkall的选中状态：checked属性
				//如果是使用匿名函数方式绑定的事件，在函数里可以使用this，表示当前事件源对象（是js对象）
                //var v = $("#checkall").prop("checked");
				//var v = this.checked;

				//2.如果v是true，所有item设置为true；如果v是false，所有item设置为false
				//直接把v的值，设置给所有的item  checked属性
				//$(".item").prop("checked", v);

                $(".item").prop("checked", this.checked);
            });

			$("#reverse").click(function () {
				//所有的item，选中状态取反。 把所有的item，挨个点击一遍
				$(".item").click();
            });

            /**
			 * 要求：只有所有的item全部选中了，才设置checkall为选中状态；否则设置checkall为未选中状态
			 * 分析：
			 * 		给所有的item绑定单击事件，单击时做：
			 * 			判断是否所有的item，全选中了：判断选中的个数是否等于总个数
			 * 			如果全选中了，就设置checkall为选中状态；否则设置为未选中状态
             */
            $(".item").click(function () {
				//判断是否所有的item，全选中了：判断选中的个数是否等于总个数
				var v = $(".item").length === $(".item:checked").length;
				//设置checkall的选中状态
				$("#checkall").prop("checked", v);
            });
		</script>
	</body>
</html>

三.QQ表情选择

  • 页面
    QQ表情
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择</title>
    <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>
</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>
        <strong>请发言：</strong>
        <p class="word" contenteditable="true">
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>

    <!--
    要求：
        ul里的表情图片被点击时，要把被点击的图片，添加到word内部最后,且能删除
    -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $("ul img").click(function () {
            $(this).clone().appendTo(".word");
        });
    </script>
</body>
</html>

四.分组菜单

  • 页面
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:300px;
			}
			span, a{
				display: block;
				width:300px;
			}
			span{
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div>
			<span>分组一</span>
			<a>张三</a>
			<a>李四</a>
			<a>王五</a>
		</div>
		<div>
			<span>分组二</span>
			<a>小明</a>
			<a>小红</a>
			<a>小蓝</a>
		</div>
		<div>
			<span>分组三</span>
			<a>tom</a>
			<a>jerry</a>
			<a>john</a>
		</div>
		
		<script type="text/javascript" src="./jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			/*
			 * 需求：
			 * 	点击哪个分组，就把哪个分组的成员显示出来，其它分组的成员要隐藏
			 * 
			 * 1. 先把所有分组的成员都隐藏：把所有的a标签隐藏
			 * 2. 给每一组的标题span标签绑定单击事件
			 * 3. 单击之后要做的事件：
			 * 		把被点击的这一分组的成员显示出来
			 * 		把其它分组的成员隐藏起来
			 */
			$("a").hide();
			$("span").click(function(){
				//被点击的这一分组的成员显示出来了
				$(this).siblings("a").show(200);
				//其它分组的成员要隐藏起来
				$(this).parent().siblings("div").children("a").hide(200);
			});
		</script>
	</body>
</html>

五.省市联动

  • 页面
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="province">
			<option value="">--选择省--</option>
			<option value="0">河南省</option>
			<option value="1">河北省</option>
			<option value="2">山东省</option>
			<option value="3">山西省</option>
		</select>
		<select id="city">
			<option value="">--选择市--</option>
		</select>
		
		<script type="text/javascript" src="./jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			var cities = [
				["郑州市","洛阳市","开封市"],//cities[0]---河南省的市
				["石家庄市","保定市","唐山市"],//cities[1]---河北省的市
				["济南市","烟台市","青岛市"],//cities[2]---山东省的市
				["太原市","晋中市","临汾市"]//cities[3]---山西省的市
			];
			
			/*
			 * 省市联动：
			 * 	选择一个省，在市的下拉框里列出来这个省对应的市的选项
			 * 
			 * 1. 监听省下拉框的变化，onchange监听
			 *  把市下拉框中的选项，只保留一个提示选项，其它都不要
			 * 2. 获取到选中的省的值，根据省的值获取到 这个省的所有市的数据
			 * 3. 循环所有的市，每个市创建一个option标签，把市放到option标签里
			 * 4. 把每个option标签对象都插入到city下拉框里
			 */
			$("#province").change(function(){
				//清除掉city里原有的下拉选项，留一个提示选项
				$("#city").html("<option value=''>--选择市--</option>");
				
				//获取到省的值，根据省获取市的数据
				var myCities = cities[this.value];//字符串数组
				$(myCities).each(function(){
					//创建标签，把当前市的名称设置到option标签里
					$("<option></option>").html(this).appendTo("#city");
				});
			});
		</script>
	</body>
</html>

六.左右选择

  • 页面
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 300px;
				margin: 0 auto;
			}
			select{
				width: 100px;
				height: 120px;
			}
			td{
				text-align: center;
			}
			input[type="button"]{
				width: 50px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>可选项</td>
				<td></td>
				<td>已选项</td>
			</tr>
			<tr>
				<td>
					<select id="left" multiple="multiple">
						<option>选项0</option>
						<option>选项1</option>
						<option>选项2</option>
						<option>选项3</option>
						<option>选项4</option>
						<option>选项5</option>
						<option>选项6</option>
						<option>选项7</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight"/><br />
					<input type="button" value=">>>" id="allToRight"/><br />
					<input type="button" value="<" /><br />
					<input type="button" value="<<<" /><br />
				</td>
				<td>
					<select id="right" multiple="multiple">
						<option>选项8</option>
						<option>选项9</option>
					</select>
				</td>
			</tr>
		</table>
		
		<script type="text/javascript" src="./jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			/*
			 * 左右选择：
			 * 	点击">"按钮时，把左边被选中的option选项，移动到右边
			 * 	点击">>>"按钮时，反左边全部的option选项，都移动到右边
			 */
			$("#toRight").click(function(){
				$("#left>option:selected").appendTo("#right");
			});
			$("#allToRight").click(function(){
				$("#left>option").appendTo("#right");
			});
		</script>
	</body>
</html>

七.定时广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时广告</title>
</head>
<body>
<!--
要求：页面上有广告图片，默认是隐藏的
    页面打开2秒后，广告图片显示出来。  setTimeout
    显示3秒种后，广告图片再隐藏掉  setTimeout
-->
<img id="ad" src="img/ad.jpg" alt="" style="width:100%;display: none">

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //页面打开2秒后，广告图片显示出来。
    setTimeout(function () {
        $("#ad").fadeIn(500);

        //显示3秒种后，广告图片再隐藏掉
        setTimeout(function () {
            $("#ad").fadeOut(500);
        }, 3000);
    }, 2000);



</script>
</body>
</html>

八.抽奖程序

  • 页面
    在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script language='javascript' type='text/javascript'>
    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "img/man00.jpg",
        "img/man01.jpg",
        "img/man02.jpg",
        "img/man03.jpg",
        "img/man04.jpg",
        "img/man05.jpg",
        "img/man06.jpg"
    ];

    /**
     * 开始抽奖
     *  小像框里不停的随机切换图片  setInterval
     */
    var timer;
    function imgStart() {
        timer = setInterval(function () {
            //要求：index是 0~6的随机整数（包含0和6）
            //Math.random()范围是：[0, 1)  。 Math.random()*7范围是：[0,7)。 Math.random()*7向下取整，范围是：[0, 6]
            var index = Math.floor(Math.random() * 7) ;
            var imageSrc = imgs[index];
            //切换图片
            $("#img1ID").attr("src", imageSrc);
        }, 20);

        //定时器开启之后，就禁用“开始”按钮
        $("#startID").attr("disabled", true);
    }

    /**
     * 停止抽奖
     *  小像框里停止切换，把小像框里的图片显示到大像框里
     */
    function imgStop() {
        clearInterval(timer);
        //得到小像框图片路径，设置给大像框
        var imageSrc = $("#img1ID").attr("src");
        $("#img2ID").attr("src", imageSrc);

        //停止之后，就把“开始”按钮设置为“可用”
        $("#startID").attr("disabled", false);
    }
</script>
</body>
</html>

九.表单校验

  • 页面
    在这里插入图片描述
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>我的jquery表单校验页面</title>

		<style type="text/css">
			h1 {
				text-align: center;
			}
			
			table {
				width: 80%;
				margin: 0 auto;
				border-collapse: collapse;
			}
			
			td {
				padding: 10px 14px;
				border: 1px solid #999;
			}
			
			.error {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>员工信息录入</h1>
		<form name="empForm" id="empForm" method="get" action="#">
			<table>
				<tr>
					<td>真实姓名(不能为空 ,没有其他要求)</td>
					<td><input type="text" id="realname" name="realname" />
					</td>
				</tr>
				<tr>
					<td>登录名(登录名不能为空,长度应该在5-8之间:</td>
					<td><input type="text" id="username" name="username" /></td>
				</tr>
				<tr>
					<td>密码(不能为空,长度6-12之间):</td>
					<td><input type="password" id="pwd" name="pwd" /></td>
				</tr>
				<tr>
					<td>重复密码密码(不能为空,长度6-12之间):</td>
					<td><input type="password" id="pwd2" name="pwd2" /></td>
				</tr>
				<tr>
					<td>性别(必选其一)</td>
					<td>
						<input type="radio" id="male" value="m" name="sex" />男
						<input type="radio" id="female" value="f" name="sex" />女

						<label class="error" for="sex"></label>
					</td>
				</tr>
				<tr>
					<td>年龄(必填26-50):</td>
					<td><input type="text" id="age" name="age" /></td>
				</tr>
				<tr>
					<td>你的学历:</td>
					<td>
						<select name="edu" id="edu">
							<option value="">－请选择你的学历－</option>
							<option value="a">专科</option>
							<option value="b">本科</option>
							<option value="c">研究生</option>
							<option value="e">硕士</option>
							<option value="d">博士</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>兴趣爱好:</td>
					<td colspan="2">
						<input type="checkbox" name="hobby" id="pp" value="0" />乒乓球
						<input type="checkbox" name="hobby" id="ym" value="1" />羽毛球
						<input type="checkbox" name="hobby" id="sw" value="2" />上网
						<input type="checkbox" name="hobby" id="ly" value="3" />旅游
						<input type="checkbox" name="hobby" id="gw" value="4" />购物
						<label class="error" for="hobby"></label>
					</td>
				</tr>
				<tr>
					<td align="left">电子邮箱:</td>
					<td><input type="text" id="email" name="email" /></td>
				</tr>
				<tr>
					<td align="left">身份证(15-18):</td>
					<td><input type="text" id="idcard" name="idcard" /></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" id="smtBtn" value="保存"></td>
				</tr>
			</table>
		</form>

		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script>
            $("#empForm").validate({
				rules:{
                    realname:{
						required:true
					},
                    username:{
                        required:true,
						rangelength:[5, 8]
					},
                    pwd:{
                        required:true,
                        rangelength:[6, 12]
					},
                    pwd2:{
                        required:true,
                        rangelength:[6, 12],
						equalTo:"#pwd"
					},
                    sex:{
                        required:true
					},
                    age:{
                        required:true,
						range:[26, 50],
						digits:true
					},
                    edu:{
                        required:true
					},
                    hobby:{
                        required:true
					},
                    email:{
                        required:true,
						email:true
					},
                    idcard:{
                        required:true,
                        card:true
					}
				},
				messages:{
                    realname:{
                        required:"请输入真实姓名"
                    },
                    username:{
                        required:"请输入登录名",
                        rangelength:"登录名必须是5~8位"
                    },
                    pwd:{
                        required:"请输入密码",
                        rangelength:"密码必须是6~12位"
                    },
                    pwd2:{
                        required:"请输入确认密码",
                        rangelength:"确认密码必须是6~12位",
                        equalTo:"两次密码输入不一致"
                    },
                    sex:{
                        required:"请选择性别"
                    },
                    age:{
                        required:"请输入年龄",
                        range:"年龄必须是26~50岁之间",
                        digits:"年龄必须是整数"
                    },
                    edu:{
                        required:"请选择学历"
                    },
                    hobby:{
                        required:"请选择兴趣爱好"
                    },
                    email:{
                        required:"请输入邮箱",
                        email:"邮箱格式不正确"
                    },
                    idcard:{
                        required:"请输入身份证号",
                        card:"身份证号格式不正确"
                    }
				}
			});

            $.validator.addMethod("card",function(value,element,params){
				//value：要校验的值
				//element：要校验的表单项标签对象
				//params：使用规则时，配置的规则参数

				//校验身份证号格式是否正确。校验value值是否符合身份证的格式要求
				//身份证号格式： 15位数字，  18位数字，   17位数字+X
				//身份证号格式： 15位数字（2位数字[\dX]）出现0次或1次
				//数字：[0-9] 或者 \d
				var reg = /^\d{15}(\d{2}[\dX])?$/i;
                var result = reg.test(value);

                //增加的要求：如果校验不通过，把表单项背景颜色变成绿色
                if (!result) {
                    $(element).css("background-color","green");
                }else{
                    $(element).css("background-color","white");
				}
                return result;
			}, "idcard number error");
		</script>
	</body>
</html>
JQuery相关实例应用
m0_60264901的博客
01-23 1190
品优购之购物车中的效果实现
jquery应用实例
天道酬勤
03-27 1240
地理所队列操作功能的添加记录： 将各项功能做成子菜单，总体思路：   ../csm/conf.php中配置所有的操作命令： // Command to handle the queue opration $execute_to_reconfig = $shell_cgi." ".escapeshellarg("$QUEUES_BIN/badmin reconfig");
jquery应用实例分享_实现手风琴特效
10-18
这个jQuery手风琴特效实例展示了如何通过简单的jQuery代码实现动态交互功能，对于初学者来说是一个很好的学习案例。理解并掌握这段代码，有助于开发者更好地运用jQuery进行网页动态效果的实现，提升用户体验。
深入浅出jQuery应用实例教程
### jQuery应用实例知识点 #### 标题和描述知识点 1. **jQuery简介** - jQuery是一个快速、小巧、功能丰富的JavaScript库，它使得HTML文档遍历和操作、事件处理、动画和Ajax变得更加简单。 - jQuery的口号是...
jQuery应用实例
m0_55997161的博客
04-21 1052
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script> $(function () { ...
Jquery应用实例
米老头
04-22 420
1. 选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象  $('#myId')//选择ID为myId的网页元素
常见的JQuery应用举例
weixin_30279315的博客
05-08 98
在学习JS之后，JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式，利用它开发人员将更为高效的进行工作，下面将一些常见的问题进行举例。 1.点击某处弹出提醒，例如某些游戏在注册时会弹出“过渡游戏有害健康”的提示语，利用JQuery可以解决这一问题。 首先运行效果如下，鼠标点击勾选框时弹出“适度游戏的提示框”。 要解决这个问题，其实H5的hover事件和JS都可以解决，但...
jquery 小例子
03-21
NULL 博文链接：https://hb-keepmoving.iteye.com/blog/937908
jQuery使用的小例子
09-20
自己总结的js,jQuery使用的小例子，真的很使用，认真看肯定有收获的！
JQuery应用实例学习(强烈推荐)
10-16
JQuery应用实例学习(强烈推荐)---无私奉献了！！
jQuery实战
01-09
《jQuery实战》全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之一，能用最少的代码实现最多的功能。《jQuery实战》适合各层次Web开发人员。
50个Jquery经典实例 50个Jquery经典实例
03-23
50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例
Jquery——简单例子
Zjaun的博客
02-13 2215
制作简易版jquery插件 &amp;lt;script src=&quot;jquery.bgColor.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script&amp;gt; $(function () { $(&quot;div&quot;).bgColor(&quot;red&quot;).width(400); }); &amp;lt;/sc
jQuery 实例
m0_58492934的博客
08-04 388
你想增进 jQuery 技能吗？以下是jQuery的各种使用实例，快来看看你掌握了哪些？
jQuery 实例
世事如棋__2016的博客
02-19 900
* 提示：ready() 函数不应与 一起使用。    *  jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。       可以通过下面的标记把 jQuery 添加到网页中：    1.允许使用以下三种语法：     1.$(document).ready(function)     2.$().ready(function)
jQuery实例
IT913913的博客
02-24 279
1.新浪下拉菜单（核心代码） <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值