jq1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JueryTest</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
alert($("#testID").html());
alert($("div").html());
alert($("form input"));
alert($("form>input"));
});
</script>
</head>
<body>
<p id="testID">ddddd</p>
<div>test</div>
<div>test2</div>
<form>
<label>name:</label>
<input name="name"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="name"/>
</body>
</html>
jq2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery基本选择器</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script>
$(function(){
//id选择器
$("#btn2").click(function(){
$("#div_1").css("background","#FFD97F");
});
//类选择器
$("#btn3").click(function(){
$(".myclass").css("background","#C7D0EB");
});
//*选择器用法
$("#btn4").click(function(){
$("*").css("background","#CA4B08");
});
//标签选择器用法
$("#btn5").click(function(){
$("div").css("background","red");
});
//群组标签选择器用法
$("#btn6").click(function(){
$("div,p").css("background","blue");
});
$("#btn1").click(function(){
$("*").removeAttr("style");//删除元素中指定的属性
});
});
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="清除样式按钮"/>
<input type="button" name="btn2" id="btn2" value="id选择器按钮"/>
<input type="button" name="btn3" id="btn3" value="类选择器按钮"/>
<input type="button" name="btn4" id="btn4" value="*选择器按钮"/>
<input type="button" name="btn5" id="btn5" value="标签选择器按钮"/>
<input type="button" name="btn6" id="btn6" value="群组标签选择器按钮"/>
<div id="div_1">我是div——1,值是div_1</div>
<div class="myclass">我是di,值为myclass</div>
<p>dddddd</p>
</body>
</html>
jq3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery层次选择器</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js">
</script>
<script>
$(function(){
$("#btn1").click(function(){
$("*").removeAttr("style");//删除元素中指定的属性
});
$("#btn2").click(function(){
$("body ul").css("background","yellow");//选择所有元素包括后代元素
});
$("#btn3").click(function(){
//找到body下面的id为ul_1元素,再找id为ul_1下面的子元素ul
$("body > #ul_1 > ul").css("background","#22674B");
});
$("#btn4").click(function(){
//找到紧接着id为ul_1后面的ul元素
$("#ul_1 + ul").css("background","#D95200");
});
$("#btn5").click(function(){
//找到不是紧接着id为ul_1后面的ul元素
$("#ul_1 ~ ul").css("background","#D95200");
});
});
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="清除样式按钮"/>
<input type="button" id="btn2" value="${body ul}"/>
<input type="button" id="btn3" value="${body > #ul_1 >ul}"/>
<input type="button" id="btn4" value="${#ul_1+ul}"/>
<input type="button" id="btn5" value="${#ul_1~ul}"/>
<ul id="ul_1">
id为ul_1的ul标签
<ul>ul的孩子元素</ul>
</ul>
<ul id="ul_1">
id为ul_1的ul标签
<input type="button" value="呵呵"/>
</ul>
<input type="button" value="哼(ˉ(∞)ˉ)唧">
<ul id="ul_2">
id为ul_2的ul标签
</ul>
</body>
</html>
jq4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 基本过滤器 </title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("*").removeAttr("style");
//删除元素中指定的属性
});
$("#btn2").click(function() {
$("ul:first").css("background", "red");
});
$("#btn3").click(function() {
$("ul:last").css("background", "yellow");
});
$("#btn4").click(function() {
$("ul:not(#ul_1)").css("background", "green");
});
$("#btn5").click(function() {
$("ul:eq(2)").css("background", "black");
});
$("#btn6").click(function() {
$("ul:odd").css("background", "yellow");
});
$("#btn7").click(function() {
$("ul:even").css("background", "black");
});
$("#btn8").click(function() {
$("ul:gt(1)").css("background","red");
});
$("#btn9").click(function() {
$("ul:lt(1)").css("background","yellow");
});
});
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="清除样式按钮"/>
<input type="button" name="btn2" id="btn2" value="选取第一个ul"/>
<input type="button" name="btn3" id="btn3" value="选取最后一个ul"/>
<input type="button" name="btn4" id="btn4" value="选取id值不是ul_1的标签"/>
<input type="button" name="btn5" id="btn5" value="选取索引值是2的标签"/>
<input type="button" name="btn6" id="btn6" value="选取索引值为奇数的标签" />
<input type="button" name="btn7" id="btn7" value="选取索引为偶数的标签" />
<input type="button" name="btn8" id="btn8" value="选取索引大于1的标签" />
<input type="button" name="btn9" id="btn9" value="选取索引小于1的标签" />
<ul id="ul_1">
test1
</ul>
<ul id="ul_2">
test2
</ul>
<ul id="ul_3">
test3
</ul>
</body>
</html>
jq5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> jquery选择器使用 </title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("*").removeAttr("style");
//删除元素中指定的属性
});
$("#btn2").click(function() {
$("div:contains('你好')").css("background", "green");
});
$("#btn3").click(function() {
$("div:empty").css("background", "green");
});
$("#btn4").click(function() {
$("table:has(tr)").css("background", "black");
});
$("#btn5").click(function() {
$("div:parent").css("background", "black");
});
$("#btn6").click(function() {
$("table:parent").css("background", "yellow");
});
$("#btn7").click(function() {
//查找含有border属性的table标签元素
$("table:[border]").css("background", "red");
});
$("#btn8").click(function() {
//查找table有border属性,并且border属性的值为2
$("table[border=2]").css("background", "red");
});
$("#btn9").click(function() {
//查找table有border属性,并且border属性的值不为2
$("table[border!=2]").css("background", "red");
});
$("#btn10").click(function() {
//查找tr有title属性,并且title属性的值以张三开头的的tr标签元素
$("tr[title^=张三]").css("background", "red");
});
$("#btn11").click(function() {
//查找tr有title属性,并且title属性的值以张三结尾的的的tr标签元素
$("tr[title$=张三]").css("background", "red");
});
$("#btn12").click(function() {
//查找tr有title属性,并且title属性的值含有张三的tr标签元素
$("tr[title*=张三]").css("background", "red");
});
$("#btn13").click(function() {
//查找tr有title属性和clsss属性,并且title属性的值含有张三的tr标签元素
$("tr[title*=张三][class]").css("background", "red");
});
$("#btn14").click(function() {
//查找tr元素中td为偶数的td元素
//nth-child索引从1开始
$("tr td:nth-child(even)").css("background", "red");
});
$("#btn15").click(function() {
//查找tr元素中第一个td元素
$("tr td:first-child").css("background", "red");
});
$("#btn16").click(function() {
//查找tr元素中最后一个td元素
$("tr td:last-child").css("background", "red");
});
$("#btn17").click(function() {
//查找tr元素中唯一一个td元素
$("tr td:only-child").css("background", "red");
});
$("#bt1").click(function() {
$("#show").empty();
//清除div中的文本内容
});
$("#bt2").click(function() {
$("*").removeAttr("style");
//删除元素中指定的属性
});
$("#bt3").click(function() {
//查找表单中的密码框
$(":password").css("background", "green");
});
$("#bt4").click(function() {
//查找表单中的文本框
$(":text").css("background", "green");
});
$("#bt5").click(function() {
//查找表单中单选按钮的个数
var i = $(":radio").length;
//append主要为选中元素添加子元素
$("#show").append('单选按钮的个数' + i);
});
$("#bt6").click(function() {
//查找表单中复选按钮的个数
var i = $(":checkbox").length;
//append主要为选中元素添加子元素
$("#show").append('复选按钮的个数' + i);
});
$("#bt7").click(function() {
//查找表单中提交按钮
$(":submit").css("background", "green");
});
$("#bt8").click(function() {
//查找表单中重置按钮
$(":reset").css("background", "green");
});
$("#bt9").click(function() {
//查找表单中文件上传域
$(":file").css("background", "red");
});
$("#bt10").click(function() {
//使用表单中checked属性
//获取被选中的单选框和复选框
var i = $("input:checked").length;
$("#show").append('被选中的个数为' + i);
});
$("#bt11").click(function() {
//使用表单中selected属性
//获取下拉框被选中的名称
var i = $("select :selected").text();//text():获取文本值
$("#show").append('下拉框被选中的文本名称为' + i);
});
});
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="清除样式按钮"/>
<input type="button" name="btn2" id="btn2" value="div:contains('你好')"/>
<input type="button" name="btn3" id="btn3" value="div:empty" />
<input type="button" name="btn4" id="btn4" value="table:has(tr)" />
<input type="button" name="btn5" id="btn5" value="div:parent 含有子元素的标签" />
<input type="button" name="btn6" id="btn6" value="table:parent 含有子元素的标签" />
<input type="button" id="btn7" name="btn7" value="table[border]"/>
<input type="button" name="btn8" id="btn8" value="table[border=2]" />
<input type="button" name="btn9" id="btn9" value="table[border!=2]" />
<input type="button" name="btn10" id="btn10" value="tr[title^=张三]" />
<input type="button" name="btn11" id="btn11" value="tr[title$=张三]" />
<input type="button" name="btn12" id="btn12" value="tr[title=张三]" />
<input type="button" name="btn13" id="btn13" value="tr[title*=张三][class]" />
<input type="button" name="btn14" id="btn14" value=" nth-child" />
<input type="button" name="btn15" id="btn15" value="first-child" />
<input type="button" name="btn16" id="btn16" value="last-child" />
<input type="button" name="btn17" id="btn17" value="only-child" />
<div id="1">
你好
</div>
<table border="2" width="100" bordercolor="#038fcd">
<tr title="ddd张三">
<td>第一列</td>
<td>第一列2</td>
<td>第一列3</td>
<td>第一列4</td>
</tr>
<tr title="张三" class="myclass">
<td>第一列1</td>
<td>第一列1</td>
<td>第一列1</td>
<td>第一列1</td>
</tr>
</table>
<table border="1" width="100" height="50" bordercolor="#ff0000">
<tr>
<td>第一列1</td>
<td>第一列1</td>
<td>第一列1</td>
<td>第一列1</td>
</tr>
</table>
<table border="1" width="100" height="50" bordercolor="#ff0000">
<tr>
<td>第一列1</td>
</tr>
</table>
<div id="2">
ddd
</div>
<input type="button" id="bt1" name="bt1" value="清除id中内容" />
<input type="button" id="bt2" name="bt2" value="清除样式按钮" />
<input type="button" id="bt3" name="bt3" value=":password" />
<input type="button" id="bt4" name="bt4" value=":text" />
<input type="button" id="bt5" name="bt5" value=":radio" />
<input type="button" id="bt6" name="bt6" value=":checkbox" />
<input type="button" id="bt7" name="bt7" value=":submit" />
<input type="button" id="bt8" name="bt8" value=":reset" />
<input type="button" id="bt9" name="bt9" value=":file" />
<input type="button" id="bt10" name="bt10" value=":checked" />
<input type="button" id="bt11" name="bt11" value=":selected" />
<br />
<form>
学号:
<input type="text" name="sno" id="sno"/>
<br />
姓名 :
<input type="text" name="sname" id="sname"/>
<br />
密码:
<input type="password" name="spass" id="spass"/>
<br />
性别:
<input type="radio" name="ssex" id="ssex"/>
男
<input type="radio" name="ssex" id="ssexs"/>
女
<br />
籍贯:
<select name="sbirth" id="sbirth">
<option id="0" name="北京"> 北京 </option>
<option id="3"> 西安 </option>
<option id="4"> 四川 </option>
</select>
<br>
爱好:
<input type="checkbox" name="shobby" id="shobby"/>
打男球
<input type="checkbox" name="shobby2" id="shobby2"/>
下棋
<input type="checkbox" name="shobby2" id="shobby3"/>
唱歌
<br>
上传
<input type="file" name="supload" id="supload" />
<br>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
<div id="show"></div>
</body>
</html>
jq6.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> jquery选择器使用 </title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#bt0").click(function() {
$("#show").empty()
//删除div中内容
});
$("#bt1").click(function() {
//查找li标签中属性title的值为java的
$("ul li[title='java']").css("background", "red");
});
$("#bt2").click(function() {
//查找li标签中属性title的值为java的
var a = $("ul li").attr("title");
//获取title属性
$("#show").append('属性值' + a);
});
$("#bt3").click(function() {
$("span").append("<b>我爱query 吗</b><br>")
});
$("#bt4").click(function() {
$("<b>你爱query 吗</b><br>").appendTo("span");
});
$("#bt5").click(function() {
$("span").prepend("你爱jquertest");
});
$("#bt6").click(function() {
$("QQ love jquery").prependTo("span");
});
$("#bt7").click(function() {
$("span").before('<b>test</b>')
});
$("#bt8").click(function() {
$("span").after('<b>tesdddt</b>')
});
});
</script>
</head>
<body>
<input type="button" name="bt0" id="bt0" value="清除div中内容"/>
<input type="button" name="bt1" id="bt1" value="属性选中器"/>
<input type="button" name="bt2" id="bt2" value="attr"/>
<input type="button" name="bt3" id="bt3" value="append"/>
<input type="button" name="bt4" id="bt4" value="appendTo"/>
<input type="button" name="bt5" id="bt5" value="prepend"/>
<input type="button" name="bt6" id="bt6" value="prependTo"/>
<input type="button" name="bt7" id="bt7" value="before"/>
<input type="button" name="bt8" id="bt8" value="before"/>
<p>
<ul>
<li title="java">
java
</li>
<li title="oracle">
oracle
</li>
</ul>
</p>
<div id="show"> </div>
<span> 我爱jquery </span>
</body>
</html>
jq7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> jquery使用 </title>
<style type="text/css">
.divFrame {
width: 260px;
border: solid 1px #666;
font-size: 10pt
}
.divTitle {
background-color: #eee;
padding: 5px
}
.divContent {
padding: 8px;
font-size: 9pt
}
.divTip {
width: 244px;
border: solid 1px #666;
padding: 8px;
font-size: 9pt;
margin-top: 5px;
display: none
}
.txtCss {
border: solid 1px #ccc
}
.divBtn {
padding-top: 5px
}
.divBtn.btnCss {
border: solid 1px #535353;
width: 60px
}
.divDefault {
width: 26opx;
font-size: 10px;
padding: 5px
}
.divClick {
width: 260px;
border: solid 1px #666;
font-size: 10px;
background-color: #eee;
padding: 5px
}
#tbStu tr th{background-color: red;color: #fff}
#tbStu .trOdd{background-color:green}
</style>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btnSubmit").click(function() {
//获取文本值
var oTxtValue = $("#Text1").val();
//获取单选按钮值
var oRdoValue = $("#Radio1").is(':checked') ? "男" : "女";
//获取复选框按钮值
var onChkValue = $("#Checkbox1").is(':checked') ? "已婚" : "未婚";
//显示提示文本元素和内容
$("#divTip").css("display", "block").html(oTxtValue + "<br>" + oRdoValue + "<br>" + onChkValue);
});
//jquery控制css
$(".divDefault").click(function() {
$(this).toggleClass('divClick').html("点击后的样式");
});
//实现隔行变色
$("#tbStu tr:nth-child(even)").addClass("trOdd");
});
</script>
</head>
<body>
<div class="divTitle">
请输入如下信息
</div>
<div class="divContent">
姓名:
<input id="Text1" type="text" class="txtCss" />
<br />
性别:
<input type="radio" id="Radio1" name="rdoSex" value="男" />
男
<input type="radio" id="Radio2" name="rdoSex" value="女" />
女
<br />
婚否:
<input id="Checkbox1" type="checkbox" />
<div class="divBtn">
<input type="button" id="btnSubmit" value="提交" οnclick="btnClick();" class="btnCss" />
</div>
</div>
<div id="divTip" class="divTip"> </div>
<div class="divDefault">
点击前的样式
</div>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<tr>
<td>1</td><td>小米</td><td>男</td><td>230</td>
</tr>
<tr>
<td>2</td><td>小高</td><td>女</td><td>4000</td>
</tr>
<tr>
<td>3</td><td>小色</td><td>女</td><td>5000</td>
</tr>
</table>
</body>
</html>