jQuery学习笔记（二）
l JQuery选择器
JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件id”)来根据控件id获得控件的JQuery对象，相当于getElementById;
如: $(“#div1”).html(“<font color=”red”>ab</font>cd”);
l $(“TagName”)来获取所有指定标签名的JQuery对象。相当于getElementByTagName;
$(function(){$(“p”).click(function(){$(“p”).html(“我们都是p”)})})
l CSS选择器，同时选择拥有样式的多个元素
<style type=”text/css”>
.warming{background:yellow;color:red}
</style>
<script type=”text/javascript”>
$(“.warming”).click(function(){alert(“对不起你不能点击此事件!”);});
</script>
<p class=”warming”>简介</p>
<p class=”warming”>请带上你的身份证</p>
<input type=”button” class=”warming” />
l JQuery隐式迭代
问题：JQuery使用id选择器时即使id写错了也不会报错这给开发人员带来了很大的麻烦。所以需要判断对象是否存在。
原因：jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类的方法时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错。所以如果需要判断指定的id是否存在，应该如下写：
if($(“#btn1”).length<=0){
alert(“此id元素不存在”);
}
l 节点遍历
- next()方法用于获取节点之后的第一个同辈元素，$(“.menuitem”).next(“div”) next里面为选择器选择节点之后是div元素类型
- nextAll()方法用于获取节点之后的所有同辈元素，$(“.menuitem”).nextAll(“div”)
$("div").click(function () { $(this).nextAll("div").css("background","red"); });//自动隐式迭代
- siblings()方法用于获取所有同辈元素，
- $(“.menuitem”).siblings(“li”)
$("div").click(function () { $(this).css("background", "red"); $(this).siblings("div").css("background","white"); }); //给点击的设置为红色，没有点击的设置为白色
l 基本过滤选择器
l :first 选取第一个元素。$(“div:first”)选取第一个<div>
l :last 选取最后一个元素，$(“div:last”)选取最后一个<div>
l :not(选择器) 选取不满足“选择器”条件的元素 $(“input:not(.myClass)”)选取样式名不是myClass的<input>
l :even、:odd 选取索引是奇数、偶数的元素; $(“input:even”)选取索引为偶数的<input>
l :eq(索引序号)、:gt（索引序号）、:lt(索引序号) 选取索引等于、索引大于、索引小于序号的元素，比如: $(“input:lt(2)”) 选取索引值小于2的<input>
l $(“:header”) 选取所有的h1…….h6元素
l $(“div:animated”) 选取正在执行动画的<div>元素
案例:
$(function () {
$("#table1 tr:first").css("fontSize", "40px");
$("#table1 tr:last").css("background", "red");
$("#table1 tr:gt(1) :lt(4)").css("fontSize", "30");
$("#table1 tr:even").css("background","red");
});
l 相对定位：只要在$()指定第二个参数，第二个参数为相对的元素。$(“ul”,$(this)).css(“background”,”red”)
l 属性过滤器：
$(“div[id]”)选取有id属性的<div>
$(“div[title=test]”)选取 title属性值为”test”的<div> 因为jQuery没有getElementByName的方法封装。只能使用上述方法选取.如：$(“div[name=abcd]”) 表示选取name属性值为abcd的<div>
$(“div[title!=title]”)选取title属性值不为”title”的<div>
l 表单对象选择器 注意#form1与:enabled之间没有空格
$(“#form1:enabled”)选取id为form1的表单内所有启动的元素
$(“#form1:disabled”)选取id为form1的表单内所有禁止的元素
$(“input:checked”)选取所有选中的元素（Radio，CheckBox）
$(“select:selected”)选取所有选中的选项元素(下拉列表)
$(function () {
$("input[value=选?中D城?市ºD]").click(function () {
$("input:checked").css("background","red");
});
});
l 元素的each jQuery元素也可以调用each方法，只是对$.each的简化调用。
案例：显示选中的复选框信息
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name=names]").click(function () {
var arr = new Array();
$("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val(); });
$("#show").text("共选中"+arr.length+"项"+arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="names" value="小罗" />小罗<br />
<input type="checkbox" name="names" value="小周" />小周¨<br />
<input type="checkbox" name="names" value="小王" />小王<br />
<p id="show"></p>
l 表单选择器
$(“:input”) 选取所有<input>、<textarea>、<select>、<button>元素，和$(“input”)区别,$(“input”)只能获得<input>
$(“:text”)选取所有单行文本框，等价于$(“input[type=text]”)
$(“:password”)选取所有的密码框,同理的还有：:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden
l jQuery的DOM操作
- 使用html()可以读取或设置元素的innerHTML 如 alert($(“a:first”).html()); $(“a:first”).html(“hello”);
- 使用text()可以读取或设置元素的innerText 如alert($(“a:first”).text()); $(“a:first”).text(“hello”);
- 使用 attr()方法读取或设置元素的属性，对于jQuery没有封装的属性用attr进行操作
如: $(“a:first”).attr(“href”) $(“a:first”).attr(“href”,“http://www.baidu.com”)
- 使用reMove删除属性。删除属性和清空属性的区别：删除属性在源代码是没有看不到的，而清空属性在源代码中属性是存在的只是值为空
l 动态创建Dom节点
- 使用 $(html字符串)来创建Dom节点，返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom对象中
- var link=$(“<a href=”http://www.baidu.com”>百度</a>”);
- $(“div:first”).append(link);
- prepend 在元素开始添加元素 （添加儿子是在元素里面添加元素）
- after 在元素之后添加元素 (添加兄弟)
- before 在元素之前添加元素 (添加兄弟)
l jQuery的Dom操作
- 使用html()方法读取或者设置元素的innerHTML alert($(“a:first”).html()) //读取元素的innrtHTML $(“a:first”).html(“hello”) //设置元素的html
- 使用text()方法读取或者设置元素的innerText alert($(“a:first”).text()) //读取元素的innerText $(“a:first”).text(“hello”); //设置元素的innerText
- 使用attr()方法读取或者设置元素的属性。对于jQuery对象没有封装的属性可以使用attr（）方法进行操作。
如：alert($(“a:first”).attr(“href”)) //添加了a的href属性
$(“a:first”).attr(“href”,”http://www.baidu.com”) //设置了a的href属性为 http://www.baidu.com
- 使用remove方法删除属性，删除的属性在源代码中看不到，而清空属性的值在代码中是存在的只是值为空。这是删除与清空的区别。
$(function () {
$("#btnremove").click(function () {
$("ul li[class=testli]").remove();
});
});
- remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下：
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnright").click(function () {
var items = $("#select1 option:selected").remove();
$("#select2").append(items);
});
$("#btnleft").click(function () {
var items = $("#select2 option:selected").remove();
$("#select1").append(items);
});
});
</script>
</head>
<body>
<select id="select1" style="float:left;height:100px;width:15%" multiple="multiple">
<option>北À¡À京?</option>
<option>天¬¨¬津¨°</option>
<option>长¡è沙¦3</option>
<option>上¦?海¡ê</option>
</select>
<div style="float:left;width:15%">
<input type="button" value=">" style="float:left;width:100%"/ id="btnright">
<input type="button" value="<" style="float:left;width:100%" id="btnleft"/>
</div>
<select id="select2" style="float:left;width:15%" multiple="multiple">
</select>
</body>
- 案例加法计算器 需求解释：输入加数和被加数等到结果
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var txt1 = $("#text1").val();
var txt2 = $("#text2").val();
var txt3 = parseInt(txt1, 10) + parseInt(txt2, 10);
$("#text3").val(txt3);
});
});
</script>
</head>
<body>
<input type="text" id="text1" />+<input type="text" id="text2" /><input type="button" id="btn" value="=" /><input type="text" id="text3" />
</body>
7. 案例登陆界面 需求解释：倒计时实现登陆提醒
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var txt1 = $("#text1").val();
var txt2 = $("#text2").val();
var txt3 = parseInt(txt1, 10) + parseInt(txt2, 10);
$("#text3").val(txt3);
});
});
</script>
</head>
<body>
<input type="text" id="text1" />+<input type="text" id="text2" /><input type="button" id="btn" value="=" /><input type="text" id="text3" />
</body>