JQuery第一天——入门概述与选择器

一、什么是JQuery

　　一个流行的js库

　　核心理念：write less , do more

　　优势：　　　

　　　　 轻量级

　　　　强大的选择器

　　　　出色的 DOM 操作的封装

　　　　可靠的事件处理机制

　　　　完善的 Ajax

　　　　出色的浏览器兼容性

　　　　链式操作方式

　　JQuery对象是JQuery包装DOM对象所产生的对象

　　jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

　　 jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
　　jQuery转DOM：通过下标（既然是类数组），相反的DOM转jQuery:

　　　　var $div = $(div) (div这个DOM对象是通过var div = document.getElementById("div"));

　　约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.例如：$div

二、JQery的HelloWorld(感性认知)

　　new 一个 static web project

　　在 webContent 下引入 js 的库（直接复制到目录下即可）

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

　　导入库可以引入百度静态资源公共库

　　完整的HelloWorld代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    //$(function(){}) 相当于window.onload
    $(function(){
        //选取button
        //为button添加 onclick函数
        //弹出HelloWorld
        $("button").click(function(){
            alert("HelloWorld");
        });
    })
</script>
</head>
<body>
    <button>点击这里</button>
</body>
</html>
View Code

三、JQuery的选择器

　　选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

　　选择器的优点：

　　　　写法简洁

　　　　完善的事件处理机制

　　选择器基本介绍：

　　　　1.基本选择器

　　　　　　基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器,

　　　　　　它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用)

　　　　　　　　例如：选中id为btn1的button,为其添加click响应事件

　　　　　　完整的选择器与事件等见文档：http://tool.oschina.net/apidocs/apidoc?api=jquery

　　　　　　以下不再列出列表赘述。

$(function(){
                $("#btn1").click(function(){
                    alert("HelloWorld");
                });
            })

　　　　　　　　以下通过一组小例子演示基本选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        
        <!-- 导入JQuery的库 -->
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    //alert("HelloWorld");
                    $("#one").css("background","#FF0000");
                });
            });
            $(function(){
                $("#btn2").click(function(){
                    //alert("HelloWorld");
                    $(".mini").css("background","#FFCC00");
                });
            });
            $(function(){
                $("#btn3").click(function(){
                    //alert("HelloWorld");
                    $("div").css("background","#FFFF00");
                });
            });
            $(function(){
                $("#btn4").click(function(){
                    //alert("HelloWorld");
                    $("*").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn5").click(function(){
                    //alert("HelloWorld");
                    $("span,#two").css("background","#3399FF");
                });
            });
        </script>
        
    </head>
    <body>        
        <input type="button" value="选择 id 为 one 的元素" id="btn1" />
        <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
        <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
        <input type="button" value="选择 所有的元素" id="btn4" />
        <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
        
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
    </body>
</html>
View Code

　　　　　　2.层次选择器

　　　　　　　　如果想通过 DOM 元素之间的层次关系来获取特定元素,

　　　　　　　　例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

　　　　　　　基本层次选择器分类：

　　　　　　　　　　后代元素（ancestor  descendant）

　　　　　　　　　　子元素选择器（parent > child）

　　　　　　　　　　相邻元素选择器（prev + next）

　　　　　　　　　　兄弟选择器（prev  ~  siblings）　　

　　　　　　　　　　　　　　　　注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素;

　　　　　　　　　　　　　　而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

 　　　　　　　　完整的层次选择器示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn2").click(function(){
                    $("body > div").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn3").click(function(){
                    $("#one + div").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn4").click(function(){
                    $("#two ~ div").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn5").click(function(){
                    $("#two").siblings("div").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn6").click(function(){
                    $("#two").nextAll("span").css("background","#99FF99");
                });
            });
            $(function(){
                $("#btn7").click(function(){
                    $("#two").prevAll("div").css("background","#99FF99");
                });
            });
        
        </script>
    </head>
    <body>        
        <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
        <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
        <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
        <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
        <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
        <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
        <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />
        
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
        <span id="span">--span元素--</span>
    </body>
</html>
View Code

　　　　　　3.过滤选择器

　　　　　　　　过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

　　　　　　　　按照不同的过滤规则, 过滤选择器可以分为：

　　　　　　　　　　　　基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

　　　　基本过滤：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
                anmateIt();
                $("#btn1").click(function(){
                    $("div:first").css("background","#99FF99");
                });
                $("#btn2").click(function(){
                    $("div:last").css("background","#99FF99");
                });
                $("#btn3").click(function(){
                    $("div:not(.one)").css("background","#99FF99");
                });
                $("#btn4").click(function(){
                    $("div:even").css("background","#99FF99");
                });
                $("#btn5").click(function(){
                    $("div:odd").css("background","#99FF99");
                });
                $("#btn6").click(function(){
                    $("div:gt(3)").css("background","#99FF99");
                });
                $("#btn7").click(function(){
                    $("div:eq(3)").css("background","#99FF99");
                });
                $("#btn8").click(function(){
                    $("div:lt(3)").css("background","#99FF99");
                });
                $("#btn9").click(function(){
                    $(":header").css("background","#99FF99");
                });
                $("#btn10").click(function(){
                    $(":animated").css("background","#99FF99");
                });
                $("#btn11").click(function(){
                    $("#two").nextAll("span:first").css("background","#99FF99");
                });
                
            });
            
            
        </script>
    </head>
    <body>        
        <input type="button" value="选择第一个 div 元素" id="btn1" />
        <input type="button" value="选择最后一个 div 元素" id="btn2" />
        <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
        
        <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
        <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
        <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
        
        <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
        <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
        <input type="button" value="选择所有的标题元素" id="btn9" />
        
        <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
        <input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
        
        <h3>基本选择器.</h3>
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素 111^^</span>
        <span id="span">^^span元素 222^^</span>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>
View Code

　　　　内容过滤　　

　　　　　　内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    $("div:contains('di')").css("background","#99FF99");
                });
                $("#btn2").click(function(){
                    $("div:empty").css("background","#99FF99");
                });
                $("#btn3").click(function(){
                    $("div:has(.mini)").css("background","#99FF99");
                });
                $("#btn4").click(function(){
                    $("div:parent").css("background","#99FF99");
                });
                
            });
            
        </script>
    </head>
    <body>        
        <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
        <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
        <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
        <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
        
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>
View Code

 　　　　可见性过滤选择器

　　　　　　可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    $("div:visible").css("background","#99FF99");
                });
                $("#btn2").click(function(){
                    //show()方法的返回值是它本身，可以继续调用该对象的其他方法
                    $("div:hidden").show("1500").css("background","#99FF99");
                });
                $("#btn3").click(function(){
                    alert($("input:hidden").attr("value"));
                });    
            });
            
        </script>
    </head>
    <body>        
        <input type="button" value="选取所有可见的  div 元素" id="btn1">
        <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
        <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
        
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div
            <input type="hidden" value="123456789000" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>
View Code

　　　　属性过滤选择器　

　　　　　　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("div[title]").css("background","#99FF99");
                });
                $("#btn2").click(function(){
                    $("div[title='test']").css("background","#99FF99");
                });
                $("#btn3").click(function(){
                    $("div[title!='test']").css("background","#99FF99");
                });
                $("#btn4").click(function(){
                    $("div[title^='te']").css("background","#99FF99");
                });
                $("#btn5").click(function(){
                    $("div[title$='est']").css("background","#99FF99");
                });
                $("#btn6").click(function(){
                    $("div[title*='es']").css("background","#99FF99");
                });
                $("#btn7").click(function(){
                    $("div[id][title*='es']").css("background","#99FF99");
                });
                $("#btn8").click(function(){
                    $("div[title][title!='test']").css("background","#99FF99");
                });
            })
        </script>
    </head>
    <body>        
        <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
        <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
        <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
        <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>
        
        <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
        <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
        <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/>
        <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
        
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>
View Code

 　　　　子元素过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    //选择子元素需要在选择器前加空格
                    $("div.one :nth-child(2)").css("background","#99FF99");
                });
                $("#btn2").click(function(){
                    $("div.one :first-child").css("background","#99FF99");
                });
                $("#btn3").click(function(){
                    $("div.one :last-child").css("background","#99FF99");
                });
                $("#btn4").click(function(){
                    $("div.one :only-child").css("background","#99FF99");
                });
            });
        </script>
    </head>
    <body>        
        <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
        <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
        <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
        <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
        
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>
View Code

　　　　表单对象属性过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    //注意与input:enabled的区别
                    $(":text:enabled").val("尚硅谷");
                });
                $("#btn2").click(function(){
                    $(":text:disabled").val("尚硅谷");
                });
                $("#btn3").click(function(){
                    var num = $(":checkbox[name='newsletter']:checked").length;
                    alert(num);
                });
                $("#btn5").click(function(){
                    //实际被选中的不是select 而是其子节点option 故需要加空格表示子元素
                    //JQuery对象遍历的方法是each()，正在遍历的是DOM对象
                    //而不是JQuery对象
                    $("select :selected").each(function(){
                        alert(this.value);
                    });
                });
                $("#btn4").click(function(){
                    $(":checkbox[name='newsletter']:checked").each(function(){
                        alert(this.value);
                    });
                });
            })
        </script>
        
    </head>
    <body>
        <h3>表单对象属性过滤选择器</h3>
         <button id="btn1">对表单内 可用input 赋值操作.</button>
           <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
         <button id="btn3">获取多选框选中的个数.</button>
         <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
         
        <form id="form1" action="#">            
            可用元素: <input name="add" value="可用文本框1"/><br>
            不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
            可用元素: <input name="che" value="可用文本框2"/><br>
            不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br>
            <br>
            
            多选框: <br>
            <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
            <input type="checkbox" name="newsletter" value="test2" />test2
            <input type="checkbox" name="newsletter" value="test3" />test3
            <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
            <input type="checkbox" name="newsletter" value="test5" />test5
            
            <br><br>
            下拉列表1: <br>
            <select name="test" multiple="multiple" style="height: 100px">
                <option>浙江</option>
                <option selected="selected">辽宁</option>
                <option>北京</option>
                <option selected="selected">天津</option>
                <option>广州</option>
                <option>湖北</option>
            </select>
            
            <br><br>
            下拉列表2: <br>
            <select name="test2">
                <option>浙江</option>
                <option>辽宁</option>
                <option selected="selected">北京</option>
                <option>天津</option>
                <option>广州</option>
                <option>湖北</option>
            </select>
            
            <textarea rows="" cols=""></textarea>
        </form>        
    </body>
</html>
View Code

　　　上面迭循环遍历当然也可以包装成JQuery对象再使用JQuery的方法

alert($(this).val());

　　　　　表单选择器

　　　　　　这里不再逐一举例赘述，给出可用的选择器列表（其中像：input这类的选择范围太大，基本不用）

 　　　　当然，遇到一些选择器不方便完成的场景时，可以尝试JQuery的方法，

　　　　　　例如：attr()方法，val（）方法 each()方法等等

　　【更新】：更多选取元素的方法，请参阅API的选择器与筛选部分：http://tool.oschina.net/apidocs/apidoc?api=jquery

　　【更新】：jquery常见赋值取值操作：http://blog.csdn.net/cheung1021/article/details/6429260

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiangbei/p/6853197.html