前端学习纲要 ※jQuery 参考 ※ 整理 Chrome 收藏夹的小技巧 ※ 解决 AJAX 跨域获取 cookie ※ 记一次 MyBatis 相关的 debug

【1】

前端学习纲要：

♦ 第一阶段：

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

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

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

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

掌握 发布网站的 N 种途径；

♦ 第二阶段：

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#的更多相关文章

  1. Web开发相关笔记 #03#

    HTTP Status 500  ※  jsp 放在 WEB-INF 外面  ※ 使用 JDBC 时需要 close 什么 ※ execute 和 executeUpdate ※ How can I ...

  2. Web开发相关笔记 #04# WebSocket

    本文的主要内容: HTTP VS. WebSocket WebSocket 的客户端实现(JavaScript) WebSocket 的服务端实现(Java & apache WebSocke ...

  3. Web开发相关笔记 #05# MySQL中文无法匹配

    2018-06-02 在 Class.forName 的时候记得先尝试 import 一下. 2018-06-04 1.JDBC SELECT 查询,中文条件查不出东西,可能是字符编码问题: Stri ...

  4. Web开发相关笔记 #02#

    [1] HTML 插入第三方. [2] [3] JavaScript 回调函数 & 模块化 --> 用变量封装数据.方法 --> 类比 Java 中的 package var fe ...

  5. Web开发相关笔记

    1.MySQL命令行下执行.sql脚本详解http://database.51cto.com/art/201107/277687.htm 在可视化工具里导出.sql脚本 --> 放命令行里运行 ...

  6. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  7. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  8. ASP.NET Core Web开发学习笔记-1介绍篇

    ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...

  9. Django Web开发指南笔记

    Django Web开发指南笔记 语句VS表达式 python代码由表达式和语句组成,由解释器负责执行. 主要区别:表达式是一个值,它的结果一定是一个python对象:如:12,1+2,int('12 ...

随机推荐

  1. bgr to rgb

    因为在研究车牌识别算法(plr),遇到了算法 处理的格式问题,可分三个常用格式: 0:rgb 1:bgr 2:yuv422——需要注意的是,这里为啥选yuv422做识别,当然还可选yuv444,最坏打 ...

  2. 【BZOJ】3538: [Usaco2014 Open]Dueling GPS（spfa）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3538 题意不要理解错QAQ,是说当前边(u,v)且u到n的最短距离中包含这条边,那么这条边就不警告. ...

  3. spark(1.1) mllib 源码分析(一)-卡方检验

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/4019131.html 在spark mllib 1.1版本中增加stat包,里面包含了一些统计相关的函数 ...

  4. 【PyQt】插入排序算法

    # coding=utf-8 import sys from PyQt4.QtGui import * from PyQt4.QtCore import * class MainWindow(QMai ...

  5. 【ask】Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.

    1.周五对nodejs tcp长连接服务器框架进行压测,一切开始比较常规(没什么特殊问题). 2.突然手一哆嗦,把压测用的客户端群一起关闭了. 3.这个时候nodejs的服务器爆出了"Cau ...

  6. Docker for window 无法共享磁盘

    Docker for window 无法共享主机磁盘,环境如下: 操作系统: windown10 Docker version 18.09.0, build 4d60db4 症状如下: 如图,点击ap ...

  7. C# 中利用反射机制拷贝类的字段和属性(拷贝一个类对象的所有东西付给另一个类对象，而不是付给引用地址)

    from:https://blog.csdn.net/poxiaohai2011/article/details/27555951 //C# 中利用反射机制拷贝类的字段和属性(拷贝一个类对象的所有东西 ...

  8. spring中关于FeignClient的错误 QueryParam.value() was empty on parameter 1

    现创建一个feignClient的接口,在其他服务调用改client时发现服务启动失败错误日志如下: org.springframework.beans.factory.BeanCreationExc ...

  9. Less-css预处理Node and VS扩展编译

    node编译 第一步:https://nodejs.org/en/  到node官网下载最新的node 第二步:和普通软件一样把node安装好 第三步:运行-cmd,准备安装less 全局安装(整个电 ...

  10. PAT 1007 Maximum Subsequence Sum（最长子段和）

    1007. Maximum Subsequence Sum (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...