以下内容都是我读《锋利的jQuery》的笔记,记录下来,没事多看看。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
//改变id为one的元素的背景色 必须是单引号
//$('#one').css('background','#bfa');
//改变class为mini的所有元素背景色
//$('.mini').css('background','red');
//改变标签为div的所有元素背景色
//$('div').css('background','red');
//改变所有元素背景色
//$('*').css('background','red');
//改变<span>元素和id为two的元素的所有元素背景色
//$('span,#two').css('background','red');
//层次选择器
//1.改变body里面所有<div>的背景色
//$('body div').css('background','red');
//2.改变body内子元素div的背景色
//$('body>div').css('background','green');
//3.改变id为one的元素的下一个兄弟div元素的背景色
//$('#one + div').css('background','yellow');
//4.改变id为two的元素后面所有div兄弟元素的背景色
//$('#two ~ div').css('background','blue');
//上面3的替代方法
//$('#one').next('div').css('background','gray');
//上面4的替代
//$('#two').nextAll('div').css('background','gray');
// 3过滤选择器
//3.1基本过滤选择器
//1改变第一个div的颜色
// $('div:first').css('background','red');
//
// // 2改变最后一个div的颜色
// $('div:last').css('background','yellow');
//3改变所有class不为one的div的背景色
//$('div:not(.one)').css('background','yellow');
//4改变索引值为偶数的div的背景色 计数从0开始
//$('div:even').css('background','red');
//5改变索引值为奇数的div的背景色
//$('div:odd').css('background','red');
//6改变索引值为3的div的背景色
//$('div:eq(3)').css('background','red');
//7改变索引值大于3的div的背景色
//$('div:gt(3)').css('background','red');
//8改变索引值小于3的div的背景色
//$('div:lt(3)').css('background','red');
//9改变所有标题元素的
//$(':header').css('background','red');
//10改变所有标题元素的
//$(':animated').css('background','red');
//3.2内容过滤选择器
//1改变内容包含di的div元素的背景色
//$('div:contains(di)').css('background','red');
//2改变不包含子元素或者文本的空div元素的背景色
//$('div:empty').css('background','red');
//3改变含有class为mini的子元素的div元素的背景色
//$('div:has(.mini)').css('background','red');
//4改变含有子元素或者文本元素的元素的背景色
//$('div:parent').css('background','red');
//3.3可见性过滤选择器
//1改变所有可见元素的背景色
//$('div:visible').css('background','red');
//2将不可见元素3秒显示出来
//$('div:hidden').show(3000);
//3.4 属性过滤选择器
//1改变含有title属性的div元素的背景色
//$('div[title]').css('background','red');
//2改变属性值等于test的div元素的背景色
//$('div[title=test]').css('background','red');
//3改变title值不等于tets的div元素的背景色
//$('div[title!=test]').css('background','red');
//4改变title以te开头的div元素的背景色
//$('div[title^=te]').css('background','red');
//5.改变title以est结尾的div元素的背景色
//$('div[title$=est]').css('background','red');
//6.改变title含有es的div元素的背景色
//$('div[title*=es]').css('background','red');
//7改变含有id属性,并且title属性含有es的div元素的背景色
//$('div[id][title*=es]').css('background','red');
//3.5子元素过滤选择器
//1改变每个class为one的div元素的第二个子元素的背景色 必须空格
//$('div.one :nth-child(2)').css('background','red');
//2改变每个class为one的div元素的第一个子元素的背景色
//$('div.one :first-child').css('background','red');
//3.改变每个class为one的div元素的最后一个子元素的背景色
//$('div :last-child').css('background','red');
//4.如果class为one的div元素只有一个子元素,那么改变这个子元素的背景色
//$('div :only-child').css('background','red');
}
);
</script>
</head>
<body>
<h1>jQuery选择器</h1>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>
包含的input的type为hidden的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span</span>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.1.js">
</script>
<script type="text/javascript">
$().ready(
function() {
//表单对象属性过滤选择器
//1改变表单内可用元素的值
//$('#form1 input:enabled').val("这里变化了");
//2改变表单内不可用元素的值
//$('#form1 input:disabled').val("这里变化了");
//3选取多选框中选中的个数
//alert($('#form1 input:checked').length);
//4选取下拉框中选中的内容
alert($('#form1 select :selected').length);
}
);
</script>
</head>
<body>
<form action="" id="form1">
可用元素:<input name="add" value="可用文本框"/><br/>
不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素:<input name="che" value="可用文本框"/><br/>
不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框:<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
<input type="checkbox" name="newsletter" value="test2"/>test2
<input type="checkbox" name="newsletter" value="test3"/>test3
<input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
<input type="checkbox" name="newsletter" value="test5"/>test5
<div></div>
<br/><br/>
下拉列表:<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2:<br/>
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<div></div>
</form>
</body>
</html>