<!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. osg 场景漫游

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include <osg/Group> #include <os ...

  2. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_17-认证接口开发-申请令牌测试

    远程 调用Spring Security来申请令牌,然后把申请到令牌存储到redis里面 cookieMaxAge: ‐1   -1表示浏览器一关闭cookie就失效. 测试远程申请令牌 TestCl ...

  3. java设置北京时间的时区

    java设置北京时间的时区   解决方法: 设置北京时间的时区,消除时间差. TimeZone timeZone = TimeZone.getTimeZone("GMT+8"); ...

  4. linux简单命令1

    1:-rw-r--r-- 第一位"-"表示文件类型("-"文件,"d"表示目录,"|"软连接,相当win7的快捷方式) ...

  5. springboot配置虚拟路径访问用户上传的附件及图片资源

    在springmvc项目中,我们通常把图片及附件存放到WEB-INF/upload类似的路径. springboot项目是通过jar包方式运行的. 笔者曾尝试以下代码,把图片转成base64格式的图片 ...

  6. 第十九章 动态URL权限控制——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 用过Spring Security的朋友应该比较熟悉对URL进行全局的权限控制,即访问URL时进行权限匹配:如果没有权限直接跳到相应的错误页面.Shiro也支持类似的机 ...

  7. Linux配置代理IP

    Linux配置代理IP: vim /etc/profile http_proxy=http://username:password@ip:port/ https_proxy=http://userna ...

  8. 【web 安全测试Tools】BurpSuite 1.7.32及注册机【无后门版】

    BurpSuite 1.7.32 原版+注册机 下载 链接:https://pan.baidu.com/s/1LFpXn2ulTLlcYZHG5jEjyw 密码:mie3 注意无后门版文件完整性: b ...

  9. laravel 小知识点

    分块导出brokerageCharge = DB::table('表名')$brokerageCharge = $brokerageCharge->chunk(100,function($bro ...

  10. 是什么在阻止我们学习unity2019？

    背景 时过境迁,这是一篇老文,写于2019年5月. 在学习最新的unity ecs过程中,以及学习最新的effect 时,在迈出第一步的时候即遭遇一些困难(学习和测试环境搭建不起来,有时候真的很无语) ...