HTML表单的输入控件主要有以下几种：

  • 文本框，对应的<input type="text">，用于输入文本；

  • 口令框，对应的<input type="password">，用于输入口令；

  • 单选框，对应的<input type="radio">，用于选择一项；

  • 复选框，对应的<input type="checkbox">，用于选择多项；

  • 下拉框，对应的<select>，用于选择一项；

  • 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器

===================

如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值。这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>

// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>

var mon = document.getElementById('monday');

var tue = document.getElementById('tuesday');

mon.value; // '1'

tue.value; // '2'

mon.checked; // true或者false

tue.checked; // true或者false

================

没有name属性的<input>的数据不会被提交

<!-- HTML -->

<form id="test-form" onsubmit="return checkForm()">

    <input type="text" name="test">

    <button type="submit">Submit</button>

</form>

<script>

function checkForm() {

    var form = document.getElementById('test-form');

    // 可以在此修改form的input...

    // 继续下一步:

    return true;

}

</script>

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

===================

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径

由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用第三方插件来实现，如Flash这样的

===============

JavaScript的一个重要的特性就是单线程执行模式

================

AJAX不是JavaScript的规范，是用JavaScript执行异步网络请求。

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象

function success(text) {

    var textarea = document.getElementById('test-response-text');

    textarea.value = text;

}

function fail(code) {

    var textarea = document.getElementById('test-response-text');

    textarea.value = 'Error code: ' + code;

}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调

    if (request.readyState === ) { // 成功完成

        // 判断响应结果:

        if (request.status === ) {

            // 成功，通过responseText拿到响应的文本:

            return success(request.responseText);

        } else {

            // 失败，根据响应码判断失败原因:

            return fail(request.status);

        }

    } else {

        // HTTP请求还在继续...

    }

}

// 发送请求:

request.open('GET', '/api/categories');  //URL使用的是相对路径,默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。

request.send();

alert('请求已发送，请等待响应...');

当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应

用Promise也可以实现异步调用

==============

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等

======================

jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情：

  • 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；

  • 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；

  • 轻松实现动画、修改CSS等各种操作。

jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！

jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名

====================

使用jQuery只需要在页面的<head>引入jQuery文件即可：

<html>

<head>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

    ...

</head>

==================

jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。

jQuery对象和DOM对象之间可以互相转化：

var div = $('#abc'); // jQuery对象

var divDom = div.get(); // 假设存在div，获取第1个DOM元素

var another = $(divDom); // 重新把DOM包装为jQuery对象

====================

按tag查找:var ps = $('p'); // 返回所有<p>节点

按class查找注意在class名称前加一个.：

var a = $('.red'); // 所有节点包含`class="red"`都将返回

// 例如:

// <div class="red">...</div>

// <p class="green red">...</p>

查找同时包含red和green的节点：

var a = $('.red.green'); // 注意没有空格！

// 符合条件的节点：

// <div class="red green">...</div>

// <div class="blue green red">...</div>

按属性查找

var email = $('[name=email]'); // 找出<??? name="email">【属性查找】

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM【前缀查找或者后缀查找】
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM

var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>【组合查找】
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来【多项选择器】

JavaScript 廖2的更多相关文章

  1. JavaScript 廖

    =============== JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中 ======注释 // 以双斜杠开头直到行末 ...

  2. 廖老师JavaScript教程高阶函数-sort用法

    先来学习一个新词:高阶函数 高阶函数英文叫Higher-order function.那么什么是高阶函数? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那 ...

  3. 廖雪峰JavaScript学习摘录

    一. 1.语法基础: (1)特别注意相等运算符==.JavaScript在设计时,有两种比较运算符: 第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果: 第二种是===比较 ...

  4. 廖雪峰 JavaScript 学习笔记（函数）

    JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函 ...

  5. 廖雪峰 JavaScript 学习笔记(判断、循环)

    条件判断  固定格式:if () { ... } else { ... } ,else可选 1.多行条件判断,通常把else if连写在一起,来增加可读性 例子: var age = 3; if (a ...

  6. 廖雪峰JavaScript学习笔记（基础及数据类型、变量）

    先睹为快 alert('我要学JavaScript!'); Run: 基本语法: 1.每个语句以;结束,不强制 2.语句块用{...} 3.//单行注释,/*...*/ 多行注释 数据类型: 1.不区 ...

  7. 廖雪峰JavaScript练习题3

    请尝试写一个验证Email地址的正则表达式.版本一应该可以验证出类似的Email: 正则表达式: <!DOCTYPE html> <html> <head> < ...

  8. 廖雪峰JavaScript练习题2

    请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...

  9. 廖雪峰JavaScript练习题

    练习:不要使用JavaScript内置的parseInt()函 数,利用map和reduce操作实现一个string2int()函数: <!DOCTYPE html> <html&g ...

随机推荐

  1. 使用派生镜像(qcow2)

    当创建的虚拟机越来越多,并且你发现好多虚拟机都是同一个操作系统,它们的区别就是安装的软件不大一样,那么你肯定会希望把他们公共的部分提取出来,只保存那些与公共部分不同的东西,这样镜像大小下去了,空间变多 ...

  2. Redis搭建Windows平台

    安装程序下载 从官网下载安装程序. https://redis.io/download https://github.com/MicrosoftArchive/redis/releases 新地址:h ...

  3. python爬虫-豆瓣电影的尝试

    一.背景介绍 1. 使用工具 Pycharm 2. 安装的第三方库 requests.BeautifulSoup 2.1 如何安装第三方库 File => Settings => Proj ...

  4. Springmvc在项目启动时查询数据库并初始化静态变量

    private static List<ResourceEntity> resourceList = null; //初始化的全局静态变量 @Autowired private Resou ...

  5. 构建工具-Gulp 相关知识

    layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...

  6. 从零开始学Flask框架-004

    Flask-Moment pip install flask-moment 除了moment.js,Flask-Moment 还依赖jquery.js.但是Bootstrap 已经引入了jquery. ...

  7. Java中final与C++中const的关系

    Java中的final有三种主要用法: (1)修饰变量: final变量是不可改变的,但它的值可以在运行时刻初始化,也可以在编译时刻初始化,甚至可以放在构造函数中初始化,而不必在声明的时候初始化,所以 ...

  8. C++ new/delete详解及原理

    学了冯诺依曼体系结构,我们知道: 硬件决定软件行为,数据都是围绕内存流动的. 可想而知,内存是多么重要.当然,我们这里说的内存是虚拟内存(详情看Linxu壹之型). 1.C/C++内存布局 2.C语言 ...

  9. （转）FFmpeg架构之I/O模块分析

    注意:这篇转载的文章比较早,写得很清晰,但是新版的ffmpeg的很多数据结构的名字已经改了.因此只能作参考.(例如ByteIOContext已经改名为AVIOContext) 1概述 ffmpeg项目 ...

  10. centos 7 配置pytorch运行环境

    华为云服务器,4核心8G内存,没有显卡,性能算凑合,赶上双11才不到1000,性价比还可以,打算配置一套训练densenet的环境. 首先自带的python版本是2.7,由于明年开始就不再维护了,所以 ...