<!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. MySQL查询获取行号rownum

    MySQL中可以使用变量产生行号,下面是2个简单例子: 使用工具:MySQL Workbench 说明:表heyf_10中字段,empid(员工工号).deptid(部门编号).salary(薪资): ...

  2. vue开发环境、正式环境的配置及原理

    修改prod.env.js里的内容,修改后的内容如下: 'use strict' module.exports = { NODE_ENV: '"production"', EVN_ ...

  3. apk增加系统签名的方法

    1.命令行方法给apk加系统签名在Linux环境:java -Djava.library.path=. -jar signapk.jar platform.x509.pem platform.pk8 ...

  4. Android 摇一摇监听实现

    package com.loaderman.androiddemo; import android.content.Context; import android.hardware.Sensor; i ...

  5. 持续集成和部署工具GOCD

    如果大家使用过Jenkins那么相信大家对于持续集成非常熟悉.今天要给大家介绍的是另一个非常强大的CD工具GoCD官方对其也称之为GO但是要明白他和go语言golang是没有多大关系的,他是使用jav ...

  6. Elasticsearch .net 记录-1

    简介 ElasticSearch是一个开源的分布式搜索引擎,具备高可靠性,支持非常多的企业级搜索用例.像Solr4一样,是基于Lucene构建的.支持时间时间索引和全文检索.官网:http://www ...

  7. word 2010中设置默认粘贴为 只保留文本粘贴【visio也适用于快捷键方式】

    VISIO也适用如下方式: 3. 当然也可以直接是 Ctrl + Alt + V打开选择性粘贴选项卡 来选择其中某项来粘贴也是可以的 转: word 2010中设置默认粘贴为 只保留文本粘贴 2012 ...

  8. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_11-SpringSecurityOauth2研究-JWT研究-JWT介绍

    3.6 JWT研究 3.6.1 JWT介绍 在介绍JWT之前先看一下传统校验令牌的方法,如下图: 问题: 传统授权方法的问题是用户每次请求资源服务,资源服务都需要携带令牌访问认证服务去校验令牌的合法性 ...

  9. topcoder srm 633 div1

    problem1 link 如果两个循环之内可以跳完,那么我们只要让这些步数之内的数字组成两个数字$p,q,p\leq q$,使得$p,q,x$组成三角形即可($p+q\geq x,p+x\geq q ...

  10. PAT 甲级 1044 Shopping in Mars (25 分)（滑动窗口,尺取法,也可二分）

    1044 Shopping in Mars (25 分)   Shopping in Mars is quite a different experience. The Mars people pay ...