jquery常用事例

最新推荐文章于 2021-11-22 23:32:56 发布

六楼外的风景

最新推荐文章于 2021-11-22 23:32:56 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： jquery function javascript input class div

本文链接：https://blog.csdn.net/yangfanend/article/details/6731031

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

点击后高亮：

<style type="text/css">
<!--
p{
	color:blue; cursor:help;
	font-size:13px;
	margin:0px; padding:5px;
}
.highlight{
	background-color:#FFFF00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("p").click(function(){
		//点击的时候不断切换
		$(this).toggleClass("highlight");
	});
});
</script>
</head>
<body>
	<p>高亮？</p>
</body>
</html>

伸缩的菜单，用jQuery重写：

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	//找到所有li标记中包含的ul标记
	//然后找到它的前一个标记（即<a>），并添加click()事件
	$("li").find("ul").prev().click(function(){
		//点击<a>时让它后面的兄弟（即<ul>）切换CSS样式
		$(this).next().toggleClass("myHide");
	});
});
/*
//替换原来的例题
function change(){
	$(this).parent().find("ul").toggleClass("myHide");
	//通过父元素li，找到兄弟元素ul
	var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
	//CSS交替更换来实现显、隐
	if(oSecondDiv.className == "myHide")
		oSecondDiv.className = "myShow";
	else
		oSecondDiv.className = "myHide";
}
window.onload = function(){
	$("li").find("ul").prev().click(change);
	/*var oUl = document.getElementById("listUL");
	var aLi = oUl.childNodes;	//子元素
	var oA;
	for(var i=0;i<aLi.length;i++){
		//如果子元素为li，且这个li有子菜单ul
		if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
			oA = aLi[i].firstChild;	//找到超链接
			oA.onclick = change;	//动态添加点击函数
		}
	}
}*/
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul class="myHide">
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul class="myHide">
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul class="myHide">
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>

交替变幻的表格；mouse 事件

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("table.datalist tr:nth-child(odd)").addClass("altrow");
	$("table").mouseover(function(){
		$("tr:gt(0)").toggleClass("altrow");
	});
	$("table").mouseout(function(){
		$("tr:gt(0)").toggleClass("altrow");
	});
});
</script>
</head>
<body> 
<table class="datalist" summary="list of members in EE Studay" id="oTable">
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Class</th>
		<th scope="col">Birthday</th>
		<th scope="col">Constellation</th>
		<th scope="col">Mobile</th>
	</tr>
	<tr>
		<td>isaac</td>
		<td>W13</td>
		<td>Jun 24th</td>
		<td>Cancer</td>
		<td>1118159</td>
	</tr>
    <tr>
		<td>fresheggs</td>
		<td>W610</td>
		<td>Nov 5th</td>
		<td>Scorpio</td>
		<td>1038818</td>
	</tr>
	<tr>
		<td>girlwing</td>
		<td>W210</td>
		<td>Sep 16th</td>
		<td>Virgo</td>
		<td>1307994</td>
	</tr>
	
	
</table>
</body>

text()与html()的区别：

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	var sString = $("p:first").text();	//获取纯文本
	$("p:last").html(sString);
});
</script>
</head>
<body>
	<p><b>文本</b>段 落<em>示</em>例</p>
	<p></p>
</body>

点击事件后改变着色；

$(function(){
	//首先创建10个<div>块
	for(var i=0;i<10;i++)
		$(document.body).append($("<div>Click<br>Me!</div>"));
	var iCounter=1;
	//每个都用one添加click事件
	$("div").one("click",function(){
		$(this).css({background:"#8f0000", color:"#FFFFFF"}).html("Clicked!<br>"+(iCounter++));
	});
});
</script>
</head>
<body>
</body>

绑定三个事件并移除：

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	var fnMyFunc1;	//函数变量
	$("img")
		.bind("click",fnMyFunc1 = function(){	//赋给函数变量
			$("#show").append("<div>点击事件1</div>");
		})
		.bind("click",function(){
			$("#show").append("<div>点击事件2</div>");
		})
		.bind("click",function(){
			$("#show").append("<div>点击事件3</div>");
		});
	$("input[type=button]").click(function(){
		$("img").unbind("click",fnMyFunc1);	//移除事件监听myFunc1
	});
});
</script>
</head>
<body>
	<img src="11.jpg"> <input type="button" value="移除事件1">
	<div id="show"></div>
</body>

快餐在线

function addTotal(){
	//计算总价格的函数
	var fTotal = 0;
	//对于选中了的复选项进行遍历
	$(":checkbox:checked").each(function(){
		//获取每一个的数量
		var iNum = parseInt($(this).parent().find("input[type=text]").val());
		//获取每一个的单价
		var fPrice = parseFloat($(this).parent().find("span[price]").attr("price"));
		fTotal += iNum * fPrice;
	});
	$("#totalPrice").html("合计￥"+fTotal+"元");
}
$(function(){
	$(":checkbox").click(function(){
		var bChecked = this.checked;
		//如果选中则显示子菜单
		$(this).parent().find(".detail").css("display",bChecked?"block":"none");
		$(this).parent().find("input[type=text]")
			//每次改变选中状态，都将值重置为1，触发change事件，重新计算价格
			.attr("disabled",!bChecked).val(1).change()
            .each(function(){
				//需要聚焦判断，因此采用each来插入语句
				if(bChecked) this.focus();
			});
	});
	$("span[price] input[type=text]").change(function(){
		//根据单价和数量计算价格
		$(this).parent().find("span").text( $(this).val() * $(this).parent().attr("price") );
		addTotal();	//计算总价格
	});
	//加载页面完全后，统一设置输入文本框
	$("span[price] input[type=text]")
		.attr({	"disabled":true,//文本框为disable
				"value":"1",	//表示份数的value值为1
				"maxlength":"2"	//最都只能输入2位数（不提供100份以上）
		}).change();			//触发change事件，让span都显示出价格
});
</script>
</head>

<body>
<div>
1. <input type="checkbox" id="LiangCaiCheck"><label for="LiangCaiCheck">凉菜</label>
<span price="0.5"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="LiangCai" checked="checked">拍黄瓜</label>
		<label><input type="radio" name="LiangCai">香油豆角</label>
		<label><input type="radio" name="LiangCai">特色水豆腐</label>
		<label><input type="radio" name="LiangCai">香芹醋花生</label>
	</div>
</div>
    
<div>
2. <input type="checkbox" id="SuCaiCheck"><label for="SuCaiCheck">素菜</label>
<span price="1"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="SuCai" checked="checked">虎皮青椒</label>
		<label><input type="radio" name="SuCai">醋溜土豆丝</label>
		<label><input type="radio" name="SuCai">金勾豆芽</label>
	</div>
</div>
    
<div>
3. <input type="checkbox" id="HunCaiCheck"><label for="HunCaiCheck">荤菜</label>
<span price="2.5"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="HunCai" checked="checked"/>麻辣肉片</label>
		<label><input type="radio" name="HunCai">红烧牛柳</label>
		<label><input type="radio" name="HunCai">糖醋里脊</label>
	</div>
</div>
    
<div>
4. <input type="checkbox" id="SoupCheck"><label for="SoupCheck">热汤</label>
<span price="1.5"><input type="text" class="quantity"> ￥<span></span>元</span>
	<div class="detail">
		<label><input type="radio" name="Soup" checked="checked"/>西红柿鸡蛋汤</label>
		<label><input type="radio" name="Soup">南瓜汤</label>
	</div>
</div>

<div id="totalPrice"></div>
</body>

六楼外的风景

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery常用事例

点击后高亮： <!--p{ color:blue; cursor:help; font-size:13px; margin:0px; padding:5px;}.highlight{ background-color:#FFFF00;}
复制链接

扫一扫