2、jquery 复杂选择器
1、table选择
2、表单选择
3、class选择
4、子节点选择
5、父节点选择
6、同级选择器
7、包含选择器
8、属性过滤器
9、节点操作内容/值/属性/样式
一、table行列选择
1、定位选择
//多张table用0,1,2区分，后面可以是html();
$("table:eq(0)tr:eq(0)td:eq(0)").text();
1.1、列（行）选择：$(function(){
var st = new Array(3);
var tatal = 0;
for (var x=1 ; x<3;x++){
//第一列数字求和
st[x] = $("table:eq(0) tr:eq("+x+") td:eq(1)").text();
tatal += parseInt(st[x]);
}
alert(tatal);
});二、表单选择
1、inputtype选择
1.1type="text"
//为0可以不写
$("input[type=text]:eq(1)").val()
1.2type="checkbox"（name）
$(function(){
var key="";
var ck = $("input[type=checkbox]:checked");
//if(ck.length==1)单选
// alert(ck.val());
//多选
ck.each(function(i){
if(i != 0){
key += ",";
}
key += this.value;
});
$("input[type=text]:eq(0)").val(key) ;
});三、类选择器
alert($(".div1").length);
$(".div1").each(function()
{
alert(this);
});四、子节点选择
1、选取所有直接子节点使用>
$("#son>p").css('background','green');
1.1、选取特定的直接子节点（：first，last）
$("#son>p:eq(2)").css('background','green');
$("#son>p:last").css('background','green');
1.2、直接子节点的奇偶选择
$("#son>p:even").css('background','green');
$("#son>p:odd").css('background','yellow');
1.3、大于|小于选择
$("#son>p:gt(2)").css('background','green');
$("#son>p:lt(2)").css('background','yellow');
2、使用空格选择子节点（有时候使用>不能获取子节点）
$("table:eq(0)tr:eq(1)").css('background','green');
$("table:eq(0)tr:eq(1)td:eq(2)").css('background','yellow');
$("#sonp:eq(1)a").css('background','yellow');
3、使用find("p")方法
$("#item1").closest("ul").find("li:eq(2)").html();
4、使用children（exp）方法（使用较少，不介绍）
五、父节点选择
1、使用parent()
$("#item1").parent().html()
1.1、使用parent（exp）
$("#item1").parent().parent("ul").html()
1.3、使用parents（exp）（不常用：要查找所有exp直到html节点）
$("#item1").parents("ul").html()
2、使用closest（从当前元素开始匹配寻找，发现匹配的元素后停止）
$("#item1").closest("ul").html()
六、同级选择
1、返回下一个next();
$("#item1").parent().next().html();
//，如果下一个相邻元素不是twe，则为空|undifined
$("#item1").parent().next(".twe").html();
2、返回之后所有nextAll()没有通过eq(2)或[2]来读取？？？用来判断个数？
//查找特定的next
$("#item1").parent().nextAll(".twe").html()
alert(objs.parent().nextAll("td:eq(1)").text());
3、返回上个prev()
$("#item2").parent().prev().html();
$("#item2").parent().prev(".twe").html();
4、返回上所用prevAll()
$("#item2").parent().prevAll(".twe").html()
七、包含选择器
1、包含内容contains(text)
$(".parent1li:contains(内容)").html();
2、包含节点选择has(exp)
$(".parent1li:eq(0)").has("a").html()
$(".parent1li:eq(0):has(a)").html();
八、属性|过滤选择器
1、属性键值选择
$('a[title=num1]')
2、可见性过滤器
2.1、$("#n1:hidden").eq(0).parent().html()；
注意：在jQuery中，visibility:hidden;和opacity:0;都被视作可见的，因为它们在页面上占据了相应的物理空间。（display:none）
2.2、$("#n1:visible").length;
九、节点操作
1、内容|节点操作
1.1、添加内容
//在最后添加
$("#p1").append("<p><b>今年是公元2015年</b></p>")
//在第一位添加
$("#p1p:eq(0)").before("<p><b>今年是公元2015年</b></p>")
alert($("#p1p:eq(0)").html());
//$("<b>你好吗？</b>").appendTo("p");//将<b>追加到p元素中
$('#box').html($('#box').html()+'<em>www.li.cc</em>');
1.2、替换内容|节点
$("#p1p:eq(0)").replaceWith("<p><b>今年是公元2015年</b></p>")
alert($("#p1p:eq(0)").html());
1.3、复制内容|节点
$("#p1p:eq(1)").clone(true).appendTo("#p1p:eq(0)");
2、删除节点
2.1、删除当前节点
$("#p1p:eq(0)").remove();
alert($("#p1p:eq(0)").html());
2.2、empty()
empty()是将节点清空，清除节点的innerHTML，节点还在
3.样式操作
css(name)获取某个元素行内的CSS样式
css([name1,name2,name3])获取某个元素行内多个CSS样式
css(name,value)设置某个元素行内的CSS样式
css(name,function(index,value))设置某个元素行内的CSS样式
css({name1:value1,name2:value2})设置某个元素行内多个CSS样式
addClass(class)给某个元素添加一个CSS类
addClass(class1class2class3...)给某个元素添加多个CSS类
removeClass(class)删除某个元素的一个CSS类
removeClass(class1class2class3...)删除某个元素的多个CSS类
toggleClass(class)来回切换默认样式和指定样式
varbox=$('div').css(['color','height','width']);//得到多个CSS样式的数组对象
for(variinbox){//逐个遍历出来
alert(i+':'+box[i]);
}
jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法
$.each(box,function(attr,value){//遍历JavaScript原生态的对象数组
alert(attr+':'+value);
});
$('div').click(function(){//当点击后触发
$(this).toggleClass('redsize');//单个样式多个样式均可
});
varcount=0;
$('div').click(function(){
$(this).toggleClass(function(){
return$(this).hasClass('red')?'blue':'redsize';
},count++%3==0);//增加了频率
});
4、属性操作
attr(key)获取某个元素key属性的属性值
attr(key,value)设置某个元素key属性的属性值
attr({key1:value2,key2:value2...})设置某个元素多个key属性的属性值
attr(key,function(index,value){})设置某个元素key通过fn来设置
$('div').removeAttr('title');//删除指定的属性
页面加载完成后执行jquery：
1、$(function(){
$("#a").click(function(){
//addingyourcodehere
});
});
2、$(document).ready(function(){
$("#a").click(function(){
//addingyourcodehere
});
});
3、window.onload=function(){
$("#a").click(function(){
//addingyourcodehere
});
}
定义数组
vara=newArray(10);
demo
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'jquery1.jsp' starting page</title>
<script type="text/javascript" src="<%=path %>/resourses/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#p1").remove("#p1 p:eq(1)");
alert($("#p1 p:eq(0)").html());
});
function test1(){
var st = new Array(3);
var tatal = 0;
for (var x=1 ; x<3;x++){
//第一列数字求和
st[x] = $("table:eq(0) tr:eq("+x+") td:eq(1)").text();
tatal += parseInt(st[x]);
}
$("table:eq(0) tr:eq(3) td:eq(1)").html(tatal);
}
function test2(){
var key="";
var ck = $("input[type=checkbox]:checked");
//if(ck.length==1)单选
// alert(ck.val());
//多选
ck.each(function(i){
if(i != 0){
key += ",";
}
key += this.value;
});
$("input[type=text]:eq(0)").val(key) ;
}
function test3(){
alert($(".div1").length);
$(".div1").each(function()
{
alert(this);
});
}
function test4(){
$("#son p:eq(1) a").css('background','yellow');
$("table:eq(0) tr:eq(1) td:eq(2)").css('background','yellow');
}
function test5(){
alert($("#item1").closest("ul").html());
}
function test6(){
var s=$("#item2").parent().siblings().html();
alert(s.length);
}
function test8(){
var s = $(".parent1 li:eq(0):has(a)").html();
alert(s);
}
function test8(){
alert($("#n1 :hidden").eq(0).parent().html());
}
</script></head>
<body>
<table>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>3333</td>
<td>4444</td>
</tr>
<td>合计</td>
<td onclick="test1()">多少？</td>
<td>多少？</td>
<td>多少？</td>
</tr>
</table><br/>
_________________________<br/>
<form action="#" id="form1">
<input type="text" value="input1"><br/>
<input type="text" value="input2"><br/>
<input type="checkbox" value="checkbox1">checkbox1<br/>
<input type="checkbox" onclick="test2()" value="checkbox2" checked="checked">checkbox2<br/>
<input type="checkbox" value="checkbox3" checked="checked">checkbox3<br/>
</form>
<br/>_________________________<br/>
<div class="div1" onclick="test3()">okokokok1</div>
<div class="div1" >okokokok1</div>
<div class="div1" >okokokok1</div>
<div class="div2" >okokokok2</div>
<div class="div2" >okokokok2</div>
<div class="div2" >okokokok2</div>
<div class="div2" >okokokok2</div>
<br/>_________________________<br/>
<div id ="son">
<p>test1</p>
<p><a onclick="test4()">test2</a></p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
<p>test6</p>
</div>
<br/>_________________________<br/>
<ul class="parent1">
<li><a id="item1" onclick="test5()">jquery获取父节点</a></li>
<li><a onclick="test7()">jquery内容选择器</a></li>
<li class="twe"><a >jquery获取父元素1</a></li>
<li><a id="item2" onclick="test6()">jquery获取父元素2</a></li>
<li><a >jquery</a></li>
<li></li>
</ul>
<div id="n1" onclick="test8()">
<p id="n2" style="display: none;"></p>
<p id="n3">
<span id="n4">CodePlayer</span>
<input id="n5" type="hidden" value="js">
<span id="n6" style="visibility: hidden;">http</span>
<span id="n7" style="opacity: 0;">jQuery手册</span>
</p>
</div>
<div id = "p1">
<p>11111111111111111</p>
<p>2222222222222222</p>
<p>3333333333333333</p>
<p>4444444444444444</p>
</div>
</body>
</html>