jquery讲授（二）
jquery讲解（二）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入Jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
内容选择器
1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合
2、:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结：在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
*/
/**页面载入事件处理*/
$(function(){
/**获取td中含有10的td的对象集合*/
var $tds = $("td:contains('redarmy')");
/**输出此集合的长度*/
alert($tds.size()+"=========="+$tds.text());
/**获取tr中含有redarmy的tr对象的集合*/
var $rtds = $(".rdc:contains('redarmy')");//tr对象
/**输出此集合的长度*/
alert($rtds.text()+"-------"+$rtds.size());
/**获取rdc中td的含有redarmy的td对象集合*/
var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象
alert($rtds1.size()+"===="+$rtds1.text());
/**获取id为qw的tr对象中td的空元素*/
var $etd = $("#qw>td:empty");
alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td>
//获取tbody中含有rdc的tbody对象
var $tbdys = $("#tbdy:has(.rdc)");
alert($tbdys.html()+"------------"+$tbdys.size());
//获取tbody中含有rdc的tr对象集合
var $trs = $("#tbdy>.rdc");
alert($trs.html()+"------------"+$trs.size());
//获取.rdc中含有子元素或者文本元素的.rdc的对象
var $tdps = $(".rdc:parent"); //tr对象
alert($tdps.html()+"--------"+$tdps.text());
})
</script>
</head>
<body>
<div align="center">
<div>
<h1>内容选择器的应用</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td></td>
<td>
redarmy_chen
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr id="qw">
<td></td>
<td colspan="2"/>
<td>1</td>
</tr>
</tbody>
<!-- 为了测试：parent -->
<tr class="rdc">
aaa
</tr>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入Jquery的文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**页面载入处理*/
function test(){
/**不可见性的测试*/
var $hids = $("div:hidden");
alert($hids.html()+"----------"+$hids.text());
/**可见性测试*/
var $vlis = $("#rdc:visible");
alert($vlis.html());
/**表单选择器*/
var $btns = $(":button");
/**获取button按钮中的value属性的值*/
alert($btns.attr("value")+"------------"+$btns.size());
/**遍历所有的button的value属性值*/
for(var i=0;i<$btns.size();i++){
/**注意DOM对象转换成Jquery对象 |Jquery对象转换成DOM对象*/
// alert($($btns[i]).attr("value"));
}
//获取btn的子元素为button按钮的input对象
var $divbtns = $("#btn>input:button");
alert($divbtns.size());
//获取所有checkbox的复选框
var $ckbs = $(":checkbox");
//获取ckb中所有checkbox的复选框
var $ckbs1 = $("#ckb input:checkbox");
alert($ckbs1.length);
//获取所有的input select 的对象集合
var $ipts = $(":input");
alert($ipts.size());
}
$(function(){
//获取所有的checkedinput表单对象 不包含select中的option
//var $ickeds = $("input:checked");
var $ickeds = $("input[checked='true']");
alert($ickeds.length);
//获取所有复选框被选中的表单对象
/**
var $ckbs = $("input:checkbox:checked");
alert($ckbs.length);
*/
/**根据属性attribute=value*/
var $ckbs = $("input[type='checkbox']:checked");
alert($ckbs.length);
/**表单对象的属性：
:checked
:disabled
:enabled
:selected
以上的结果可以通过属性进行改造：
input[checked='true']
作业：查看上面三种是否也可以改造*/
});
</script>
</head>
<body>
<div>
<div>
<h1>
可见性的测试
</h1>
</div>
<div>
<div style="display: none;">
通过样式设计不可见！
</div>
<div>
<form action="">
<table>
<tr id="rdc">
<td>用户名：</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>性别：</td>
<td><select name="sex">
<option>男</option>
<option>女</option>
</select></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>上传：</td>
<td><input type="file" name="file"/></td>
</tr>
<tr id="ckb">
<td>爱好：</td>
<td><input type="checkbox" name="fav"/> 看书
<input type="checkbox" name="fav" checked="checked"/>打球
<input type="checkbox" name="fav"/>篮球
<input type="checkbox" name="fav"/>游泳
</td>
</tr>
<tr>
<td><input type="hidden" value="id" name="id"/></td>
<td><input type="button" value="修改"/></td>
</tr>
</table>
</form>
</div>
</div>
<div id="btn">
<input type="button" value="修改1"/>
<input type="button" value="修改2"/>
<input type="button" value="修改3"/>
<input type="checkbox" name="fav" checked="checked"/>游泳
<input type="radio" checked="checked"/>man
<input type="radio"/>woman
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo03.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
function test() {
/**测试设置属性值
attr("key",fn)*/
$("#attr>input").attr("value", function() {
return "redarmy";
});
alert("-------中介线-------");
/**设置属性及属性值 attr(key,value);*/
$("#attr>input").attr("value", "m_j");
//获取值
var name = $("#attr>input").attr("name");
alert(name);
//匹配元素中批量设置很多属性的最佳方式
/**attr(properties) 名/值 {}*/
$("#attr>input").attr( {
value : "x_l",
disabled : "disabled"
});
/**移除某个属性*/
$("#attr>input").removeAttr("disabled");
/**添加类名*/
$("#attr>input").addClass("ipt");
/**移除类名*/
$("#attr>input").removeClass("ipt");
alert("---------------------------执行之前观察效果");
/**如果存在（不存在）就删除（添加）一个类。
*/
$("#attr>input").toggleClass("ipt")
alert("---------------------------执行之后观察效果");
$("#attr").html('邮箱：<input name="name" type="text" />');
$("#attr").text("<u>Some</u> new text");
alert($("#single").val("Single2"));
}
$(function() {
/*如果是type =checkbox,radio,select val值代表的是checked,selected
type="text" val("")代表的是value的值*/
$("#nam").val("HelloWorld");
});
</script>
<style>
.ipt {
border-color: red;
}
</style>
</head>
<body>
<div align="center">
<div id="attr">
用户名：
<input name="name" type="text" class="ipt" />
密码：
<input name="name" type="text" id="nam"/>
</div>
<div>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo04.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入Jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script type="text/javascript">
function test() {
/**eq()匹配结果中的第几个对象*/
var $p = $("p").eq(1);
alert($p.html());
/**filter("")过滤*/
var $p1 = $("p").filter(".rcd");
alert($p1.html());
/**filter(",,,,....")可以有多个表达式*/
var $p2 = $("p").filter(".rcd,:first");
alert($p2.text());
}
$(document).ready(function() {
/**把鱼$(#ad>p).span连接成一个对象*/
var $adp = $("#ad>p").add("span");
alert($adp.text())
});
</script>
</head>
<body>
<div>
<div>
<h1>
筛选的使用
</h1>
</div>
<div>
<p>
过滤
</p>
<p>
查找
</p>
<p class="rcd">
串联
</p>
</div>
<div id="ad">
<p>
Hello
</p>
<span> redarmy_chen </span>
</div>
</div>
</body>