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()
   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)
   $(".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 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>