jQuery是JavaScript库中的优秀一员。

下载完jQuery框架文件jquery-1.9.0.js 后，不需要任何安装，仅需使用<script>文件导入标记，将该框架文件导入页面中即可。假设该文件保存在项目文件夹WebContent的子文件js中，那么，在页面的<head></head>中加入如下代码：

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

即可。

下面给出一个简单的jQuery程序。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Insert title here</title>

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

        <script type="text/javascript"> //以下三者基本等价，第二个最常用

            $(document).ready(function(){ //jQuery的写法

                //程序段   alert("hello ");

            })

            $(function(){ //jQuery的写法

                //程序段

            })

            window.onload=function(){ //JavaScript的写法

                //程序段

            }

        </script>

    </head>

    <body>

    </body>

</html>

前两个在页面框架下载完毕后就执行，而第三个必须在页面全部加载完毕后才能执行。

 

jQuery访问DOM对象（Document Object Model）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Insert title here</title>

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

        <script type="text/javascript">

            $(function(){

                var divTmp=document.getElementById("divTmp").innerHTML;//获取DOM对象中的内容

                var divTmp2=$("#divTmp").html();//获取jQuery对象中的内容      二者结果等价

            })

        </script>

    </head>

    <body>

        <div class="divFrame">

            <div id="divTmp">测试文本</div>

        </div>

    </body>

</html>

即，jQuery通过 $(“#id”) 获得相应对象。

对于获取对象中的内容或文本框的值等，JavaScript和jQuery采用的方法分别如下：

JavaScript：   var divTmp=document.getElementById("divTmp").innerHTML;

               document.getElementById("divTip").innerHTML="hello";

               var oTxtValue=document.getElementById("Text1").value;
jQuery：       var divTmp2=$("#divTmp").html();  //获取页面内容

               $("#divTip").html("hello");      //给页面赋予内容

               var oTxtValue2=$("#Text1").val();
               $("#id").val("world");

 

对于click函数，JavaScript和jQuery采用的方法分别如下：

JavaScript的方法：

<head>

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

    <script type="text/javascript">

        function btnClick(){

            //程序段

        }

    </script>

</head>

<body>

    <input type="button" value="提交" onclick="btnClick();"/>

</body>
jQuery的方法：

<head>

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

    <script type="text/javascript">

        $(function(){

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

                //程序段

            })

        })

    </script>

</head>

<body>

    <input type="button" value="提交" id="btnSubmit"/>

</body>

jQuery开发入门的更多相关文章

  1. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  2. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  3. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  4. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  5. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  6. 第一百九十一节，jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  7. PHP Web开发入门流程

    在学习WEB开发前,至少有一个对C或者计算机编程任何一种语言的基本学习,这会对你以后的开发有一定的启蒙作用. 一.Web开发入门 推荐学习网址: http://www.w3school.com.cn/ ...

  8. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  9. openresty 前端开发入门五之Mysql篇

    openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...

随机推荐

  1. wp8页面导向

    一般打开的是MainPage.xaml需要打开另一个页面的时候,用NavigationService.Navigate(uri);当然uri要配置是相对路径还是绝对路径Uri uri = new Ur ...

  2. iOS使用AVCaptureSession自定义相机

    关于iOS调用摄像机来获取照片,通常我们都会调用UIImagePickerController来调用系统提供的相机来拍照,这个控件非常好 用.但是有时UIImagePickerController控件 ...

  3. error: memcached support requires ZLIB. Use --with-zlib-dir=<DIR> to specify the prefix where ZLIB

    yum install zlib-devel

  4. 修改PHP session 默认时间方法

    修改三行如下: 1.session.use_cookies把这个的值设置为1,利用cookie来传递sessionid 2.session.cookie_lifetime这个代表SessionID在客 ...

  5. 【Mac安装,ATX基于uiautomator2】之安装步骤

    Mac系统下安装uiaotumator2: 参考网址:<uiautomator2>以及参考github官方文档 注意:下面有坑,如果你没有下面的问题请直接跳转到 1.安装uiaotumat ...

  6. 搭建RocketMQ踩的坑-内存不足

    环境是vmvare+ubuntu 1.http://rocketmq.apache.org/docs/quick-start/ 按照官网来启动mqnamesrv和mqbroker报错 错误如下 The ...

  7. javascript对象定义

    转载自:http://blog.sina.com.cn/s/blog_75a8cfac0100pif0.html javascript定义对象写法 javascript定义对象的几种简单方法 1.构造 ...

  8. 阿里云里Centos 7 PHP7环境配置 LNMP

    首先更新系统软件</str> $ yum update 安装nginx</str></str> 1.安装nginx源 $ yum localinstall http ...

  9. iOS 数组的去重(普通的无序的去重和排序好的去重)

    本文转载至 http://blog.csdn.net/zhaopenghhhhhh/article/details/24972645 有时需要将NSArray中去除重复的元素,而存在NSArray中的 ...

  10. Python类基础知识(面向对象基础)

    #首先 我们需要了解 面向过程是什么 面向对象是什么 我们为什么需要使用面向对象 面向过程:根据业务逻辑从上到下写垒代码 面向对象:根据代码对函数进行分类和封装 区别:解决问题的逻辑不同,但是都能解决 ...