<script src="jquery.js"></script>

1. 切换图片:<br>
<a href="#"><img src="abc.jpg"  border=0 onmouseover="this.src='123.jpg';" onmouseout="this.src='abc.jpg';" id="mypic"></a>

<br><br>

<span onmouseover="$('#mypic').attr('src' , '123.jpg');" onmouseout="$('#mypic').attr('src' , 'abc.jpg');">点击这里切换图片做法1</span>

<br><br>

<span onmouseover="$('#mypic').attr({'src' : '123.jpg'});" onmouseout="$('#mypic').attr({'src' : 'abc.jpg'});">点击这里切换图片做法2</span>

<br><br>

<span onclick="if($('#mypic').attr('src')=='123.jpg') {$('#mypic').attr('src' , 'abc.jpg');}  else  {$('#mypic').attr('src' , '123.jpg');};">点击这里切换图片做法1</span>

<br><br><hr>

2.字体大小样式设置:<a href='javascript:changeSize(20);'>【大】</a> <a href='javascript:changeSize(14);'>【中】</a> <a href='javascript:changeSize(10);'>【小】</a>

<br><br>

<div id="zoom">
这里的内容可以设置字体大小。当点击上方的字体大小后,这里的内容会相应改变。
</div>

<script>
function changeSize(mysize) {

/*//普通写法:
document.getElementById('zoom').style.fontSize = mysize + "px";*/

//*jquery写法1:
$('#zoom').css("font-size" , mysize + "px");

/*jquery写法2:
$('#zoom').css({"font-size" : mysize + "px" , "color" : "red"});*/
}
</script>

<br><br><Hr>

3.变换样式:<a href='javascript:changeStyle("class01");'>【样式1】</a> <a href='javascript:changeStyle("class02");'>【样式2】</a> <a href='javascript:changeStyle("class03");'>【样式3】</a>

<br><br>

<div id="mydiv">
这里的内容可以变换样式。当点击上方的样式选项后,这里的内容不仅仅会变化字体大小,还可以自由设置相应的样式。
</div>
<style>
.class01{font-size:12px; color:red; padding:10px; border:solid 1px red;}
.class02{font-size:14px; color:blue; padding:10px; border:solid 1px blue;}
.class03{font-size:16px; color:green; padding:10px; border:solid 1px green;}
</style>

<script>
function changeStyle(cssname){
//$('#mydiv').removeAttr("class");

$('#mydiv').removeClass();
$('#mydiv').addClass(cssname);
}
</script>

<br><br><hr>

4. 取出窗体中表单控件的数量:
普通的写法:document.forms.length;
使用jquery后的写法1:$('input').length;
使用jquery后的写法2:$('input').size();

备注:
forms为form表单的name;
input为form表单中的input控件;

<br><br><Hr>

5. 判断表单控件全选与取消:jQuery做法
<script>
var flag = false;
function selectAll2() {
if(flag==false) {
for(var i = 0; i < $('#uform > input').size(); i++) {

//普通写法:if($('#uform > input').get(i).name == "orders") {
if($('#uform > input').get(i).name == "orders") {
$('#uform > input').get(i).checked = true;
//普通写法:document.uform.elements[i].checked = false;
flag=true;
}
}
} else {
for(var i = 0; i < $('#uform > input').length; i++) {
if($('#uform > input').get(i).name == "orders") {
$('#uform > input').get(i).checked = false;
flag=false;
}
}
}
}
</script>

<form name="uform" id="uform">
<input name="orders" type="checkbox" value="1" >选项1
<input name="orders" type="checkbox" value="2" >选项2
<input name="orders" type="checkbox" value="3" >选项3
<div><input name="orders" type="checkbox" value="4" >选项4</div>
<textarea></textarea>
<select name="">
<option>项目1</option>
<option>项目2</option>
</select>

</form>
<a href="javascript:selectAll2();">全选</a>

<br><br>
<Script>
function countForm() {
alert("普通做法:" + document.uform.length);

alert("jquery的子选择器的做法:" + $('#uform > input').length);

alert("jquery的后代选择器的做法:" + $('#uform  input').size());

}
</script>

<a href="javascript:countForm();">计算控件个数</a>

<br><br><Hr>

6. 判断多选框是否有其中一个被选中?
<script>
function checkCheckbox() {
var count = 0;
for(var i = 0; i < $('#myform  input').size(); i++) {
if($('#myform input').get(i).name == "orders") {
if($('#myform input').get(i).checked == true) {
count++;
}
}
}
if(count<1) {
alert("必须选择一个");
return false;
}
}
</script>
<form name="myform" id="myform">
<input name="orders" type="checkbox" value="1" >选项1
<input name="orders" type="checkbox" value="2" >选项2
<input name="orders" type="checkbox" value="3" >选项3
<div><input name="orders" type="checkbox" value="4" >选项4</div>
<input type="submit" name="submit" onclick="return checkCheckbox();">
</form>

7. 用户注册表单填写中:
<script>
function checkUsername() {
var username_val = $("#username").val();
if(username_val=="") {
$("#lblName").html("用户名不可以为空!");
return false;
} else {
if(username_val.length<=1 || username_val.length>10) {
$("#lblName").html("用户名必须为4到16位!");
return false;
} else {
//$("#lblName").html("");
$("#lblName").empty("");
}
}
}
</script>
<form name="uform2" id="uform2">
用户名:<input name="username" type="text" id="username" onblur="checkUsername();"> &nbsp;&nbsp;&nbsp;&nbsp;<span id="lblName"></span>
</form>

8. jquery中文档处理的append()的用法:常用在批量上传文件中。
<script>
function addinput() {
$('#uploadform').append("<input name='up_file[]' type='file' /><br/>");
}
</script>
<form action="" method="post" enctype="multipart/form-data">
<input type="button" value="增加上传控件" onclick="addinput();"><p/>
<div id="uploadform">
<input name='up_file[]' type='file' /><br/>
</div>
<input type="submit" name="submit" value="批量上传图片" /><p/>
</form>