juqery初入门

2020-07-07  本文已影响0人  与诗小睡

  1. 处罚:

    1. 张邵阳

  2. jquery:

    1. js学习和使用都比较难

  3. jQuery简介:

    1. 是一个快速、简洁的JavaScript库.
    2. 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
    3. 封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

  4. 官网: https://jquery.com/

    1. 压缩版本:. min.js -- 生产环境中
    2. 未压缩版: .js -- 开发环境

  5. 外部js的引入:

    1.  <!-- 引入alert.js-->
    <script src="./js/alert.js"></script>

  6. 如何使用jquery:,jquery放入项目中

    1. <!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
    <!-- 引入jquery-->
    <script src="js/jquery-3.0.0.js"></script>
  </head>
  <body>
  </body>
</html>


    2. <script>
       
     /*   页面加载完毕后执行  js
     window.onload = function () {
         alert(123);
       } */
      
      
      /* jquery  $(dom对象) 页面加载完毕后执行 */
      /* $(document).ready=function (){
        alert(123);
      } */
      
      /* 页面加载完毕后执行*/
      $(function () {
        alert(123);
      });
      
      
      
    </script>

  7. jquery选择器:数组

    1. id

      1. var in1 = $("#in1");//in1:jquery对象
        alert(in1.val());//获取元素的value 属性 dom.value

    2. jquery/dom对象的互转:

      1.    alert("dom方式:"+in1[0].value);//juqery转成dom 对象
         alert("jquery:"+$(in1[0]).val());//dom对象转为jquery

    3. 标签选择器:/循环

      1.  var ins= $("input");//数组

      2. 循环方式:

        1. for(var i = 0; i<ins.length;i++) {
           alert(ins[i].value);//[]:jquery转为dom
        } 

        2.  /*i:下标:代表当前操作的是第几个元素
         n:具体元素的dom对象不是jquery对象
        */
        ins.each(function(i,n){
          alert($(n).val());
        })

    4. 类选择器:

      1.  /* 类选择器*/
       var a =  $(".three");//jquery
       alert(a.html());//获取html内容
       a.html("jquery修改为two");//修改

    5. 通用选择器:

      1.  /* * 通用选择器*/
        var  ops = $("*");
        
        ops.each(function (i,n){
          
          //将dom对象转为jquery对象
          console.log($(n).html());
          
          
        });

    6. 并集选择器:

      1.  /* 
        并集选择器
        选择 类名为 one 或是two或是id为afour的元素
        */
        var ops = $(".one,.two,#afour");
        console.log(ops);
        ops.each(function(i,n) {
          alert($(n).html());
        });

    7. 案例:

      1. 点击按钮隐藏div

        1. 引入jquery

        2. 绑定事件

        3. <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style>
      
      div {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        background-color: yellow;
      }
      
      
    </style>
    
    <!-- 导入jquery -->
    <script src="js/jquery-3.0.0.js"></script>
    </head>
    <body>
    
    <div id="dv"></div>
    
    <button id="btn">点击隐藏</button>
    <button id="btn1">点击显示</button>
     <button id="btn2">显示/隐藏切换</button>
    <script>
      
      // 页面加载完毕后执行
      $(function () {
        
        /* var btn = document.getElementById("btn");
        btn.onclick = function () */
        /* jquery绑定事件 隐藏div*/
        $("#btn").click(function () {
          //this:dom $(this):jquery对象
            //console.log($(this));
            $("#dv").hide();//隐藏
        });
        
       /* 
       点击显示div
       
       */
       $("#btn1").click(function () {
         $("#dv").show();//显示
       });
        
        
        /* 
        
         切换div的隐藏或是显示
        */
        $("#btn2").click(function () {
          
          $("#dv").toggle();//切换
          
        });
        
        
      });
      
      
      
      
      
    </script>
    
    
    </body>
</html>

    8. 案例: 菜单的显示或是隐藏:

      1. <!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
    
    <!-- 1.引入jquery-->
    <script src="js/jquery-3.0.0.js"></script>
    
    
   </head>
   <body>
    
    <div>
      <!-- 绑定事件-->
       <span onclick="showCity(this)">湖北</span>
       <ul id="hbul">
         <li>襄阳</li>
         <li>宜昌</li>
         <li>荆门</li>
       </ul>
      
    </div>
    <div>
      <!-- 绑定事件-->
      <span onclick="showCity(this)">河南</span>
      <ul id="hnul">
        <li>南阳</li>
        <li>郑州</li>
        <li>开封</li>
        <li>信阳</li>
      </ul>
    </div>
    <div></div>
    <script>
      
      /* 
       需求:
       1. 一开始只能显示省份 市要隐藏 --hide(),
       2. 当点击省的时候显示该省下的市区 -- show()
       
      */
      
      //1.页面加载完毕后所有的市区全部隐藏
         $(function(){
           $("#hbul").hide();
           $("#hnul").hide();
           
         });
      
      
      //点击省后显示该省下的市区
      function showCity(el) {
        //将所有的省的市区全部隐藏 ul
        $("ul").hide();//隐藏所有的ul
        //1.获取到ul
        var ul = el.nextElementSibling;//dom
        $(ul).show()//显示市区
      }
      
      
      
    </script>
    
    
    
    
    
   </body>
</html>

​

​

​

上一篇下一篇

猜你喜欢

热点阅读