zoukankan      html  css  js  c++  java

  • HTML 学习笔记 JQuery（锋利的JQuery 代码）

    一 制作简单的导航栏

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        
        <style type="text/css">
            #menu {width: 300px;}
            /*cursor 规定光标的显示类型*/
            .has_children{background: #555555; color: #ffffff;cursor: pointer;}
            .highlight{color: #ffffff; background: green;}
            div {
                /*内间距*/
                padding: 1px;
                clear: left;
            }
            div a {
                background: #888888;
                /*标签a先不显示*/
                display: none;
                float: left;
                margin: 2px;
                widows: 300px;
            }
        </style>
        
        <script>
            $(function() {
                //为class = "has_children"的div添加点击事件
                $(".has_children").click(function() {
                    $(this).addClass("highlight")
                    //将子节点的元素显示出来 并重新定位到上次操作的元素
                    $(this).children("a").show().end()
                    //将点击div临近的兄弟元素 移除点击类
                    $(this).siblings().removeClass("highlight").children("a").hide()
                    
                })
            })
        </script>
    </head>
    <body>
        <div id="menu">
            <div class="has_children">
                <span>第一章－认识JQuery</span>
                <a>1.1-JavaScript和JavaScript库</a>
                <a>1.2-加入jQuery</a>
                <a>1.3-编写简单jQuery代码</a>
                <a>1.4-jQuery对象和DOM对象</a>
                <a>1.5-解决jQuery和其它库的冲突</a>
                <a>1.6-jQuery开发工具和插件</a>
                <a>1.7-小结</a>
            </div>
            <div class="has_children">
                <span>第2章-jQuery选择器</span>
                <a>2.1-jQuery选择器是什么</a>
                <a>2.2-jQuery选择器的优势</a>
                <a>2.3-jQuery选择器</a>
                <a>2.4-应用jQuery改写示例</a>
                <a>2.5-选择器中的一些注意事项</a>
                <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
                <a>2.7-还有其它选择器么？</a>
                <a>2.8-小结</a>
            </div>
            <div class="has_children">
                <span>第3章-jQuery中的DOM操作</span>
                <a>3.1-DOM操作的分类</a>
                <a>3.2-jQuery中的DOM操作</a>
                <a>3.3-案例研究——某网站超链接和图片提示效果</a>
                <a>3.4-小结</a>
            </div>
        </div>
    </body>
</html>

    二 选中提示

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        
        
    </head>
    <body>
        <input type="checkbox" id="cr" />
        <label for="cr">我已经阅读了上面的制度</label>
        
        <!--<div id="div100">哈哈哈哈</div>-->
    </body>
    <script>
        //JavaScript 操作
//        var dom = document.getElementById("cr")
//        dom.addEventListener("click",function() {
//            if (dom.checked) {
//                alert("感谢您的支持，请继续操作")
//            }
//        })
        //JQuery操作
        $(function() {
            $("#cr").click(function() {
                if ($(this).is(":checked")) {
                    alert("感谢您的支持，请继续操作")
                }
            })
        })
    </script>
</html>

    三 基本选择器

    JS文件

      $(document).ready(function(){
       
      $("#reset").click(function(){
          $("*").removeAttr("style");
           $("div[class=none]").css({"display":"none"}); 
      });
      
       $("input[type=button]").click(function(){
          if($("#isreset").is(":checked")){
               $("#reset").click();
           }
      });
      
       function animateIt() {
          $("#mover").slideToggle("slow", animateIt);
        }
        animateIt();
 })

    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;
  }

    HTML文件

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="../js/assist.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/Selecter.css"/>
    </head>
    <body>
        <button id="reset">手动重置页面元素</button>
          <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
         <h3>基本选择器.</h3>
 
        <!-- 控制按钮 -->
          <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="mover">正在执行动画的span元素.</span>
    </body>
    <script>
         $(document).ready(function(){
               //选择 id为 one 的元素
              $('#btn1').click(function(){
                  $('#one').css("background","#bfa");
              });
              //选择 class 为 mini 的所有元素
              $('#btn2').click(function(){
                  $('.mini').css("background","#bfa");
              });
              //选择 元素名是 div 的所有元素
              $('#btn3').click(function(){
                  $('div').css("background","#bfa");
              });
              //选择 所有的元素
              $('#btn4').click(function(){
                  $('*').css("background","#bfa");
              });
              //选择 所有的span元素和id为two的div元素
              $('#btn5').click(function(){
                  $('span,#two').css("background","#bfa");
              });    


          });
    </script>
</html>

    四 层次选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="../js/assist.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/Selecter.css" />
    </head>
    <body>
        <button id="reset">手动重置页面元素</button>
          <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
         <h3>基本选择器.</h3>
 
        <!-- 控制按钮 -->
          <input type="button" value="选择 body中所有的div元素." id="btn1"/>  
          <input type="button" value="选择 body中子元素是div的." id="btn2"/>
          <input type="button" value="选择 class为one的下一个div元素." id="btn3"/>
         <input type="button" value="选择 id为two的元素后面所有的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>
          <span id="mover">正在执行动画的span元素.</span>
    </body>
    <script>
        $(function() {
            $("#btn1").click(function() {
                //选择body中所有的div元素
                $("body div").css("background","#00FFFF")
            })
            $("#btn2").click(function() {
                //选择body中的所有子元素div
                $("body > div").css("background","#00FFFF")
            })
            $("#btn3").click(function() {
                //选择class为one的下一个div元素
                $(".one + div").css("background","#00FFFF")
            })
            $("#btn4").click(function() {
                //选择ID为two的元素后面所有的div兄弟元素
                $("#two ~ div").css("background","#00FFFF")
            })
        })
    </script>
</html>

    五 基本过滤选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="../js/assist.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/Selecter.css" />
    </head>
    <body>
        <h3>基本过滤选择器.</h3>
          <button id="reset">手动重置页面元素</button>
          <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
          
          <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的元素." id="btn6"/>
          <input type="button" value="选择索引值大于3的元素." id="btn7"/>
          <input type="button" value="选择索引值小于3的元素." id="btn8"/>
          <input type="button" value="选择所有的标题元素." id="btn9"/>
          <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
 
        <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="mover">正在执行动画的span元素.</span>
        
    </body>
    <script>
        $(function() {
            //选择第一个div元素
            $("#btn1").click(function() {
                $("div:first").css("background","#00FFFF")
            })
            //选择最后一个div元素
            $("#btn2").click(function() {
                $("div:last").css("background","#00FFFF")
            })
            //选择class不为one的所有div元素
            $("#btn3").click(function() {
                $("div:not(.one)").css("background","#00FFFF")
            })
            //选择索引值为偶数的div元素
            $("#btn4").click(function() {
                $("div:even").css("background","#00FFFF")
            })
            //选择索引值为奇数的div元素
            $("#btn5").click(function() {
                $("div:odd").css("background","#00FFFF")
            })
            //选择索引值等于3的元素
            $("#btn6").click(function() {
                $("div:eq(3)").css("background","#00FFFF")
            })
            //选择索引值大于3的元素
            $("#btn7").click(function() {
                $("div:gt(3)").css("background","#00FFFF")
            })
            //选择索引值小于3的元素
            $("#btn8").click(function() {
                $("div:lt(3)").css("background","#00FFFF")
            })
            //选择所有的标题元素
            $("#btn9").click(function() {
                $(":header").css("background","#00FFFF")
            })
            //选择 当前正在执行动画的元素
            $("#btn10").click(function() {
                $(":animated").css("background","#00FFFF")
            })
            
            
        })
    </script>
</html>

    六 内容过滤选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title>内容过滤选择器</title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="../js/assist.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/Selecter.css" />
    </head>
    <body>
        <h3>内容过滤选择器.</h3>
          <button id="reset">手动重置页面元素</button>
          <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

          <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"/>
          
                     <!-- 测试的元素 -->
          <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="mover">正在执行动画的span元素.</span>
          
    </body>
    <script>
        $(document).ready(function() {
            //选取含有文本"di"的div元素
            $("#btn1").click(function() {
                $("div:contains(di)").css("background","#00FFFF")
            })
            //选取不包含子元素(或者文本元素)的div
            $("#btn2").click(function() {
                $("div:empty").css("background","#00FFFF")
            })
            //选取含有class为mini的div元素
            $("#btn3").click(function() {
                $("div:has(.mini)").css("background","#00FFFF")
            })
            //选取含有子元素(或者文本元素)的div元素
            $("#btn4").click(function() {
                $("div:parent").css("background","#00FFFF")
            })
        })
    </script>
</html>

    七 可见性过滤选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="../js/assist.js"></script>
        <link type="text/css" rel="stylesheet" href="../css/Selecter.css" />
    </head>
    <body>
        <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button><br/><br/>
  <input type="button" value="选取所有可见的div元素." id="btn_visible"/>
 <br/>
  <input type="button" value="选取所有不可见的元素.包括&lt;
      input type='hidden'/&gt;和&lt;
      div style='display:none;'&gt;." id="btn_hidden"/>
      <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="mover">正在执行动画的span元素.</span>
    </body>
    <script>
        $(function() {
            //选取所有不可见的元素
            $("#btn_hidden").click(function() {
                alert( "不可见的元素有："+$('body :hidden').length +"个!
"+
           "其中不可见的div元素有:"+$('div:hidden').length+"个!
"+
           "其中文本隐藏域有:"+$('input:hidden').length+"个!");
           $("div:hidden").show(3000).css("background","#00FFFF")
            })
            //选取所有可见的元素
            $("#btn_visible").click(function() {
                $("div:visible").css("background","#00FFFF")
            })
        })
    </script>
</html>

    八 子元素过滤选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="../js/assist.js"></script>
        <link rel="stylesheet" href="../css/demo.css" />
    </head>
    <body>
        <button id="reset">手动设置页面元素</button>
        <input type="checkbox" id="isreset" checked="checked" />
        <label for="isreset">点击下列按钮先自动重置页面</label>
        <h3>子元素过滤选择器</h3>
        <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" />
        
        <div class="one" id="one">
            id为one class为one的div
            <div class="mini">
                class为mini的div
            </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>
        <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="mover">正在执行动画的span元素.</span>
    </body>
    <script type="text/javascript">
        $(function() {
            //选取每个父元素下的第二个子元素
            $("#btn1").click(function() {
                $("div:nth-child(2)").css("background","#008000")
            })
            //选取父元素下的第一个子元素
            $("#btn2").click(function() {
                $("div:first-child").css("background","#008000")
            })
            //选取父元素下的最后一个子元素
            $("#btn3").click(function() {
                $("div:last-child").css("background","#008000")
            })
            //如果父元素仅仅只有一个子元素，那么选中这个子元素
            $("#btn4").click(function() {
                $("div:only-child").css("background","#008000")
            })
        })
    </script>
</html>

    九 表单对象属性过滤选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <h3>表单对象属性过滤选择器</h3>
        <form id="form1" action="#">
            <button type="reset">重置所有的表单元素</button>
            <br /><br />
            <button id="btn1">对表单内 可用input赋值操作</button>
            <button id="btn2">对表单内不可用input操作</button>
            可用元素<input name="add" value="可用文本框" /> <br />
            不可用元素<input name="email" disabled="disabled" value="不可用文本框" /><br />
            可用元素<input name="che" value="可用文本框" /> <br />
            不可用元素<input name="name" disabled="disabled" 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
            <div></div>
            <br />
            下拉列表1:<br />
            <!--mulitiple 是控制是否展开-->
            <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 />
            <select name="test2">
                <option>浙江</option>
                <option>湖南</option>
                <option selected="selected">北京</option>
                <option>天津</option>
                <option>广州</option>
                <option>湖北</option>
            </select>
            <div></div>
        </form>
    </body>
    <script type="text/javascript">
        $(function() {
            //重置表单元素
              $(":reset").click(function(){
                  setTimeout(function() {
                    countChecked();
                    $("select").change();
              },0);
          });
            //对表单内 可用的input进行赋值操作
            $("#btn1").click(function() {
                $("#form1 input:enabled").val("这里变化了")
                return false
            })
            //对表单内不可用的input进行赋值操作
            $("#btn2").click(function() {
                $("#form1 input:disabled").val("我是不可用哦")
            })
            //使用:checkbox选取所有的复选框
            $(":checkbox").click(countChecked)
            function countChecked() {
                var n = $("input:checked").length
                $("div").eq(0).html("<strong>有 "+ n +" 个被选中！</strong>")
            }
            //进入页面就调用
            countChecked();
            
            //使用:selected选择器，来操作下拉列表.
            $("#form1 select").change(function () {
                var str = ""
                $("#form1 select :selected").each(function() {
                    str += $(this).text() + ",";
                })
                $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
            }).trigger("change")
            // trigger('change') 在这里的意思是：
            // select加载后，马上执行onchange.
            // 也可以用.change()代替.
        })
    </script>
</html>

    十 表单对象选择器

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <form id="form1" action="#">
            <input type="button" value="Button" /><br />
            <input type="checkbox" name="c" />1
            <input type="checkbox" name="c" />2
            <input type="checkbox" name="c" />3
            <br />
            <input type="file" /><br />
            <input type="hidden" />
            <div style="display: none;">test</div>
            <br />
            <input type="image" /><br />
            <input type="password" /><br />
            <input type="radio" name="a" />1
            <input type="radio" name="a" />2
            <input type="radio" name="a" />3 <br />
            <input type="reset" /><br />
            <input type="submit" value="提交"/><br />
            <input type="text" /><br />
            <select><option>Option</option></select><br/>
            <textarea rows="5" cols="20"></textarea><br />
            <button>Button</button><br />
        </form>
        <div></div>
    </body>
    <script>
        $(function() {
            //选取所有的单行文本框
            var $allText = $("#form1 :text")
            //选取所有的密码框
            var $allPassword = $("#form1 :password")
            //选取所有的单选框
            var $allRadio = $("#form1 :radio") 
            //选取所有的多选框
            var $allCheckbox = $("#form1 :checkbox")
            var $allsubmit= $("#form1 :submit");
            var $allimage= $("#form1 :image");
            var $allreset= $("#form1 :reset");
            var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
            var $allfile= $("#form1 :file");
                var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
                var $allselect = $("#form1 select");
                var $alltextarea = $("#form1 textarea");
    
            var $AllInputs = $("#form1 :input");
            var $inputs = $("#form1 input");
            
            $("div").append("有" + $allText.length + "个(:text 元素) <br />")
             .append(" 有" + $allPassword.length + " 个（ :password 元素）<br/>")
            .append(" 有" + $allRadio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allCheckbox.length + " 个（ :checkbox 元素）<br/>")
            .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
            .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
            .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
            .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
            .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
            .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
            .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
            .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
            .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
            .css("color", "red")
        })
    </script>
</html>

    十二 插入节点

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body
        <h3>街头访问</h3>
        <p title="你最喜欢的水果是">你最喜欢的水果是</p>
        <ul>
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
        </ul>
        
        <p id="pone">我想说</p>
        
        <p id="ptwo">在我之前插入</p>
        
    </body>
    <script>
        $(function () {
            //创建元素节点
            var $li_1 = $("<li title='香蕉'>香蕉</li>")
            $("ul").append($li_1)
            //或者这样
            $("<li title='雪梨'>雪梨</li>").appendTo($("ul"))
            //弹出雪梨 代表
            alert($("ul li[title = 雪梨]").attr("title"))
            //插入节点
            //向每个匹配的元素内部前置内容
            $("p:eq(0)").prepend($("<b>请问</b>"))
            //或者这样 <p><b>嘿嘿</b>你最喜欢的水果是</p>  以上都是元素内部插入
            $("<b>嘿嘿</b>").prependTo($("p:first"))
            
            //元素外部插入 在元素前或者元素后
            $("#pone").after($("<span>你是不是傻</span>"))
            //或者这样 
            $("<span>你是不是傻</span>").insertAfter($("#pone"))
            //上面的两句代码都是在元素后插入一个元素
            
            //在元素前插入一个元素
            $("#ptwo").before($("<p>哈哈哈哈</p>"))
            //或者这样
            $("<p>heiheihei</p>").insertBefore($("#ptwo"))
        })
    </script>
    
</html>

    十三 移动节点 删除节点

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
        <ul>
              <li title='苹果'>苹果</li>
              <li title='橘子'>橘子</li>
              <li title='菠萝'>菠萝</li>
              <li title="雪梨">雪梨</li>
        </ul>
    </body>
    <script>
        $(function() {
            //把苹果移动到菠萝的后面 橘子没动 菠萝也灭懂
            $("ul li:eq(0)").insertAfter($("ul li:eq(2)"))
            //删除节点
            $("ul li:eq(0)").remove()
            
            //remove()方法也可以这样用
            $("ul li").remove("li[title = 菠萝]")
            
            //empty()方法 只是清空元素中的内容 并没有清空元素
            $("ul li:eq(0)").empty()
        })
    </script>
</html>

    十四 复制节点 移除节点

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <h3>街头访问</h3>
        <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
        <ul>
              <li title='苹果'>苹果</li>
              <li title='橘子'>橘子</li>
              <li title='菠萝'>菠萝</li>
        </ul>
    </body>
    <script>
        $(function() {
            //复制节点 //如果你想复制的节点也有绑定的事件 那么加上参数clone(true) 
            $("ul li").click(function () {
                $(this).clone(true).appendTo("ul")
            })
            //替换节点
//            $("p").replaceWith($("<strong>你最喜欢的水果是什么</strong>"))
            //或者是这样
            $("<strong>你最喜欢的水果是什么呢</strong>").replaceAll($("p"))
        })
    </script>
</html>

    十五 包裹节点 替换样式

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <style type="text/css">
            .high {
                background: red;
            }
        </style>
    </head>
    <body>
        <h3>街头访问</h3>
        <strong title="选择你最喜欢的水果." class="myClass">你最喜欢的水果是?</strong>
        <ul>
              <li title='苹果'>苹果</li>
            <li title='橘子'>橘子</li>
              <li title='菠萝'>菠萝</li>
        </ul>
    </body>
    <script>
        $(function() {
            $("strong").click(function() {
                $("strong").toggleClass("high");
                if ($("strong").hasClass("high")) {
                alert("添加了样式")
                }
            })
            
//            //用small元素把strong元素包裹起来 将所有匹配的元素进行单独包裹
//            $("strong").wrap($("<small></small>"))
//            //wrapall() 将所有匹配的元素用一个元素包裹起来
//            $("ul li").wrapAll($("<small></small>"))
//            //wrapinner()方法 不是包裹元素 而是包裹元素中的内容
//            $("strong").wrapInner($("<h3></h3>"))
        })
    </script>
</html>

    十六 优化输入框

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" value="请输入邮箱地址" /><br />
        <input type="text" id="password" value="请输入邮箱密码" /><br />
        <input type="button" value="登陆" />
    </body>
    <script>
        $(function () {
            //获取焦点
            $("#address").focus(function () {
                var txt_value = $(this).val();
                if (txt_value == "请输入邮箱地址") {
                    $(this).val("");
                }
            })
            //失去鼠标焦点
            $("#address").blur(function () {
                var txt_value = $(this).val();
                if (txt_value == "") {
                    $(this).val("请输入邮箱地址");
                }
            })
            
            $("#password").focus(function(){
                var txt_value =  $(this).val();
                if(txt_value==this.defaultValue){
                        $(this).val("");
                } 
              });
             $("#password").blur(function(){
                      var txt_value =  $(this).val();
                if(txt_value==""){
                        $(this).val(this.defaultValue);
                } 
              })
            
        })
    </script>
</html>

    十七 使用val()方法操作select checkbox radio

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <style type="text/css">
            .test {
                font-weight: bold;
                color: red;
            }
            .add {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <input type="button" value="设置单选下拉框选中" />
        <input type="button" value="设置多选下拉框选中" />
        <input type="button" value="设置单选框和多选框选中" />
        <br />
        <select id="single">
            <option>选择1号</option>
              <option>选择2号</option>
              <option>选择3号</option>
        </select>
        
        <select id="multiple" multiple="multiple" style="height: 120px;">
            <option selected="selected">选择1号</option>
            <option>选择2号</option>
              <option>选择3号</option>
              <option>选择4号</option>
              <option selected="selected">选择5号</option>
        </select>
        <br />
        
        <input type="checkbox" value="check1"/> 多选1
        <input type="checkbox" value="check2"/> 多选2
        <input type="checkbox" value="check3"/> 多选3
        <input type="checkbox" value="check4"/> 多选4
        
        <br />
        
        <input type="radio" value="radio1" name="a" />单选1
        <input type="radio" value="radio2" name="a"/> 单选2
        <input type="radio" value="radio3" name="a"/> 单选3
    </body>
    <script>
        $(function () {
            //设置单选下拉框的选中
            $("input:eq(0)").click(function () {
                $("#single option").removeAttr("selected");
                //设置选中
//                $("#single option:eq(1)").attr("selected",true);    
                //或者这样
                $("#single").val(["选择2号"])
            })
            //设置多选下拉框选中
              $("input:eq(1)").click(function(){
                    $("#multiple option").removeAttr("selected");  //移除属性selected
//                    $("#multiple option:eq(2)").attr("selected",true)
                //或者这样
                $("#multiple").val(["选择2号","选择3号"])
              });
              //设置单选框和多选框选中
              $("input:eq(2)").click(function(){
                $(":checkbox").removeAttr("checked"); //移除属性checked
                $(":radio").removeAttr("checked"); //移除属性checked
//                $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
//                $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
                //或者这样
                $(":checkbox").val(["check2","check3"])
//                $("[value=radio2]:radio").attr("checked",true);//设置属性checked
                //或者这样
                $(":radio").val(["radio2"]);
              }); 
        })
    </script>
</html>

    十八 基本节点操作

    <html>
    <head>
        <meta charset="UTF-8">
        <title>遍历节点</title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
        <ul>
              <li title='苹果'>苹果</li>
              <li title='橘子'>橘子</li>
              <li title='菠萝'>菠萝</li>
        </ul>
    </body>
    <script>
        //children()方法只考虑子元素而不考虑任何后代元素
        var $body = $("body").children();
        var $p = $("p").children();
        var $ul = $("ul").children();
//        alert($body.length);
//        alert($p.length);
//        alert($ul.length);
//        var str = "";
        for (var i = 0; i< $ul.length;i++) {
//            alert($ul[i].innerHTML);
        }
        //next()方法用于寻找匹配元素后面紧邻的同辈元素
        //得到的是<ul></ul>
        var $p1 = $("p").next().children()
        alert($p1.length)
        //prev()方法获取匹配元素同辈的相邻的前面的元素
        //得到p元素
        $("ul").prev().css("background","#008000");
        
        //siblings()获取匹配元素相邻的周围的同辈元素
        $("ul li:eq(1)").siblings().css("color","blue");
        
        //closest() 获取离匹配元素最近的匹配元素
        $(document).bind("click", function (e) {
        $(e.target).closest("li").css("color","red");
    })
    </script>
</html>

    十九 文字提示

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                background: #FFFFFF;
                font: 80%,"arial black";
                color: #555555;
                line-height: 24px;
            }
            p {
                clear: both;
                margin: 0;
                padding: 5px 0;
            }
            #tooltip {
                position: absolute;
                border: 1px solid#333333;
                background: #f755d1;
                color: #333333;
                display: none;
            }
        </style>
    </head>
    <body>
        <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
        <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
    </body>
    <script type="text/javascript">
        $(function() {
            $("a.tooltip").mouseover(function (e) {
                var tooltip = "<div id='tooltip'>"+ this.title +"</div>";
                $("body").append(tooltip);
                $("#tooltip").css({"top":e.pageY +"px",
                "left":e.pageX + "px"
                }).show("fast");
            }).mouseout(function() {
                $("#tooltip").remove();
            })
        })
    </script>
</html>

    二十 图片提示

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
        <style type="text/css">
            body{margin: 0; padding: 40px; background: #ffffff; color: #555555; 
            font: 80% arial;
            line-height: 180%;
            }
            ul,li {margin: 0; padding: 0;}
            img{border: none;}
            li {list-style: none; float: left; display: inline; margin-right: 10px;
                border: 1px solid orange;
            }
            #tooltip{
                position:absolute;
                border:1px solid #ccc;
                background:#333;
                padding:2px;
                display:none;
                color:#fff;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                var x = 10;
                var y = 20;

                $("a.tooltip").mouseover(function (e) {
                    this.Mytitle = this.title;
                    this.title = "";
                    var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/></div>";
//               var tooltip = "<div id='tooltip'><img src= '"+ this.href + "' alt='产品预览' /></div>";
                    $("body").append(tooltip);
                    $("#tooltip").css({
                        "top":(e.pageY + y) + "px",
                        "left":(e.pageX + x) + "px"
                    }).show("fast");
                }).mouseout(function () {
                    this.title = this.Mytitle;
                    $("#tooltip").remove();
                }).mousemove(function (e) {
                    $("#tooltip").css({
                        "top":(e.pageY + y) + "px",
                        "left":(e.pageX + x) + "px"
                    })
                })
            })
        </script>
        
    </head>
    <body>
        <ul>
            <li>
                <a href="../img/apple_1_bigger.jpg" class="tooltip" title="苹果">
                    <img src="../img/apple_1.jpg" alt="苹果1" />
                </a>
            </li>
            <li>
                <a href="../img/apple_2_bigger.jpg" class="tooltip" title="苹果">
                    <img src="../img/apple_2.jpg" alt="苹果2" />
                </a>
            </li>
            <li>
                <a href="../img/apple_3_bigger.jpg" class = "tooltip" title="苹果">
                    <img src="../img/apple_3.jpg" alt="苹果3">
                </a>
            </li>
            <li>
                <a href="../img/apple_4_bigger.jpg" class="tooltip" title="苹果">
                    <img src="../img/apple_4.jpg" alt="苹果4" />
                </a>
            </li>
        </ul>
    </body>

</html>

    二十一 事件绑定

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/Style.css">
    <script type="text/javascript">
        $(function () {
            $("#panel h5.head").bind("click",function () {

                var $content = $(this).next("div.content");
                if ($content.is(":visible")) {
                    $content.hide();
                }else {
                    $content.show();
                }
            })

            //绑定其他的事件
            $("#panel h5.head").bind("mouseover",function () {
                var $content = $(this).next("div.content");
                $content.show();
            })

            $("#panel h5.head").bind("mouseout",function () {
                $(this).next("div.content").hide()
            })
        })
    </script>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是JQuery？</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig
            创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，
            极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、
            执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
        </div>
    </div>
</body>
</html>

    二十二 阻止事件冒泡 阻止事件默认事件

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("body").click(function () {
                alert("body 元素事件")
            })
            $("#content").click(function (e) {
                alert("div 元素事件")
                e.stopPropagation();
            })
            $("span").click(function (e) {
                alert("span 元素事件");
                //阻止冒泡 否则会依次相应 span div body 事件
                e.stopPropagation();
            })
            //阻止默认事件
            $("a").click(function (event) {
                //写了这句代码 点击超链接将失去作用
                event.preventDefault();
                event.stopPropagation();
    　　　　　　　　　　//或者写成这样
    　　　　　　　　　　return false;
    
            })
        })
        </script>
</head>
<body>
    <div id="content">
        外层元素
        <span>内层span元素</span>
        外层元素
    </div>
    <a href="http://www.baidu.com">百度一下</a>
</body>
</html>
  • 相关阅读:
    011. Python中*args, **kwargs 和 pass 和self 解释
    010. windows10下安装kivy 1.9.1版
    013. MVC5过滤器
    制作ubuntu16.04 自动安装iso镜像 二
    Nexus安装
    使用docker-compose 大杀器来部署服务 上
    Docker-Compose入门
    nvidia-docker命令详解
    安装使用NVIDIA-Docker-- 可使用GPU的Docker容器
    frp实现内网穿透
  • 原文地址：https://www.cnblogs.com/huanying2000/p/6409059.html
Copyright © 2011-2022 走看看