JQuery hints

本元素相邻的label元素：
$("p +label")
 
本元素之后的所有同级label元素：
$("p ~label")
 
本元素下层中的所有span元素
$("div  span")
 
本元素下第一层中的所有span元素
$("div >span")
 
本元素（class="div1"）下 第一个li元素/最后一个li元素/奇，偶数li元素
$(".div1li:first")
$(".div1li:last")
$(".div1 li:odd") //偶数
$(".div1 li:even") //奇数
 
Not first or notlast
$(this).closest('tr').find('td:not(:last)')
$(this).closest('tr').find('td:not(:first)')
 
本元素（ul）下第一层索引为2的li元素，索引是从0开始
$("ul > li:eq(2)") //索引等于2
$("li:gt(2)") // 索引大于2
$("li:lt(2)") // 索引小于2
 
所有包含'jQuery'关键字的li
$("li:contains('jQuery')").css("background","green");
 
所有含有Label元素的li，'label'是选择器，可以任意定义。
$("li:has('label')").css("border","solid2px red")
 
所有可见p元素，所有隐藏li元素
$("li:hidden")
$("p:visible")
 
所有title 属性为'蔬菜'的li
$("li[title=蔬菜]").css("background-color","green");
 
title 属性以'蔬菜'结尾
$("li[title^=蔬菜]").css("background-color","green");
 
title 属性包含'蔬菜'
$("li[title*=蔬菜]").css("background-color","green");
 
title 属性以'蔬菜'结尾
$("li[title$=蔬菜]").css("background-color","green");
 
 
 
（1）所有title属性为'水果'，内容包含香蕉的，奇数位置的li;
$("li[title=水果]:contains(香蕉):even").css("background-color","yellow");
[attribute=value]:属性等于值
[attribute!=value]:属性不等于值
[attribute*=value]:属性包含值
 
指所有含有li作为子元素的元素下，第一个（最后一个）li元素，可能是一个集合：
$("li:first-child").css("background-color","green");
$("li:last-child").css("background-color","green");
 
 
说明：
（1）:多于一个选择器中间无需空格，直接写即可。
 
--------------------

选择表单元素：
:input
:password
:text
:radio
:checkbox
:submit
:image
 
// 根据属性
:checked
:selected
 
设置属性：           
$(":radio#Radio1").attr("disabled",true);
$(":radio#Radio2").attr("checked",true);
$(":radio#Radio3").hide();
 
CSS操作：
$("#content").addClass("red");
//$("#content").removeClass("red");
$("#content").addClass("blue");
$("#content").css({"background-color":"red","color":"white"});
 
 
// 在Selector中添加content
$(selector).append(content)
// 把content添加到selector中
$(content).appendTo(selector)
 
// 找到最近的父节点，并调用append():
var $html = "<span class='red'>小青蛙</span>"
$("#t1").closest("div").append($html);
 
// 向容器中添加元素，调用appendTo():
<span class="green">小乌龟</span>
var $html = "<span class='red'>小青蛙</span>"
$($html).appendTo($(".green"));
 
// Selector被content替换
$(selector).replaceWith(content)
// 使用content替换所有Selector的位置
$(content).replaceAll(selector)
 
//在selector位置之后添加content
$(selector).after(content)
//在selector位置之前添加content
$(selector).before(content)
 
//selector被content包裹（同appendTo）
$(selector).wrap(content)
//selector包裹content （同append）
$(selector).wrapInner(content)
 
 
//each遍历
 $("span").each(function (index) {
                if (index % i == 0) {
                    $(this).attr("class","red");
                })
 
//清空selector的子元素
$(selector).empty();
//清空selector下满足selecter-sub的子元素
$(selector).empty(selector-sub);
 
//删除selector的子元素
$(selector).remove();
//删除selector下满足selecter-sub的子元素
$(selector).remove(selector-sub);
 

//页面初始化
$(document).ready(function(){})等价于$(function(){});
 
//绑定事件
$(selector).bind("event",function(){});
$(selector).on("event",function(){});
$(selector).live("event", function(){}); //可绑定动态元素（从 jQuery 1.7 开始，不再建议使用 .live()方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8。）
 
//一次绑定多个事件，events中间用空格隔开
$(selector).bind("event1event2", function(){});
 
//解绑事件
$(selector).unbind("event");
 
//绑定一次事件
$(selector).one("event",function(){});
 
//触发事件
$(selector).trigger("event");
 
//hover, over
$(selector).hover(overFunc(){}，outFunc(){});
 
//focus(), blur()得到/失去焦点
 
//Toggle,会toggle selector指定的元素
$(selector).toggle(func1(){},funct2(){}, func3(){});
 
//显示,隐藏
// speed:毫秒; callback:完成之后调用
$(selector).hide(speed,[callback])
$(selector).show(speed,[callback])
 
//上划,下划
$(selector).slideUp(speed,[callback]) //应用于显示元素
$(selector).slideDown(speed,[callback]) //应用于隐藏元素
 
//上划下划切换
$(selector).slideToggle(speed,[callback])
 
//淡入淡出
$(selector).fadeIn(speed,[callback]) //应用于隐藏元素
$(selector).fadeOut(speed,[callback]) //应用于显示元素
$(selector).fadeTo(speed,opacity,[callback]) //指定透明度
 
//动画, callback中可再执行其他动画
$(selector).animate({params},speed,[callback])
//停止动画参数为bool
$(selector).stop([clearQueue],[goToEnd])
//延迟动画
$(selector).delay(duration)
 
----------------

<input type="button" value="Input Button" /><br />
<input type="submit" value="点我就提交了" /><br />
<button>Button</button><br />
 
$(":sumbit") ->会选中 2和 3
$(":button") ->会选中 1和 3
$("input:submit") ->会选中2
$("input:button") ->会选中1
-----------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>包裹元素和内容</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>   
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>使用wrapInner()方法包裹元素</h3>
        <span class="red" title='hi'>我的身体有点歪</span>
        
        <span class="span1">Hello I am span</span>
        <div class='div2'></div>

        <script type="text/javascript">
            // A被B包裹
            $(".span1").wrap("<div class='div1'></div>");
            // A包裹B
            $(".div2").wrapInner("<span class='span2'>Hello I am span2</span>");
            
            // .red被<i></i>包裹
            $(".red").wrapInner("<i></i>");
        </script>
    </body>
</html>

-------------------

<body>
        <h3>after()方法在元素之后插入内容</h3>
        <span class="green">我们交个朋友吧！</span>
        <div class="div1">
            <input type="text" value="t1"/>
            <input type="text" value="t4"/>
        </div>
        <script type="text/javascript">
            var $html1 = "<span class='red'>兄弟。</span>";
            $(".green").after($html);
            
            var $html2 = "<input type='text' value='t2'/>";
            var $html3 = "<input type='text' value='t3'/>";
            
            var $firstText = $(".div1 :text:first-child");
            var $lastText = $(".div1 :text:last-child");
            
            $firstText.after($html2);
            $lastText.before($html3);

        </script>
    </body>