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、input type选择
1.1 type = "text"
//为0可以不写
$("input[type=text]:eq(1)").val()
1.2 type ="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');
$("#son p: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()
3、返回上个prev()
$("#item2").parent().prev().html();
$("#item2").parent().prev(".twe").html();
4、返回上所用prevAll()
$("#item2").parent().prevAll(".twe").html()
七、包含选择器
1、包含内容contains(text)
$(".parent1 li:contains(内容)").html();
2、包含节点选择has(exp)
$(".parent1 li:eq(0)").has("a").html()
$(".parent1 li: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>")
//在第一位添加
$("#p1 p:eq(0)").before("<p><b>今年是公元2015年</b></p>")
alert($("#p1 p:eq(0)").html());
//$("<b>你好吗？</b>").appendTo("p");//将<b>追加到p元素中
$('#box').html($('#box').html() + '<em>www.li.cc</em>');
1.2、替换内容|节点
$("#p1 p:eq(0)").replaceWith("<p><b>今年是公元2015年</b></p>")
alert($("#p1 p:eq(0)").html());
1.3、复制内容|节点
$("#p1 p:eq(1)").clone(true).appendTo("#p1 p:eq(0)");
2、删除节点
2.1、删除当前节点
$("#p1 p:eq(0)").remove();
alert($("#p1 p: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(class1 class2 class3...) 给某个元素添加多个 CSS 类
removeClass(class) 删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类
toggleClass(class) 来回切换默认样式和指定样式
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
jQuery 提供了一个遍历工具专门来处理这种对象数组， $.each()方法
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
});
$('div').click(function () { //当点击后触发
$(this).toggleClass('red size'); //单个样式多个样式均可
});
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},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(){
//adding your code here
});
});
2、$(document).ready(function(){
$("#a").click(function(){
//adding your code here
});
});
3、window.onload = function(){
$("#a").click(function(){
//adding your code here
});
}
定义数组
var a = new Array(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 οnclick="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" οnclick="test2()" value="checkbox2" checked="checked">checkbox2<br/>
<input type="checkbox" value="checkbox3" checked="checked">checkbox3<br/>
</form>
<br/>_________________________<br/>
<div class="div1" οnclick="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 οnclick="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" οnclick="test5()">jquery获取父节点</a></li>
<li><a οnclick="test7()">jquery内容选择器</a></li>
<li class="twe"><a >jquery获取父元素1</a></li>
<li><a id="item2" οnclick="test6()">jquery获取父元素2</a></li>
<li><a >jquery</a></li>
<li></li>
</ul>
<div id="n1" οnclick="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>
