zoukankan      html  css  js  c++  java
  • JavaScript 廖2

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

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

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

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

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

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

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

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

     如果我们获得了一个<input>节点的引用,就可以直接调用value获得对应的用户输入值。这种方式可以应用于textpasswordhidden以及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-datamethod必须指定为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 === 4) { // 成功完成
            // 判断响应结果:
            if (request.status === 200) {
                // 成功,通过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(0); // 假设存在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>

    查找同时包含redgreen的节点:

    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">都选出来【多项选择器】

     ==============添加链接

    ===========

    当form标签没有action属性时,表单的POST将会定向到当前URL

     ===========form的action里放的是url

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

  • 相关阅读:
    DB2数据常用指令
    HTMLParser使用
    面试知识点总结之数据库
    面试知识点总结之算法
    面试知识点总结之操作系统
    面试知识点总结之计算机网络
    面试知识点总结之Java语言
    一个精确匹配的问题
    【转】矩阵求导,矩阵计算
    【转】用C语言扩展Python的功能
  • 原文地址:https://www.cnblogs.com/testzcy/p/11395647.html
Copyright © 2011-2022 走看看