felayman——jquery选择器入门实例-优快云博客

本文深入解析jQuery的基础使用方法，包括如何选择元素、设置样式、添加事件等操作，并通过实例展示了如何利用jQuery进行DOM操作和动画效果实现。
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>jquery测试</title>
  <style type="text/css">
  button{
        display:block;
  }
        a{
        display:block;
        }
        p{
                width:100px;
                height:100px;
                border:2px solid blue;
                float:left;
                margin:2px;
        }
        div{
                width:100px;
                height:100px;
                border:2px solid red;
                float:left;
                margin:2px;
        }
  </style>
 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        /*
        类
                1.选择器
                       1.$("*")                   匹配所有选择器
                       2.$("#id")                       匹配指定某个id的元素
                       3.$(".class")            匹配指定某些class的元素
                       4.$("element")        匹配指定的元素
                       5.$(":first")             匹配某类元素的第一个元素
                       6.$(":last")              匹配某类元素的最后一个元素
                       7.$(":even")            匹配某类元素的个数为偶数的元素
                       8.$(":odd")                     匹配某类元素的个数为奇数的元素
                       9.$(":eq(index)")     匹配某类元素的第(index+1)个元素
                       10.$(":gt(index)")    匹配某类元素大于在第(index+1)个元素后面的元素
                       11.$(":it(index)")     匹配某类元素大于在第(index+1)个元素前面的元素
                       12.$(":not(selector)")匹配某类元素中不含selector选择器的元素
                       13.$(":header")               匹配所有的标题元素h1-h6
                       14.$(":animated")   匹配所有动画元素
                       15.$(":contains(content)")匹配含有指定内容的元素
                       16.$(":empty")                匹配没有孩子节点的元素
                       17.$(":hidden")               匹配所有正在隐藏的元素
                       18.$(":visible")       匹配所有正在显示的元素
                       19.$("selector1,selector2,selector3..")匹配一些指定选择器的y元素
                       20.$("[att]")            匹配具有指定属性的所有元素
                       21.$("[att=value]")  匹配具有指定属性且属性等于指定的值的所有元素
                       22.$("[att!=value]")匹配具有指定属性但属性不等于指定的值的所有元素
                       23.$(":input")          匹配所有input元素
                       24.$(":text")            匹配所有type=text的元素
                       25.$(":password")   匹配所有type=password的元素
                       26.$(":radio")          匹配所有type=radio的元素
                       27.$(":checkbox")  匹配所有type=checkbox的元素
                       28.$("submit")                匹配所有type=submit的元素
                       29.$(""reset)           匹配所有type=reset的元素
                       30.$("button")         匹配所有type=button的元素
                       31.$("image")         匹配所有type=image的元素
                       32.$("file")             匹配所有type=file的元素
                       33.$("enable")        匹配所有激活的元素
                       34.$("disabled")      匹配所有禁用的元素
                       35.$("selected")      匹配所有被选取的元素
                       36.$("checked")             匹配所有被选择的元素
        */
               
                $(function(){
                       //1.匹配所有选择器  包括document文档
                       //$("*").click(function(){
                               //alert("点击了我");
                       //2.匹配id
                       //});
                       $("#div").click(function(){
                               alert("点击了id为div的div");
                       });
                       //3.匹配某一类
                       $(".class").click(function(){
                               $(this).hide();
                       });
                       //4.匹配某个元素
                       $("h1").click(function(){
                               alert("点击了元素为h1的元素");
                       });
                       //5.匹配含有两个class属性的元素
                       $(".class1.class2").click(function(){
                               alert("点击了class=class1且class=class2的元素");
                       });
                       //6.匹配某类元素中的第一个元素
                        $("p:first").click(function(){
                               alert("点击了第一个p标签");
                       });
                       //7.匹配某类元素中的最后一个
                       $("p:last").click(function(){
                               alert("点击了最后一个p标签");
                       });
                       //8.匹配序号为偶数的p标签
                       $("#b1").click(function(){
                               $("p:even").css("color","red");
                       });
                       //9.匹配序号为奇数的p标签
                       $("#b1").click(function(){
                               $("p:odd").css("color","blue");
                       });
                       //10.匹配序号为指定号的的元素
                       $("#b1").click(function(){
                               $("p:eq(4)").css("background","yellow");
                       });
                       //11.匹配序号大于指定号的元素
                       $("#b1").click(function(){
                               $("p:gt(4)").css("background","red");
                       });
                       //12.匹配序号小于指定号的元素
                       $("#b2").click(function(){
                               $("p:lt(4)").css("background","blue");
                       });
                       //13.匹配所有标题元素
                       $(":header").css("color","pink");
                       //14.匹配所有包含指定内容的元素该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
                       $(":contains(div)").css("color","yellow");
                       //15.匹配所有没有孩子节点的元素文本节点
                       $("#b1").click(function(){
                               $(":empty").hide();
                       });
                       //17.匹配一类元素
                       $("#bi").click(function(){
                               $("h1,p,div").hide();
                       });
                       //18.匹配所有带href属性的元素
                       $("#b1").click(function(){
                               $("[href]").hide();
                       });
                       //19.匹配所有href属性等于value的元素
                       $("#b2").click(function(){
                               $("[href=value]").hide();
                       });
                       //20.匹配所有href属性不等于value的元素
                       $("#b3").click(function(){
                               $("[href!=value]").hide();
                       });
                       //21.所有与表单相关的选择器就不用看了
                });
               
        </script>
 </head>
 <body>
 <!--几个简单标签-->
 <button id="b1">测试按钮1</button><br/><button id="b2">测试按钮2</button><br/><button id="b3">测试按钮3</button>
 <p>p0</p><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p><p>p7</p><p>p8</p><p>p9</p><p>p10</p>
 <div class="class1  class2">div1</div>
 <div class="class">div2</div><div class="class">div3</div><div class="class">div4</div><div class="class">div5</div><div class="class">div6</div><div class="class">div7</div><div class="class">div8</div><div class="class">div9</div><div class="class">div10</div><div class="class">div11</div>
<h1>h1</h1><h2>h2</h2></h3></h3>
<a href="value">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a><a href="value">a5</a>
 </body>
</html>