【1】

前端学习纲要：

♦ 第一阶段：

web-project 的命名规范与文件的组织规范；

HTML 的基本元素 --> 例如 h p ui ol li .. img 等 --> HTML 元素的属性；

CSS 属性与值 --> 各种选择器 --> 盒子模型 --> inline 和 block 的区别（CSS 本质上是 HTML 元素的一个属性）;

JS --> 用于完善网页的动态与逻辑 --> 动态创建元素更改 CSS属性等 --> DOM --> 学会查看相关API --> Window 方法、属性；

♦ 第二阶段：

HTML --> 学会用 span 与 div 封装内容 --> 了解 HTML 中的转义字符 --> 掌握超链接相关内容，例如图片超链接，链接到文档的特定部分，链接的选取等链接的最佳实践 --> 了解 URL 路径，例如如何转到父目录等；

JS --> 了解何为 strict 模式 --> JS 变量的作用域、JS 的符号不严格，例如 ; 与 " ' 等（JavaScript 引擎具有行末自动添加分号的机制） --> JS 中字符串相关的内容，例如用 ${} 取变量值、length、字符串不可变、一些操作字符串的方法等 --> 数组相关的操作！ --> JS 对象的 in delete 操作及其继承关系 --> For 语句最常用于遍历数组 --> 定义 JS 函数的两种等价形式 --> JS 减少命名冲突常常采用 “名字空间” 封装自定义变量 --> 处理 JSON 数据 --> JS 的面向对象 --> 利用 httpOnly 防止 cookie 泄露 --> 操作DOM --> AJAX --> 跨域相关的问题 --> jQuery；

【2】

jQuery 参考 --> 选择器 & 操作 DOM & 事件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Basic table</title>

    <style>

        td {

            border: 1px solid #999;

            padding: 0.1em 1em;

        }

        .red {

            color: blue;

        }

    </style>

</head>

<body>

    <table class="simple-table" id="my-table">

        <tr id="row-one">

            <td>Cats</td>

            <td>Dogs</td>

            <td>Lemurs</td>

        </tr>

        <tr class="a b c">

            <td class="wide-animal">Tiger</td>

            <td>Grey Wolf</td>

            <td>Indri</td>

        </tr>

    </table>

    <script src="scripts\jquery-3.2.1.min.js"></script>

    <script>

        var v1 = $('#row-one'); // query by id, v1 is a jQuery object

        var v2 = v1.get(0); // v2 is a DOM object

        var v3 = $(v2); // v3 is a jQuery object

        var v4 = $('td'); // query by tag name

        var v5 = $('.simple-table'); // query by class name

        var v6 = $('.a.b.c'); // query elements that contain a b c at the same time

        // ... query by properties

        var v7 = $('td.wide-animal'); // query by tag-name and class-name

        // ... Omitted n methods

        // console.log(v7);

        // Special selectors, such as $ ('input [type = radio]: checked')..

        // get text and html

        var v8 = $('#my-table tr td[class=wide-animal]');

        console.log(v8.html() + ' ' + v8.text());

        // set text and html

        v8.html('<span style="color: red">Tiger</span>');

        var v9 = $('#my-table tr td');

        v9.text('Tiger'); // Change all data to tiger

        // get+set+clear STYLE!

        console.log(v9.css('color'));

        v9.css('color', 'red'); // css('name', 'value')

        v9.css('color', '');

        v9.addClass('red');

        // hide & show

        v9.hide();

        v9.show();

        // get+set+remove propertis ...

        v9.attr('id', 'complex-data');

        console.log(v9.attr('id'));

        v9.removeAttr('id');

        // Form related content --> val() --> get+set

        // add+remove DOM

        v1.append('<td>fish</td>');

        v1.prepend('<td id=\'fish\'>fish</td>');

        v6.remove();

        // event

        var v10 = $('#fish');

        v10.click(function () {

            alert('fish!');

        });

        v10.mouseleave(function () {

            alert('fish!fish!');

        });

    </script>

    <p><input type="text" class="simple-input"></p>

    <p id="event-info"></p>

    <script>

        var v11 = $('.simple-input');

        v11.keydown(function () {

            v11.css("background-color", "#FFFFCC");

        });

        v11.focus(function () {

            $('body').attr('style', 'background-color: red');

        });

        // other event, such as ready[<---important!!!]. submit.

        $(function () { // Equivalent to $(document).ready(function() {})

            // init...

        });

        // Get event information

        $(function () {

            $('html').mousemove(function (event) {

                $('#event-info').text('x = ' + event.pageX + ', y = ' + event.pageY);

            });

        });

    </script>

</body>

</html>

【3】

参考：http://www.cnblogs.com/helloyy/p/6109665.html#3741878

通过 AJAX 访问与通过浏览器键入地址访问是完全不同的，如果没有进行恰当的设置，浏览器将会把 AJAX 从服务器得到的 set-cookie 当成垃圾处理掉！

结果就是客户端得不到预期的 cookie ，要解决这个问题需要在【两边】进行设置，

客户端 AJAX 属性：

            async:false,

            data:datatosend,

            dataType:"json",

            beforeSend: function(xhr) {

                xhr.withCredentials = true;

            }

            crossDomain:true,

服务端：

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

暂时先这样。。。

【4】

关于 Chrome 的一个小技巧，按住 Ctrl 键可以很方便地整理文件夹。

【5】

记一次 BUG，参考：http://zhangsha1251.blog.163.com/blog/static/6262405320111037220994/

为了方便测试给实体类添加了一个有参构造器。。没有补上无参构造器。。导致 MyBatis 创建不了实体类对象。。。

Web开发相关笔记 #01#的更多相关文章

Web开发相关笔记 #03#
HTTP Status 500 ※ jsp 放在 WEB-INF 外面 ※ 使用 JDBC 时需要 close 什么 ※ execute 和 executeUpdate ※ How can I ...
Web开发相关笔记 #04# WebSocket
本文的主要内容: HTTP VS. WebSocket WebSocket 的客户端实现(JavaScript) WebSocket 的服务端实现(Java & apache WebSocke ...
Web开发相关笔记 #05# MySQL中文无法匹配
2018-06-02 在 Class.forName 的时候记得先尝试 import 一下. 2018-06-04 1.JDBC SELECT 查询,中文条件查不出东西,可能是字符编码问题: Stri ...
Web开发相关笔记 #02#
[1] HTML 插入第三方. [2] [3] JavaScript 回调函数 & 模块化 --> 用变量封装数据.方法 --> 类比 Java 中的 package var fe ...
Web开发相关笔记
1.MySQL命令行下执行.sql脚本详解http://database.51cto.com/art/201107/277687.htm 在可视化工具里导出.sql脚本 --> 放命令行里运行 ...
【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
Django Web开发指南笔记
Django Web开发指南笔记语句VS表达式 python代码由表达式和语句组成,由解释器负责执行. 主要区别:表达式是一个值,它的结果一定是一个python对象:如:12,1+2,int('12 ...

随机推荐

修改原型给数组对象添加forEach
Array.prototype.forEach = function (callback, context) { for (var i = 0; i < this.length; i++) { ...
js indexof用法indexOf()定义和用法
indexOf()定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) ...
蓝桥杯第四届C/C++预赛真题（5）前缀判断（水题）
题目标题:前缀判断如下的代码判断 needle_start指向的串是否为haystack_start指向的串的前缀,如不是,则返回NULL. 比如:"abcd1234" 就包含了 ...
将几何画板x轴坐标值换成弧度制的方法
大家在学习数学的过程中,都会遇到函数,这个时候大家都会遇到函数图像.对于函数图像我们一般都会通过先建立坐标系,然后让图像呈现在坐标系中.函数的种类有很多,三角函数就是其中之一,在绘制三角函数图像时,我 ...
用MathType编辑异或与非符号有什么方法
在数学中我们会遇到各种数学符号,有运算符号,希腊符号,还有表示逻辑关系的逻辑符号等,这些大多都是比较常用的符号.其中逻辑符号中我们经常会用到异或与非等,这些符号的编辑我们常常会需要用MathType这 ...
hdu 4284(状压dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4284 思路:类似于poj3311:http://poj.org/problem?id=3311,首先f ...
iOS-UISearchBar去掉边线
解决办法: UISearchBar 去除边线属性search.searchBarStyle = minimal 即可
【BZOJ5070】危险的迷宫最小费用最大流
[BZOJ5070]危险的迷宫 Description JudgeOnline/upload/201710/55.doc Input 第一行是两个整数A与B(1≤A,B≤10),中间用空格分隔,表示该 ...
ZOJ 3490 String Successor（模拟）
Time Limit: 2 Seconds Memory Limit: 65536 KB The successor to a string can be calculated by applying ...
ORACLE_SID的查找
SID是System IDentifier的缩写,而ORACLE_SID就是Oracle System Identifier的缩写,在Oracle系统中,ORACLE_SID以环境变量的形式出现,在特 ...

Web开发相关笔记 #01#

Web开发相关笔记 #01#的更多相关文章

随机推荐

热门专题