zoukankan      html  css  js  c++  java
  • 【jQuery】(1)---初次接触Jquery

    1.浅理解Jquery:jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documentsevents、实现动画效果,并且方便地为网站提供AJAX交互。

    2.DOM对象和Jquery对象之前的转换

      A)DOM转为Jquery对象:

       很简单:

           var usernameElement =document.getElementById("username");

           var  $usernameElement=$(usernameElement);  //只要加上$(),DOM对象放进来就是,同时为了方便调用是什么对象,在变量名前也加$这样好区分

       alert($usernameElement.val());                 //既然已经转为Jquery对象,那么取对象的value值也不是之前的点value而是已经封装好的方法.val()来获取value

      B)JqueryDOM对象:

      两种方法:

       a

          //(1)Jquery对象是一个数组   可以通过下标[index]方法  来获相应的dom对象

          var $username=$("#username"); //获得jquery对象

          //转换为dom对象  根据下标取值即可

           var usernameEle =$username[0]; //转为dom对象

          alert(usernameEle.value);

      b

          //(2)Jquery本身提供  .get(index) 方法获取相应的dom对象

          var $username=$("#username");                 //jquery对象

         var usernameElement2=$username.get(0);   //dom对象

          alert(usernameElement2.value);

    3.小案例:如何引用jquery点击文字,文字消失:

     1  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> //代表引用,前提是要把jquery放到js文件中
     2     <script type="text/javascript">
     3         $(document).ready(function(){   //$()代表就是jquery      $(document).ready相当window.onload都是自动加载页面,但他们还是有一点区别的
     4             $("p").click(function(){    //代表点击p标签是触发该方法
     5                 $(this).hide();         //this代表该标签本身,hide是 jquery已经封装好的方法,代表文字消失
     6             });
     7         });    
     8     </script> 
     9   <body>         
    10       <p>如果你点击我,我会消失</p>    
    11       <p> 点击我  我也会消失 </p>
    12  // 这里有一点注意:如果去除$(document).ready(function(){},但点击时是无法触发click事件的,但是如果把它放到p标签下面它是可以触发的,如下:
    13 <p> 点击我  我也会消失 </p>  //这样同样可以触发事件,但如果他们调换位置是无法触发的
    14     $("p").click(function(){  
    15                 $(this).hide();   
    16             });
    17 //这个的原因我认为,因为放到body里按照顺序执行的,如果你把触发事件放在<p>标签上面,那就是触发事件先执行,但此次连<p>都没有执行到,怎么执行它的监听,而当放在<p>标签下面,但点击p标签就往下执行他的监听
    

    4.$(document).readywindow.onload的区别:

    首先他们都是自动加载页面,但他们在功能在有一点区别:

      $(document).ready 等价于document.onload  但是 不是完全等价的  有所区别

         不同点是 使用 $(document).ready  内容都会执行 不会发生覆盖

         使用 document.onload 会发生覆盖

     1 <script type="text/javascript">    //两个都会执行
     2         $(document).ready(function(){
     3            alert("hello");      
     4         });
     5         $(document).ready(function(){
     6            alert("world");     
     7         });   
     8 <script type="text/javascript">    //会发生覆盖:只执行bbbb,不执行aaaa
     9         window.onload=function(){
    10           alert("aaaa");
    11         };
    12         window.onload=function(){
    13           alert("bbbb");
    14         };    
    15     </script>
  • 相关阅读:
    使用vs code开发.net core2.2时OmniSharp.MSBuild.ProjectLoader无法解析"xxx"的解决方法
    An unexpected exception occurred while binding a dynamic operation 错误的一种情况
    node excel export包导致find函数被覆盖
    C#字典Dictionay多线程读是否是安全的
    mongodb数据分组按字符串split
    IIS做反向代理重定向到NodeJS服务器
    .net core 时间戳unix与本地时间互转、获取当前时间戳
    使用Postman调试asp.net core 控制器的action
    监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
    vue、element-ui开发技巧
  • 原文地址:https://www.cnblogs.com/qdhxhz/p/6253757.html
Copyright © 2011-2022 走看看