jQuery简单入门

墨蓝 2022-04-06 08:08 303阅读 0赞

文章目录

  • 简单入门
    • 什么是jquery
    • 怎么使用jquery
    • Jquery的简单入门
    • 获取元素
    • Jquery对象与DOM对象转换
  • jQuery的选择器
    • 基本选择器
    • 层级选择器
    • 基本过滤选择器
    • 属性选择器
    • 表单选择器

简单入门

什么是jquery

Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

怎么使用jquery

  1. Jquery它是一个库(框架)，要想使用它，必须先引入！
  2. jquery-1.8.3.js：一般用于学习阶段。
  3. jquery-1.8.3.min.js：用于项目使用阶段（功能和上面的一样，只是体积更小了，不适合看源码）

Jquery的简单入门

  1. 所有的jquery代码写在页面加载函数，一般带$的就是jQuery代码。
  2. $(function(){
  3.     Jquery代码
  4. });
  6. <html>
  7.     <head>
  8.         <meta charset="UTF-8">
  9.         <title>jquery入门</title>
  10.         <script src="../../js/jquery-1.8.3.js"></script>
  11.         <script>
  12.             //整个文档加载完毕后执行
  13.             /*function init(){
  14.                 alert("张三");
  15.             }*/
  17.             /*window.onload= function(){
  18.                 alert("张三");
  19.             }
  21.             //整个文档加载完毕后(包括图片)执行
  22.             window.onload= function(){
  23.                 alert("老王");
  24.             } 
  25.             //dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完
  26.             jQuery(document).ready(function(){
  27.                 alert("李四");
  28.             }); 
  29.             //jquery的简写方法(页面加载)
  30.             $(function(){
  31.                 alert("王五");
  32.             });
  33.             */
  34.             function init(){
  35.                 document.getElementById("a1").onclick= function(){
  36.                     location.href="";
  37.                 }
  38.             }
  39.             $(function(){
  40.                 document.getElementById("a1").onclick= function(){
  41.                     location.href="";
  42.                 }
  43.             });
  44.             $(function(){
  45.                 document.getElementById("a2").onclick= function(){
  46.                     location.href="";
  47.                 }
  48.             });
  49.         </script>
  50.     </head>
  51.     <body onload="init()">
  52.         <a href="#" id="a1">ss</a>
  53.         <a href="#" id="a2"></a>
  54.     </body>
  55. </html>

获取元素

  1. JS:document.getElementById();
  2. JQ:$(“#id”);

Jquery对象与DOM对象转换

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  6.         <script>
  7.             function JSWrite(){
  8.                 //document.getElementById("span1").innerHTML="美美哒！";
  9.                 var spanEle = document.getElementById("span1");
  10.                 $(spanEle).html("美美哒！");
  11.             }
  13.             $(function(){
  14.                 /*document.getElementById("btn1").onclick = function(){
  15.                     document.getElementById("span1").innerHTML="帅帅哒！";
  16.                 }*/
  17.                 $("#btn1").click(function(){
  18.                     //JQ对象转换成DOM对象的第一种方式
  19.                     //$("#span1")[0].innerHTML="呵呵哒！";
  20.                     //JQ对象转换成DOM对象的第二种方式
  21.                     $("#span1").get(0).innerHTML="呵呵哒！";
  22.                 });
  24.             });
  25.         </script>
  26.     </head>
  27.     <body>
  28.         <input type="button" value="JS写入" onclick="JSWrite()"/>
  29.         <input type="button" value="JQ写入" id="btn1"/><br /><br />
  30.         <span id="span1">sssss</span>
  31.     </body>
  32. </html>
  34. 注意：JQ对象只能操作JQ里面的属性和方法
  35.   JS对象只能操作JS里面的属性和方法。

jQuery的选择器

基本选择器

  1. id选择器：$(“#id名称”);
  2. 元素选择器：$(“元素名称”);
  3. 类选择器：$(“.类名”);
  4. 通配符：*    
  5. 多个选择器共用(并集)

案例代码

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>基本选择器</title>
  5.         <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
  6.         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  7.         <script>
  8.             $(function(){
  9.                 $("#btn1").click(function(){
  10.                     $("#one").css("background-color","pink");
  11.                 });
  12.                 $("#btn2").click(function(){
  13.                     $(".mini").css("background-color","pink");
  14.                 });
  15.                 $("#btn3").click(function(){
  16.                     $("div").css("background-color","pink");
  17.                 });
  18.                 $("#btn4").click(function(){
  19.                     $("*").css("background-color","pink");
  20.                 });
  21.                 $("#btn5").click(function(){
  22.                     $("#two .mini").css("background-color","pink");
  23.                 });
  24.             });
  25.         </script>        
  26.     </head>
  27.     <body>
  28.         <input type="button" id="btn1" value="选择为one的元素"/>
  29.         <input type="button" id="btn2" value="选择样式为mini的元素"/>
  30.         <input type="button" id="btn3" value="选择所有的div元素"/>
  31.         <input type="button" id="btn4" value="选择所有元素"/>
  32.         <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
  33.         <hr/>
  34.         <div id="one">
  35.             <div class="mini">
  36.                 111
  37.             </div>
  38.         </div>
  40.         <div id="two">
  41.             <div class="mini">
  42.                 222
  43.             </div>
  44.             <div class="mini">
  45.                 333
  46.             </div>
  47.         </div>
  49.         <div id="three">
  50.             <div class="mini">
  51.                 444
  52.             </div>
  53.             <div class="mini">
  54.                 555
  55.             </div>
  56.             <div class="mini">
  57.                 666
  58.             </div>
  59.         </div>
  61.         <span id="four">
  63.         </span>
  64.     </body>
  65. </html>

层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child :在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
代码演示：

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>层级选择器</title>
  5.         <link rel="stylesheet" href="../../css/style.css" />
  6.         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  7.         <script>
  8.             $(function(){
  9.                 $("#btn1").click(function(){
  10.                     $("body div").css("background-color","pink");
  11.                 });
  12.                 $("#btn2").click(function(){
  13.                     $("body>div").css("background-color","pink");
  14.                 });
  15.                 $("#btn3").click(function(){
  16.                     $("#two+div").css("background-color","pink");
  17.                 });
  18.                 $("#btn4").click(function(){
  19.                     $("#one~div").css("background-color","pink");
  20.                 });
  21.             });
  23.         </script>
  26.     </head>
  27.     <body>
  28.         <input type="button" id="btn1" value="选择body中的所有的div元素"/>
  29.         <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
  30.         <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
  31.         <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
  33.         <hr/>
  34.         <div id="one">
  35.             <div class="mini">
  36.                 111
  37.             </div>
  38.         </div>
  40.         <div id="two">
  41.             <div class="mini">
  42.                 222
  43.             </div>
  44.             <div class="mini">
  45.                 333
  46.             </div>
  47.         </div>
  49.         <div id="three">
  50.             <div class="mini">
  51.                 444
  52.             </div>
  53.             <div class="mini">
  54.                 555
  55.             </div>
  56.             <div class="mini">
  57.                 666
  58.             </div>
  59.         </div>
  61.         <span id="four">
  63.         </span>
  64.     </body>
  65. </html>

基本过滤选择器

  1. $('li').first()等价于：$(“li:first”)

代码案例演示：

基本过滤选择器

  1. </head>
  2. <body>
  3.     <input type="button" id="btn1" value="body中的第一个div元素"/>
  4.     <input type="button" id="btn2" value="body中的最后一个div元素"/>
  5.     <input type="button" id="btn3" value="选择body中的奇数的div"/>
  6.     <input type="button" id="btn4" value="选择body中的偶数的div"/>
  8.     <hr/>
  9.     <div id="one">
  10.         <div class="mini">
  11.             111
  12.         </div>
  13.     </div>
  15.     <div id="two">
  16.         <div class="mini">
  17.             222
  18.         </div>
  19.         <div class="mini">
  20.             333
  21.         </div>
  22.     </div>
  24.     <div id="three">
  25.         <div class="mini">
  26.             444
  27.         </div>
  28.         <div class="mini">
  29.             555
  30.         </div>
  31.         <div class="mini">
  32.             666
  33.         </div>
  34.     </div>
  36.     <span id="four">
  38.     </span>
  39. </body>

属性选择器

在这里插入图片描述

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>层级选择器</title>
  5.         <link rel="stylesheet" href="../../css/style.css"  type="text/css"/>
  6.         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  7.         <script>
  8.             $(function(){
  9.                 $("#btn1").click(function(){
  10.                     $("div[id]").css("background-color","pink");
  11.                 });
  12.                 $("#btn2").click(function(){
  13.                     $("div[id='two']").css("background-color","pink");
  14.                 });
  15.             });
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <input type="button" id="btn1" value="选择有id属性的div"/>
  21.         <input type="button" id="btn2" value="选择有id属性的值为two的div"/>
  23.         <hr/>
  24.         <div id="one">
  25.             <div class="mini">
  26.                 111
  27.             </div>
  28.         </div>
  30.         <div id="two">
  31.             <div class="mini">
  32.                 222
  33.             </div>
  34.             <div class="mini">
  35.                 333
  36.             </div>
  37.         </div>
  39.         <div id="three">
  40.             <div class="mini">
  41.                 444
  42.             </div>
  43.             <div class="mini">
  44.                 555
  45.             </div>
  46.             <div class="mini">
  47.                 666
  48.             </div>
  49.         </div>
  51.         <span id="four">
  53.         </span>
  54.     </body>
  55. </html>

表单选择器

在这里插入图片描述

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>表单选择器</title>
  5.         <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
  6.         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
  7.         <script>
  8.             $(function(){
  9.                 $("#btn1").click(function(){
  10.                     $(":input").css("background-color","pink");
  11.                 });
  12.                 $("#btn2").click(function(){
  13.                     $(":text").css("background-color","pink");
  14.                 });
  15.             });
  16.         </script>
  17.     </head>
  18.     <body>
  19.         <input type="button" id="btn1" value="选择所有input元素" />
  20.         <input type="button" id="btn2" value="选择文本框" />
  21.         <br/>
  22.         <form>
  23.             <input type="text " /><br />
  24.             <input type="checkbox" /><br />
  25.             <input type="radio" /><br />
  26.             <input type="image" /><br />
  27.             <input type="file" /><br />
  28.             <input type="submit" />
  29.             <input type="reset" /><br />
  30.             <input type="password" /><br />
  31.             <input type="button" /><br />
  32.             <select><option/></select><br />
  33.             <textarea></textarea><br />
  34.             <button></button>
  35.         </form>
  36.     </body>
  37. </html>

发表评论

表情：
评论列表 （有 0 条评论，303人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery入门

    现在我开始学习前端的js框架jQuery,虽然还要学很多东西,但是我也会坚持下去,万事开头难,坚持就是一种人生态度,在我自学的过程中,发现问题,解决问题.没有什么可以让我放弃,

    忘是亡心i忘是亡心i/ 0 赞/ 45 阅读

    相关 Jquery入门

    Jquery是一个JavaScript库，封装了开发过程中我们常用的功能   在使用Jquery之前，我们需要先拿到Jquery的文件，可以去[Jquery官网][Jque

    - 日理万妓- 日理万妓/ 0 赞/ 255 阅读

    相关 jquery简单过滤器

    一 介绍 简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。例如，匹配找到的第一个元素等。jQuery提供的过滤器下表所示。 <table style="bord

    清疚清疚/ 0 赞/ 281 阅读