jq基础

Posted yangxionghao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq基础相关的知识,希望对你有一定的参考价值。

 jquery的选择器

 基本选择器

id选择器:$(“#id名称”);

元素选择器:$(“元素名称”);

类选择器:$(“.类名”);

通配符:*

多个选择器共用(并集)

 

案例代码:

<html>

    <head>

       <meta charset="UTF-8">

       <title>基本选择器</title>

       <link rel="stylesheet" href="../../css/style.css" type="text/css"/>

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

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("#one").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $(".mini").css("background-color","pink");

              });

              $("#btn3").click(function(){

                  $("div").css("background-color","pink");

              });

              $("#btn4").click(function(){

                  $("*").css("background-color","pink");

              });

              $("#btn5").click(function(){

                  $("#two .mini").css("background-color","pink");

              });

           });

       </script>    

    </head>

    <body>

       <input type="button" id="btn1" value="选择为one的元素"/>

       <input type="button" id="btn2" value="选择样式为mini的元素"/>

       <input type="button" id="btn3" value="选择所有的div元素"/>

       <input type="button" id="btn4" value="选择所有元素"/>

       <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

      

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

      

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

      

       <span id="four">

          

       </span>

    </body>

</html>

 

  

 

 

  层级选择器

 

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

 

代码演示:

 

<html>

    <head>

       <meta charset="UTF-8">

       <title>层级选择器</title>

       <link rel="stylesheet" href="../../css/style.css" />

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

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("body div").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $("body>div").css("background-color","pink");

              });

              $("#btn3").click(function(){

                  $("#two+div").css("background-color","pink");

              });

              $("#btn4").click(function(){

                  $("#one~div").css("background-color","pink");

              });

           });

          

       </script>

      

      

    </head>

    <body>

       <input type="button" id="btn1" value="选择body中的所有的div元素"/>

       <input type="button" id="btn2" value="选择body中的第一级的孩子"/>

       <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>

       <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

      

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

      

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

      

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

      

       <span id="four">

          

       </span>

    </body>

</html>

 

Ø  基本过滤选择器 

$(‘li‘).first() 等价于:$(“li:first”)

 

代码案例演示:

 

<html>

    <head>

       <meta charset="UTF-8">

       <title>基本过滤选择器</title>

       <link rel="stylesheet" href="../../css/style.css" type="text/css"/>

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

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("div:first").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $("div:last").css("background-color","pink");

              });

              $("#btn3").click(function(){

                  $("div:odd").css("background-color","pink");

              });

              $("#btn4").click(function(){

                  $("div:even").css("background-color","pink");

              });

           });

       </script>

      

    </head>

    <body>

       <input type="button" id="btn1" value="body中的第一个div元素"/>

       <input type="button" id="btn2" value="body中的最后一个div元素"/>

       <input type="button" id="btn3" value="选择body中的奇数的div"/>

       <input type="button" id="btn4" value="选择body中的偶数的div"/>

      

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

      

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

      

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

      

       <span id="four">

          

       </span>

    </body>

</html>

 

 

Ø  属性选择器

 

<html>

    <head>

       <meta charset="UTF-8">

       <title>层级选择器</title>

       <link rel="stylesheet" href="../../css/style.css"  type="text/css"/>

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

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("div[id]").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $("div[id=‘two‘]").css("background-color","pink");

              });

           });

          

       </script>

    </head>

    <body>

       <input type="button" id="btn1" value="选择有id属性的div"/>

       <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

      

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

      

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

      

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

      

       <span id="four">

          

       </span>

    </body>

</html>

 


Ø  表单选择器
 

<html>

    <head>

       <meta charset="UTF-8">

       <title>表单选择器</title>

       <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

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

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $(":input").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $(":text").css("background-color","pink");

              });

           });

       </script>

    </head>

    <body>

       <input type="button" id="btn1" value="选择所有input元素" />

       <input type="button" id="btn2" value="选择文本框" />

       <br/>

       <form>

           <input type="text[ThinkPad1] " /><br />

           <input type="checkbox" /><br />

           <input type="radio" /><br />

           <input type="image" /><br />

           <input type="file" /><br />

           <input type="submit" />

           <input type="reset" /><br />

           <input type="password" /><br />

           <input type="button" /><br />

           <select><option/></select><br />

           <textarea></textarea><br />

           <button></button>

       </form>

    </body>

</html>

以上是关于jq基础的主要内容,如果未能解决你的问题,请参考以下文章

jQuery源代码解析—— jq基础data缓存系统

jq基础

十条jQuery代码片段助力Web开发效率提升

用JQ实现基础的添加,插入,删除功能。

jq-outerhtml不能执行新元素内部的js解决方案

jQ学习之基础选择器的测试