Web开发相关笔记 #01#
前端学习纲要 ※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#的更多相关文章
- 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 ...
随机推荐
- 《Start Developing iOS Apps Today》摘抄
原文:<Start Developing iOS Apps Today> Review the Source Code 入口函数main.m #import <UIKit/UIKit ...
- AWS那些需要注意的问题
自己走过的坑,才知道 1.1 EC2实例限制 EC2实例在申请超过20台后,会有数量限制. 解决方法: AWS控制台需要提工单,进行申请解除限制.把EC2数量提高到50台或者100台 此工单审核大概要 ...
- 报错An internal error occurred during: "reload maven project". java.lang.NullPointerException
新建了一个maven项目,由于有问题就删除了,但是卡住了就强制关闭了. 查了一下是由于由于没有正常关机导致eclipse无法将数据正常写入配置文件导致无法启动.所以报这样一个异常. 最后是这样解决的: ...
- sql server数据库,禁用启用触发器各种情况!
一.禁用和启用单个触发器 禁用: ALTER TABLE trig_example DISABLE TRIGGER trig1 GO 恢复: ALTER TABLE trig_example ENAB ...
- bat脚本中timeStamp解决方案
之前做了个工具包,用了timeStamp做文件名. 一般来说最简单的代码类似于: set timeStamp=%date:/=-%_%time% echo %timeStamp% >2018-0 ...
- 《从零开始学Swift》学习笔记(Day60)——Core Foundation框架
原创文章,欢迎转载.转载请注明:关东升的博客 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风 ...
- nvm-windows 手动安装 nvm use 无效 'node' 不是内部或外部命令,也不是可运行的程序
按照这两位前辈的教程,安装了nvm-windows. http://www.cnblogs.com/yesyes/p/7403184.html http://blog.csdn.net/jingsi1 ...
- delphi中 ExecSQL 与 open
对于不用返回结果集的要用execsql反之则用open;insert ,update,delete就要用到execsql;select就要用open 说得对,例子:with query1 do clo ...
- java工程编写manifest文件
如果需要一个可以单独运行的jar包“Runnable JAR file”,省事的方法是妥妥的选择打一个可运行的jar包“Runnable JAR file”.如此一来,就可以把程序运行所依赖的类.第三 ...
- IO 包中的其他类
打印流 PrintWriter 和 PrintWriter 直接操作输入流和文件 序列流 SequenceInputStream 对多个输入流进行合并 操作对象 ObjectInputStream 和 ...