1.浅理解Jquery：jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供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)Jquery转DOM对象：

  两种方法：

  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点击文字，文字消失：

  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> //代表引用，前提是要把jquery放到js文件中

     <script type="text/javascript">

         $(document).ready(function(){   //$()代表就是jquery      $(document).ready相当window.onload都是自动加载页面，但他们还是有一点区别的

             $("p").click(function(){    //代表点击p标签是触发该方法

                 $(this).hide();         //this代表该标签本身，hide是 jquery已经封装好的方法，代表文字消失

             });

         });

     </script>

   <body>

       <p>如果你点击我,我会消失</p>

       <p> 点击我  我也会消失 </p>

12  // 这里有一点注意：如果去除$(document).ready(function(){}，但点击时是无法触发click事件的，但是如果把它放到p标签下面它是可以触发的，如下：

 <p> 点击我  我也会消失 </p>  //这样同样可以触发事件，但如果他们调换位置是无法触发的

     $("p").click(function(){

                 $(this).hide();

             });

 //这个的原因我认为，因为放到body里按照顺序执行的，如果你把触发事件放在<p>标签上面，那就是触发事件先执行，但此次连<p>都没有执行到，怎么执行它的监听，而当放在<p>标签下面，但点击p标签就往下执行他的监听

4.$(document).ready和window.onload的区别:

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

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

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

使用 document.onload 会发生覆盖

 <script type="text/javascript">    //两个都会执行

         $(document).ready(function(){

            alert("hello");

         });

         $(document).ready(function(){

            alert("world");

         });

 <script type="text/javascript">    //会发生覆盖：只执行bbbb，不执行aaaa

         window.onload=function(){

           alert("aaaa");

         };

         window.onload=function(){

           alert("bbbb");

         };

     </script>

【jQuery】(1)---初次接触Jquery的更多相关文章

  1. 6月4日 python学习总结 初次接触jQuery

    1. jQuery是什么?是一个轻量级的,兼容多浏览器的JS库(write less, do more) 1. 是一个工具,简单方便的实现一些DOM操作 2. 不用jQuery完全可以,但是不明智. ...

  2. 基础1.初次接触Jquery

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

  3. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  4. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  5. Jquery中的(function($){...})(jQuery)

    当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...

  6. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  7. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. 初次接触json...

    这两天发现很多网站显示图片版块都用了瀑布流模式布局的:随着页面滚动条向下滚动,这种布局还会不断加载数据并附加至当前尾部.身为一个菜鸟级的程序员,而且以后可能会经常与网站打交道,我觉得我还是很有必要去尝 ...

随机推荐

  1. JMeter3.0启动日志报错WARN - org.jmeterplugins.repository.Plugin: Unable to load class解决方法

    解决方法: 通过sh find-in-jars 'HlsSampler' -d /data/apache-jmeter-3.0/lib/ext/确定这个class文件在哪个jar包 由于find-in ...

  2. Linux禁止普通用户su至root

    linux系统为了限制权限,有时候需要禁止普通用户su到root用户 为禁止普通用户su至root,需要分别修改/etc/pam.d/su和/etc/login.defs两个配置文件. 二.详细配置 ...

  3. Unity UGUI实现鼠标拖动图片

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...

  4. MongoDB的ORM框架——Morphia

    1.引入pom <dependency> <groupId>org.mongodb.morphia</groupId> <artifactId>morp ...

  5. SQL Server 分区表上建立ColumnStore Index 如何添加新分区方法与步骤

    在生产环境中会遇到这样的场景,一个表随着时间的推移,越来越大,这个时候我们开始动手为这个表建立分区来改进查询性能. 但是表过大上百个G的时候,在数据仓库中,为了改进查询性能,我们可以添加在分区表的基础 ...

  6. ORM之SQLALchemy

    今天来聊一聊 Python 的 ORM 框架 SQLAlchemy SQLAlchemy 没有 Django 的 Models 好用!因为models是Django自带的ORM框架,也正是因为是Dja ...

  7. nginx.conf 中php-ftp配置

    location ~ .php$ { root /home/www; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_par ...

  8. [CF1093E]Intersection of Permutations

    [CF1093E]Intersection of Permutations 题目大意: 给定两个长度为\(n(n\le2\times10^5)\)的排列\(A,B\).\(m(m\le2\times1 ...

  9. BZOJ5316 : [Jsoi2018]绝地反击

    若$R=0$,那么显然答案为离原点最远的点到原点的距离. 否则若所有点都在原点,那么显然答案为$R$. 否则考虑二分答案$mid$,检查$mid$是否可行. 那么每个点根据对应圆交,可以覆盖圆上的一部 ...

  10. CSS水平垂直居中！

    总结一下,最经典的面试题 分两种情况,宽高确定和不定宽高 (一)宽高确定 初始条件如下: 1. 绝对定位 + 负margin 里面的盒子相对于父盒子绝对定位,距离上面和左边分别为50%,此处的50%是 ...