<!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. Android插件化(三):OpenAtlas的插件重建以及使用时安装

    Android插件化(三):OpenAtlas的插件重建以及使用时安装 转 https://www.300168.com/yidong/show-2778.html    核心提示:在上一篇博客 An ...

  2. 扯扯python的多线程的同步锁 Lock RLock Semaphore Event Condition

    我想大家都知道python的gil限制,记得刚玩python那会,知道了有pypy和Cpython这样的解释器,当时听说是很猛,也就意味肯定是突破了gil的限制,最后经过多方面测试才知道,还是那德行… ...

  3. VC3DGraphicsWindowQt

    VC3DGraphicsWindowQt::VC3DGraphicsWindowQt(QWidget* parent, Qt::WindowFlags f) { osg::DisplaySetting ...

  4. Qt kdChart 甘特图案例

    KDChart  甘特图在Qt中的加载使用案例,代码来自官方 mainwindow.h /******************************************************* ...

  5. Linux MySql状态、启动、停止、重启命令

    1.查看mysql状态 [1]ps -ef|grep mysqld 看看是否有mysqld_safe 和mysqld进程 [root@localhost ~]# ps -ef|grep mysqld ...

  6. Mysql的安全配置向导命令mysql_secure_installation

    mysql_secure_installation安全配置向导 [root@youxi1 ~]# mysql_secure_installation Securing the MySQL server ...

  7. 腾讯ios内部视频，什么垃圾视频

    前几天朋友在网上花钱买了个,腾讯ios内部视频,我也跟着下载了, 看着这列表,我感觉没什么东西,一看就是基础的东西,完全没有实战的内容,就像培训机构骗学生的东西啊,讲些毛理论,结果一到实战了,问个Sc ...

  8. MySQL学习笔记——MySQL5.7的启动过程（一）

    MySQL的启动函数在 sql/main.cc 文件中. main.cc: extern int mysqld_main(int argc, char **argv); int main(int ar ...

  9. 【Leetcode_easy】628. Maximum Product of Three Numbers

    problem 628. Maximum Product of Three Numbers 题意:三个数乘积的最大值: solution1: 如果全是负数,三个负数相乘还是负数,为了让负数最大,那么其 ...

  10. iOS技术面试02：内存管理

    怎么保证多人开发进行内存泄露的检查. 如何定位内存泄露? 1> 使用Analyze进行代码的静态分析(检测有无潜在的内存泄露) 2> 通过leak检查在程序运行过程中有无内存泄露 3> ...