jquery常用事例
点击后高亮：
<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>