<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>01_初识jQuery</title>

         <!--使用原生DOM-->

         <script type="text/javascript">

             window.onload = function() {

                 var btn1 = document.getElementById('btn1')

                 btn1.onclick = function() {

                     var username = document.getElementById('username').value

                     alert(username)

                 }

             }

         </script>

         //---------------------------------------------------------------------------------------------------------

         <!--使用jQuery实现-->

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

         <script type="text/javascript">

             //绑定文档加载完成的监听

             //写法1

             $(function() {

                 $('#btn2').click(function() {

                     var username = $('#username').val()

                     alert(username)

                 })

             })

             //写法2

             jQuery(function() {

                 var $btn2 = $('#btn2')

                 $btn2.click(function() { // 给btn2绑定点击监听

                     var username = $('#username').val()

                     alert(username)

                 })

             })

             /*

             1. 使用jQuery核心函数: $/jQuery

             2. 使用jQuery核心对象: 执行$()返回的对象

              */

         </script>

     </head>

     <body>

         <!--

         需求: 点击"确定"按钮, 提示输入的值

         -->

         用户名: <input type="text" id="username">

         <button id="btn1">确定(原生版)</button>

         <button id="btn2">确定(jQuery版)</button>

     </body>

 </html>

jQuery_jQuery的基本使用的更多相关文章

  1. Jquery_jquery中attr和prop的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  2. Jquery_JQuery之DataTables强大的表格解决方案

    1.DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk ...

  3. jQuery_jQuery的两把利器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 20Flutter通过TabController定义顶部tab切换，介绍生命周期函数

    基本使用: import 'package:flutter/material.dart'; class TabBarControllerPage extends StatefulWidget { Ta ...

  2. 算法习题---4-5IP网络（Uva1590）

    一:题目 给出m(1到10000之间)个IP地址,求他们最小的网络号和子网掩码 (一)样例输入 3 表示要获取的IP地址个数 194.85.160.177 IP地址 194.85.160.183 19 ...

  3. QML访问C++类内部

    0.前提 C++类需要继承QObject,且有Q_OBJECT宏[所以QT自己的那么多类按道理上QML都是可以直接访问的,nb] 1.QML访问C++中的非private槽函数 可直接调用 信号也是 ...

  4. 【转】Selenium-xpath详解

    1.XPATH是什么 XPATH是一门在XML文档中查找信息的语言,XPATH可用来在XML文档中对元素和属性进行遍历,主流的浏览器都支持XPATH,因为HTML页面在DOM中表示为XHTML文档.X ...

  5. 使用select和show命令查看mysql数据库系统信息

    (1).select 显示当前日期和时间 mysql> select now(); +---------------------+ | now() | +-------------------- ...

  6. oracle数据库死锁原因及分析

    定义: 当两个用户希望持有对方的资源时就会发生死锁. 即两个用户互相等待对方释放资源时,oracle认定为产生了死锁,在这种情况下,将以牺牲一个用户作为代价,另一个用户继续执行,牺牲的用户的事务将回滚 ...

  7. （十一）Centos之帮助命令

    帮助命令man  (manual) 比如我们可以看下man命令的解释 [root@localhost ~]# man man MAN(1)                               ...

  8. 【计算机视觉】OPENCV对于有alpha通道的透明背景图片的读取和图片叠加

    这个是我自己做的粗略的螺旋丸的图,导出为png并带有alpha通道. 最后和一只狗合成成这个样子. 效果还是可以的. 为了实现这个效果,首先我们要明白具有透明通道的图片的OpenCV的读取方式.在Op ...

  9. php5.6安装及php-fpm优化配置

    1,安装依赖包: yum install -y gcc gcc-c++  zlib zlib-devel pcre pcre-devel  gd libjpeg libjpeg-devel libpn ...

  10. 如何写出优美的 C 代码 面向对象的 C

    基础知识 结构体 除了提供基本数据类型外,C 语言还提供给用户自己定制数据类型的能力,那就是结构体,在 C 语言中,你可以用结构体来表示任何实体.结构体正是面向对象语言中的类的概念的雏形,比如: ty ...