<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <title></title>

    <script type ="text/javascript">

        console.log($());//输出jq对象

        function gel(id) { return document.getElementById(id)}

        window.onload = function () {

            //为按钮的点击事件绑定一个匿名方法

            //gel("btnChange").onclick = function () {

            //    //1.dom属性之一：字符串类型属性

            //    //gel("divMsg").name

            //    //2.dom属性之二：函数类型属性-只能设置方法给它，如果没有设置默认为null

            //    gel("divMsg").onclick = function () { var a = 0; }

            //    //3.dom属性之三：样式属性，通过样式属性可以调用元素的各种样式项

            //    alert(gel("divMsg").style);

            //}

            gel("btnChange").onclick=function(){

                //点击创建文本框

                var txt = document.createElement("input");

                txt.type = "text";

                //失去焦点

                txt.onblur = function () {//方法里的this：调用的时候，谁点这个方法，方法里的this就是谁

                    var txtValue = this.value;

                    //创建正则表达式

                    var rex = new RegExp(/\d+/);//表示一个或多个

                    if (!rex.test(txtValue))

                    {

                        alert("必须输入数字");

                        this.select();

                    }

                }

                gel("divMsg").appendChild(txt);

            }

        }

    </script>

    <style type ="text/css">

        span {

         border:1px solid #000;

         display:block;/**按块级元素显示*/

        }

    </style>

</head>

<body>

    <!--块级元素:占满一行-->

     <div id="divMsg"></div>

    <!---行级元素；根据内容占用大小---->

    <span ></span>

    <input type ="button"id="btnChange" value ="按钮" />

</body>

</html>

　　

JQ第一篇的更多相关文章

  1. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  2. 从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  3. Python爬虫小白入门（四）PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  4. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  5. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  6. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  7. Android基础学习第一篇—Project目录结构

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  8. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  9. 深入理解javascript对象系列第一篇——初识对象

    × 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...

随机推荐

  1. ubuntu 下安装伪分布式 hadoop

    安装准备: (1)hadoop安装包:hadoop-1.2.1.tar.gz (2)jdk安装包:jdk-7u60-linux-i586.gz (3)要是须要eclipse开发的话 还须要eclips ...

  2. git使用经验

    一直想写一点关于git的文章,但是平时太懒了,没有写,现在写些经验这里,方便以后自己忘记了.

  3. 远程调试weinre的使用

    一.用途 *鉴于在浏览器调试移动端页面无法准确反映移动端实际情况并无法高效调试,故常常使用远程调试工具通过电脑连接手机进行调试,常用远程调试方式: 1.chrome连接安卓机远程调试 2.Mac连接苹 ...

  4. SVG 和字符图标

    制作网站往往需要使用一些图标来提高用户体验,如果我们的是一些扁平化设计的图标,我们可以选择 SVG 或 图标字体来提高用户体验. 下面对这两种技术进行比较. 开发难度: 现在的在线工具非常强大,比如  ...

  5. python面向对象(下)

    继承 继承描述了基类的属性如何"遗传"给派生类.一个子类可以继承它的基类的任何属性,不管是数据属性还是方法.创建子类的语法看起来与普通(新式)类没有区别,一个类名,后跟一个或多个需 ...

  6. JFinal Db + Record模式 - ORM 框架

    // 创建name属性为James,age属性为25的record对象并添加到数据库 Record user = new Record().set("name", "Ja ...

  7. 前端利器，如何使用fiddle拦截在线css进行先下调试

    fiddle的功能相当的强悍,用户也非常广,不过今天我就教大家用fiddle进行前端调试. 首先下载软件fiddle,点击对应的版本下载安装. 安装成功后打开看到右侧的导航栏: 点击AutoRespo ...

  8. MySQL的基本数据类型与数据类型优化

    1.选择优化的数据类型的标准 1)更小的通常更好. 一般情况下,应该尽量使用可以正确存储数据的最小数据类型.更小的数据类型通常更快,因为他们占用更少的磁盘.内存和CPU缓存,并且处理时需要的CPU周期 ...

  9. Leetcode 283 Move Zeroes python

    题目: Given an array nums, write a function to move all 0's to the end of it while maintaining the rel ...

  10. Nginx学习之三-ngx_http_request_t结构体

    ngx_http_request_s是nginx中非常重要的一个结构体,贯穿于htpp请求处理的整个过程中. 下面解释了ngx_http_request_s结构体中与HTTP框架相关的重要的成员变量. ...