1、jQuery基础

Jquery它是一个库(框架)，要想使用它，必须先引入！

jquery-1.8.3.js：一般用于学习阶段。

jquery-1.8.3.min.js：用于项目使用阶段

官网下载后，复制到当前WEB项目的js文件夹下，如下：

引入代码：<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>

2、JS和JQ页面加载的区别

传统的JavaScript页面加载函数是最后一个生效，它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】

jQuery的页面加载函数可以存在多个(不会发生覆盖)，它会按照顺序进行执行。【dom数加载完成】

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>JS与JQ页面加载的区别</title>

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

         <script>

             window.onload=function(){

                 alert("张三");

             }

             //传统的页面加载会存在覆盖问题，加载比JQ慢（整个页面加载完毕（包括里面的其他内容，比如图片））

             window.onload=function(){

                 alert("李四");

             }

             //JQ的加载比JS加载要快！（当整个dom树结构绘制完毕就会加载）

             jQuery(document).ready(function(){

                 alert("王五");

             });

             //JQ不存在覆盖问题，加载的时候是顺序执行

             $(document).ready(function(){

                 alert("苏牧")

             });

             //简写方式

             $(function(){

                 alert("汾九");

             });

         </script>

     </head>

     <body>

     </body>

 </html>

3、JS和JQ方式获取的区别

JS:document.getElementById();

JQ:$(“#id”);

案例事先要创建一个名为“惊喜”的HTML文件，并放在同一个文件夹下。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>JS和JQ获取的区别</title>

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

         <script>

             $(function(){

                 //1.JS方式获取

                 /*document.getElementById("btn").onclick=function(){

                     location.href="惊喜.html"

                 }*/

                 //2.JQ方式获取

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

                     location.href="惊喜.html"

                 });

             });

         </script>

     </head>

     <body>

         <input type="button" value="点我有惊喜！" id="btn" />

     </body>

 </html>

4、DOM对象和JQuery对象的转换

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>DOM对象与Jquery对象转换</title>

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

         <script>

             function write1(){

                 //1.JS的DOM操作，DOM对象无法操作JQ对象里面的属性和方法

                 document.getElementById("span1").innerHTML="萌萌哒！";

                 //document.getElementById("span1").html("萌萌哒！");

                 var spanEle=document.getElementById("span1");

                 //5.将DOM对象转换成JQuery对象

                 $(spanEle).html("胖胖哒！");

             }

             $(function(){

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

                     //2.JQ的JQuery操作，JQ对象无法操作JS里面的属性和方法！！！

                     //$("#span1").innerHTML="呵呵哒！"

                     $("#span1").html("呵呵哒！");

                     //3.JQuery对象向DOM对象转换方式一

                     $("#span1").get(0).innerHTML="美美哒！";

                     //4.JQuery对象向DOM对象转换方式二

                     $("#span1")[0].innerHTML="棒棒哒！";

                 });

             });

         </script>

     </head>

     <body>

         <input type="button" value="JS写入" onclick="write1()"/>

         <input type="button" value="JQ写入" id="btn"/><br />

         男神：<span id="span1">你好帅!</span>

     </body>

 </html>

注意：JQ对象只能操作JQ里面的属性和方法

　JS对象只能操作JS里面的属性和方法。

jQuery学习(一)——jQuery入门的更多相关文章

  1. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  2. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  3. JQuery学习笔记---jquery对象和DOM对象的关系

    1.DOM(Document  Object Model,文档对象模型).DOM树 { html (head&&body),  head(meta && title) ...

  4. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  5. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  6. jQuery学习之jQuery Ajax用法详解（转）

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  7. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. 【转载】【JQuery学习】jQuery插件开发

    JQuery做得最好的就是他的闭包和扩展性.超级简单的扩展方法,让更多的人可以轻松的开发定制自己的jQuery插件.下面的东西是转载过来当做学习材料的.虽然貌似有点古老,但是jQuery的变更一直都不 ...

  9. jQuery学习笔记——jQuery常规选择器

    一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

随机推荐

  1. dell台式机设置U盘启动步骤

    在开机启动看见DELL的标志后,连续按F12键进入BIOS界面,然后按照界面进行操作,操做完成后保存退出,然后再按F12键选择U盘启动. 注意硬盘模式需要选择为disabled.

  2. Spring《一》

    1.支持的注入方式 构建注入,set注入 2.bean属性 id.name.class.singleton(true.false).depends-on="date"(初始化依赖) ...

  3. Linux top命令简解

    简介: top 命令是最流行的性能监视工具之一,它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处. top 界面分为两个部份,光标上面部份显示关于系统 ...

  4. struts2学习之基础笔记1

    第6章 Strusts 2框架 1  引出 Web App  àà MVC  àà View 视图(jsp,html,JS) | C(Servlet)Filter,Listneer | M(数据bea ...

  5. 【原创】spring中的事务传播特性

    关于spring的传播特性,我对其进行了详细的叙述了下: PROPAGATION_REQUIRED--支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择. 比如方法A调用方法B,如果方法 ...

  6. 第一次接触Arduino

    1.百度百科: Arduino包含两个主要的部分:硬件部分是可以用来做电路连接的Arduino电路板:另外一个则是 Arduino IDE,你的计算机中的程序开发环境.你只要在IDE中编写程序代码,将 ...

  7. 关于表格元素的使用，table、<width>、<heigh>、<border>、<tr>、<th>、<td>、<align>、<colspan>、<rowspan>

    <html>    <head>        <meta charset="UTF-8">        <title>个人简历& ...

  8. hdu 1072 广搜（逃离爆炸迷宫）

    题意: 在n×m的地图上,0表示墙,1表示空地,2表示人,3表示目的地,4表示有定时炸弹重启器.定时炸弹的时间是6,人走一步所需要的时间是1.每次可以上.下.左.右移动一格.当人走到4时如果炸弹的时间 ...

  9. CentOS7上安装google谷歌浏览器

      1.首先进入根目录,然后进入etc/yum.repos.d目录下,创建google-chrome.repo文件 cd / cd etc/yum.repos.d vim google-chrome. ...

  10. Day 01 计算机编程基础

    1.编程语言是什么? 编程语言是人与计算机交流的介质 2.什么是编程? 用编程语言写出一个个文件,这堆文件会达到一个目的 3.编程有什么用? 让计算机帮助我们干活,从而解放人类劳动力 4.计算机组成原 ...