首页 > 代码库 > jquery-63-68讲
jquery-63-68讲
jquery63_basic_03
$(function(){
//目前是一个javascript的对象，对于该对象而言，无法使用jquery的方法
var hello = document.getElementById("hello");
//是js的对象，不能使用jquery的方法
// hello.css("color","#f00");
//使用$(xx)就可以把xx这个节点封装为jquery的节点
$(hello).css("color","#f00");
//每一个jquery节点都是一个数组，只要取出数组中的值，这个值就是js的节点，就只能用js的方法
//当转换为js节点之后，就无法使用jquery的方法，如果要使用jquery的方法在通过$()进行封装就可以了
($("li.abc")[0]).innerHTML = "abccdd";
var lis = $("#hello ul li");
for(var i=0;i<lis.length;i++) {
//目前的li是js的节点
var li = lis[i];
//li.innerHTML = "["+(i+1)+"]"+li.innerHTML;
//$(li)就变成了JQuery节点
//xx.html()读取内容，xx.html("abc")：把节点的内容完成替换
$(li).html((i+1)+"."+$(li).html());
}
});
</script>
</head>
<body>
<div id="hello">
<ul>
<li>aaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbb</li>
<li class="abc">ccccccccccccc</li>
<li>ddddddddddddd</li>
<li>eeeeeeeeeeeee</li>
</ul>
</div>
结果：
64讲 选择器jquery64_select01.html
$(function() {
//取li中的所有a
//$("li a").css("color","#f00");
//取class为.myList这个标签的下一级标签li的下一级标签为a的节点
// $(".myList>li>a").css("color","#f00");
//去li的节点其中li中的href属性是以http://为开头
// $("a[href^=‘http://‘]").css("background","#00f").css("color","#fff");
//取.myList的ul中的包含有a标签的li标签
//$(".myList ul li:has(‘a‘)").css("background","#ff0");//
//获取页面中所有以pdf结尾的超级链接
// $("a[href$=‘pdf‘]").css("background","#ff0").css("color","#f00");
//取id为li1的下一个兄弟节点li,仅仅只会去一个节点,
//仅仅只会取相邻的节点，如果相邻的节点不是li就什么都取不出去
//$("#li1+li").css("background","#ff0");
//取id为li的下面的所有满足条件的兄弟节点
// $("#li1~li").css("background","#ff0");
// $("a[title]").css("color","#0f0");
//页面中最先匹配的某个元素
//alert($("li:first").html());
//页面中最后匹配的元素
//alert($("li:last").html());
//获取满足要求的第一个li
// $(".myList>li li:first-child").css("background","#f00");
//获取没有兄弟节点的ul
//alert($("ul:only-child").length);
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href=http://www.mamicode.com/"http://jquery.com">JQuery site
<ul>
<li><a href=http://www.mamicode.com/"css1.txt" title="mycss">CSS1
<li id="li1"><a href=http://www.mamicode.com/"css2.pdf" title="css2">CSS2
<li><a href=http://www.mamicode.com/"css3.html" title="this is my">CSS3
<li>Basic XPath</li>
</ul>
</li>
<li>JQuery also supports
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
</body>
</html> 
66讲 包装集jquery66_wrap01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//获取tr的元素个数
//alert($("tr").length);
//当执行了get之后得到的结果是一个js的元素
//$($("tr").get(1)).css("color","#f00");
//判断id为abc的tr在包装集的位置
// alert($("tr").index($("tr#abc")));
//在表达式中通过,可以分割多个包装集，
//但是如果包装集太多，而且有时候可以变动的时候，使用这种方式就不好操作
//$("tbody tr:eq(2),tr#abc").css("color","#f00");
/*
* 可以为包装集使用add方法，可以将新加入的元素添加到包装集中
*/
// $("tbody tr:eq(2)").add("thead tr td:eq(2)")
// .add("tr td:contains(‘3‘)").css("color","#f00");
//not方法可以将包装集中的元素取消掉
//$("tr").not("tr#abc").css("color","#f00");
//获取tr中位置小于3的元素
//$("tr").filter("tr:lt(3)").css("color","#f00");
//获取tr中的1,3形成一个新的包装集，返回的值就是新的包装集
// $("tr").css("background","#00f").slice(1,3).css("color","#f00");
//从包装集的内部获取相应的元素，返回的值也是新包装集
//$("table").find("tr#abc").css("color","#f00");
//is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
//alert($("table").is("td:contains(‘用户‘)"));
//获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
//$("tbody").children("tr:eq(3)").css("color","#f00");
//找到下一个子元素，只是一个元素，返回新包装集
// $("tr#abc").next().css("color","#ff0");
//找到下一个组兄弟元素，所有元素，返回新包装集
// $("tr#abc").nextAll().css("color","#0f0");
//parent仅仅只是返回上一级的div，返回新包装集
// $("#s1").parent("div").css("color","#0f0");
//返回所有满足条件的父类节点，返回新包装集
// $("#s1").parents("div").css("color","#f00");
//返回第3个tr的所有兄弟节点，返回新包装集
var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");
alert(a);
});
</script>
</head>
<body>
<div id="d1">
cdd
<div>
<span id="s1">abc</span>
</div>
</div>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
67讲，包装集 juqery67_wrap02
<script type="text/javascript">
$(function() {
//使用end可以返回上一个包装集
$("tr:eq(2)").siblings("tr")
.css("background","#00f").css("color","#fff")
.end().css("background","#f00").css("color","#100f");
// $("#users tbody").clone().appendTo("#tus").find("tr:even").css("color","#f00")
// .end().end().find("tr:odd").css("color","#00f");
//andSelf表示把所有的包装集合并在一起
//$("#users tbody").clone().appendTo("#tus").andSelf().find("td:contains(‘3‘)").css("color","#f00");
//查询出了两个包装集，一个为tus的table一个为users的table，此时可以过滤得到users这个table
//无法使用filter(tr)
$("table").filter("table#users").css("color","#f00");
//从users这个id的元素中过滤tr为2的元素
$("#users").find("tr:eq(2)").css("background","#00f");
});
</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
68_jquery07_jquery的each,map,has
/*
* 通过map可以有效的将某个包装集中的元素转换为数组
*/
var ps = $("tbody td:nth-child(1)").map(function(){
var n = $(this).next("td");
var p = {"id":$(this).html(),"name":n.html()};
return p;
}).get();
for(var i=0;i<ps.length;i++) {
alert(ps[i].name);
}
});
68讲 has用法
<script type="text/javascript">
$(function() {
//获取存在有ul的li，返回的是新包装集
$("li").has("ul").css("color","#f00");
// $("div").has("span").css("color","#f00");
});
</script>
</head>
<body>
<div>
<span class="s1">ssssssssssssssssss</span>
</div>
<div>
<span>
2222222222222222222
</span>
</div>
<div>
<ul class="u1">
<li>aaaaaaaaaaaaa</li>
</ul>
</div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>
<ul>
<li>cccccccc1</li>
<li>cccccccc2</li>
</ul>
</li>
<li>
dddddd
</li>
</ul>
</body>
</html>
68讲 each
$(function() {
var ns = $("tbody td:nth-child(2)");
/**
* 使用以下方法进行遍历基本上是基于js进行操作
* 对于jquery有自己的一套遍历方法，可以直接通过
* each函数进行遍历
*/
/*for(var i=0;i<ns.length;i++) {
var nn = ns[i];//nn已经是js的节点
var id = $(ns[i]).prev("td").html();
var age = $(ns[i]).next("td").html();
nn.innerHTML = id+">>"+nn.innerHTML+"("+age+")";
}*/
/**
* 对于JQuery而言，可以用each遍历所有的数组对象
* each中的匿名函数n表示的是数组的下标,从0开始
*/
ns.each(function(n){
$(this).html($(this).prev("td").html()+
"."+$(this).html()+
"("+$(this).next("td").html()+")");
//alert(n+"."+$(this).html());
});
});
</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery-63-68讲