JQuery学习笔记（2）
来源：互联网 发布：鼠标指针软件下载 编辑：程序博客网 时间：2024/06/05 00:01
jquery的属性选择器
代码:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="含有属性title 的div元素." id="b1"/>
<input type="button" value="属性title值等于test的div元素" id="b2"/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
<input type="hidden"value="hidden1"/>
<input type="hidden"value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden"value="hidden4"/>
<div id="one" title="test">
div id为one test
</div>
<div id="one" title="texxx">
div id为one texxx
</div>
<div id="one" title="xxxest">
div id为one texxx
</div>
<div id="one" title="xxxesxxxxxt">
div id为one xxxesxxxxxt
</div>
<div id="two" title="ate">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="three" class="one" >
XXXXXXXXX
</div>
</body>
<scriptlanguage="JavaScript">
//*****含有属性title 的div元素.
$("#b1").click(
function(){
$("div[title]").css("background","green");
}
);
//****属性title值等于test的div元素
$("#b2").click(
function(){
$("div[title=\"test\"]").css("background","green");
}
);
//属性title值不等于test的div元素(没有属性title的也将被选中)
$("#b3").click(
function(){
$("div[title!='test']").css("background","red");
}
);
//属性title值 以te开始 的div元素
$("#b4").click(
function(){
$("div[title^='te']").css("background","red");
}
);
//属性title值 以est结束 的div元素
$("#b5").click(
function(){
$("div[title$='est']").css("background","red");
}
);
//属性title值 含有es的div元素
$("#b6").click(
function(){
$("div[title*='es']").css("background","red");
}
);
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
//我们的过滤方式有两种 :
//比如选出文本中含有 abc的 div $("div:contains['abc']")
$("#b7").click(
function(){
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
$("div[title*='es'][id]").css("background","red");
}
);
</script>
</html>
子元素选择器
根据该元素是父元素下出现的位置来选中子元素.
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/>
<divclass="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
<div id="two" class="one" >
XXXXXXXXX two
</div>
<div id="three" class="one" >
XXXXXXXXX three
</div>
<div id="four" class="one" >
XXXXXXXXX four
</div>
</div>
<divclass="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
</div>
</body>
<scriptlanguage="JavaScript">
//****每个class为one的div父元素下的第2个子元素
$('#b1').click(
function(){
$("div.one:nth-child(1)").css("background","red");
}
);
//*****每个class为one的div父元素下的第一个子元素
$('#b2').click(
function(){
$("div.one:first-child").css("background","red");
// $("div.one:nth-child(1)").css("background","red");
}
);
//*****每个class为one的div父元素下的最后一个子元素
$('#b3').click(
function(){
$("div.one:last-child").css("background","red");
}
);
//**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$('#b4').click(
function(){
$("div.one:only-child").css("background","red");
}
);
</script>
</html>
表单对象选择器
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8">
<scriptlanguage="JavaScript"src="js/jquery-1.3.1.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form>
<input type="text"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="image"/><br/>
<input type="file"/><br/>
<input type="submit"/><br/>
<input type="reset"/><br/>
<input type="password"/><br/>
<input type="button"value="按钮1" /><br/>
<select><option/></select><br/>
<textarea></textarea><br/>
<button>按钮2</button><br/>
</form>
</body>
<scriptlanguage="JavaScript">
//选择所有的button
var buttons=$(':button');
alert(buttons.length);
varbuttons=$("input[type='button']");
alert(buttons.length);
</script>
</html>
小结: 我们在获取表单元素时候,有两种方式
1. $(":表单元素名")[input button file img....] ,这种方式选择最全.
2. $("input[type='button']"); 这种方式<input type="button"/>
表单对象属性选择器
$("select option:selected")
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用<input> 元素的值" id="b1"/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用<input> 元素的值" id="b2"/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<select name="job" size=9 multiple="multiple">
<option value="选项1">选项1^^</option>
<option value="选项2">选项2^^</option>
<option value="选项3">选项3^^</option>
<option value="选项4">选项4^^</option>
<option value="选项5">选项5^^</option>
<option value="选项6">选项6^^</option>
</select>
<select id="hsp" name="edu">
<option value="博士">博士^^</option>
<option value="硕士">硕士^^</option>
<option value="本科">本科^^</option>
<option value="小学">小学^^</option>
</select>
</body>
<scriptlanguage="JavaScript">
//*利用 jQuery 对象的 val() 方法改变表单内type=text 可用 <input> 元素的值
$("#b1").click(function(){
$("input[type='text']:enabled").val("hello");
})
//**利用 jQuery 对象的 length 属性获取多选框选中的个数
$("#b3").click(function(){
// alert($(":checkbox:checked").length);
alert($("input[type='checkbox']:checked").length);
})
//****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
$("#b4").click(function(){
//alert($("selectoption:selected").text());
//必须用这个 val()函数把每个值打印;
var $objs=$("selectoption:selected");
/* $.each($objs,function(){
alert($(this).val());
});*/
/* $.each($objs,function(i,n){
// alert(n.value);
alert($(n).val());
})*/
/* $objs.each(function(){
window.alert($(this).val());
})*/
$objs.each(function(i,n){
window.alert("ok"+$(n).val());
})
})
</script>
</html>
☞ 总结一下过滤器使用的方式
$("div:contains('di')");//内容
$("div[type]")//属性
$("div .one")//选中div 中含 class 为 .one 的div元素
$("div, .one")// 选中div 和 class 为 .one 的div元素
☞总结jquery对象集合遍历的四种形式
//必须 用这个 val()函数把每个值打印;
var $objs=$("selectoption:selected");
/* $.each($objs,function(){
alert($(this).val());
});*/
/* $.each($objs,function(i,n){
// alert(n.value);
alert($(n).val());
})*/
/* $objs.each(function(){
window.alert($(this).val());
})*/
$objs.each(function(i,n){
window.alert("ok"+$(n).val());
})
☞如何使用我们的选择器
总结如下:
1.使用什么样的选择器根据需求定
2.如果针对文档内容，则使用内容选择器
3.如果是选择父子（祖先、后代）元素则使用层次选择器
4. 如果是根据id/class/tagname/使用基本选择器
5. 如果是选择表单中的元素，则使用表单选择器、表单对象属性选择器
6. 根据可见性选择元素，则使用可见性选择器
7. 如果是选择某个元素中包含某个属性（属性值），则使用属性选择器
8. !!!如果考虑对选中的元素，要进行过滤，则使用过滤选择器，（有三种方法）
$("div:contains('di')");//内容
$("div[type]")//属性
$("div.one")// 选中div 中含 class 为 .one 的div元素
jquery如何操作dom
jquery的dom操作分为三种 (js)
① xml dom
② html dom
③ css dom
查找节点，然后去通过attr函数去修改或者设置属性的值.
- jQuery学习笔记（2）
- JQuery学习笔记（2）
- jquery学习笔记2（W3School学习）
- jQuery学习笔记2
- JQuery学习笔记(2)
- jquery学习笔记-2
- jquery-学习笔记2
- jQuery学习笔记(2)
- jQuery学习笔记2
- jQuery学习笔记2
- JQuery学习笔记2
- jquery学习笔记（-）
- 学习笔记（jQuery）
- Jquery UI学习笔记（2）
- JQuery 参考手册 学习笔记（2）-jquery 对象访问
- jQuery学习笔记（三）--jQuery选择器2
- jQuery学习笔记2之jQuery选择器
- Jquery 学习笔记（一）Jquery初识
- NTP服务
- Beyond Australis
- getsockopt()和setsockopt()函数详解
- go 生成区间随机数
- 贝叶斯网络以及应用
- JQuery学习笔记（2）
- 企业网站SEO优化不再难，只因为有了这套方案
- nginx对特定参数限流
- struts2架构图
- Android Linker 与 SO 加壳技术
- 基于WebSocket的多人在线坦克大战demo
- 公司版苹果开发者账号注册申请流程
- Android6.0运行时权限管理
- 最火Android开源项目DynamicGridView使用
