<!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. nVidia GPGPU vs AMD Radeon HD Graphics执行模式对比

    大家做高性能计算的朋友,想必对CPU的执行模式已经非常熟悉了吧.当代高级些的CPU一般采用超标量流水线,使得毗邻几条相互独立的指令能够并行执行——这称为指令集并行(ILP,Instruction-Le ...

  2. Redis发生异常WRONGTYPE Operation against a key holding the wrong kind of value

    Redis发生异常WRONGTYPE Operation against a key holding the wrong kind of value Redis发生异常WRONGTYPE Operat ...

  3. 在Springmvc普通类@Autowired注入request为null解决方法

    在Springmvc普通类@Autowired注入request为null解决方法   在类中加入以下注入request对象的代码,运行时发现request为null,注入失败.在@Controlle ...

  4. QML访问C++类内部

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

  5. laravel构建联合查询

    参考:http://laravelacademy.org/post/126.html DB门面可以指定不同的数据库连接(通过connection方法) /** * @param $login_uid ...

  6. 欧姆龙 EntherNet/IP（CIP报文格式）

    Enthip/IP_ CIP报文格式 测试Demo在文章末尾 注册请求帧: 0x65 0x00   注册请求命令 2byte 0x04,0x00   header长度2byte   < 封装头& ...

  7. 一篇搞定Java过滤器

    Filter:过滤器 引言 我们可以通过使用前面的技术,做出一些简单的登陆注册以及配合数据库实现对数据增删改查的Demo,程序是基本运行起来了,但是却存在着一个重大的安全问题,那就登陆权限验证,一般来 ...

  8. [转帖]CentOS 8 都发布了，你还不会用 nftables？

    CentOS 8 都发布了,你还不会用 nftables? https://www.cnblogs.com/ryanyangcs/p/11611730.html 改天学习一下 原文链接:CentOS ...

  9. [转帖]Greenplum: 基于PostgreSQL的分布式数据库内核揭秘(下篇)

    Greenplum: 基于PostgreSQL的分布式数据库内核揭秘(下篇) http://www.postgres.cn/v2/news/viewone/1/454 原作者:姚延栋 创作时间:201 ...

  10. Greenplum 5.21.1 集群安装部署

    简单来说GPDB是一个分布式数据库软件,其可以管理和处理分布在多个不同主机上的海量数据.对于GPDB来说,一个DB实例实际上是由多个独立的PostgreSQL实例组成的,它们分布在不同的物理主机上,协 ...