Web前端笔记整理
不使用Ajax无刷新提交：
header('HTTP/1.1 204 No Content');
var a=document.createElement('img'); a.setAttribute('src','./01.php');
<form action="" target="regzone"></form> <iframe name="regzone" style="display:none"></iframe>
Ajax处理XML：
var xml = obj.responseXML.getElementsByTagName("city");
var res = xml[0].childNodes[0].nodeValue;
Ajax处理JSON：
var res=eval("("+obj.responseText+")");
alert(reses.my.name);
jQuery的Ajax处理JSON：
var obj = JSON.parse(data);
alert(obj.user_id);
jQuery的AJax操作：
function ajaxGet(){
$.ajax({
type:"GET",
url:"test.php?key=123",
success:function(data){
alert(data);
}
});
}
function ajaxPost(){
$.ajax({
type:"POST",
url:"test.php",
data:'{"id":1,"name":"abc"}',
contentType:"application/json;charset=utf-8",
success:function(data){
alert(data);
}
})
}
【HTML】
1.邮件链接：<a href="mailto:1234@qq.com?subject=title">点击发送邮件</a>
2.表格：单元格与单元格的间距cellspacing，单元格与内容间距cellpadding，跨行rowspan，跨列colspan。
3.无序列表 <ul>，有序列表<ol>
4.引入CSS: <link rel="stylesheet" type="text/css" href="style.css">
引入JS：<script type="text/javascript" src="test.js"></script>
5.关于超链接 a:link{ } 未访问的链接，a:visited已访问的链接，a:hover鼠标移动到链接上，a:active选定的链接。
6.定位方式：相对定位是相对于元素初始位置进行定位，而绝对定位则是相对于最近的已定位的父元素；
7. 通过!important语法提升重要性，例如div { color:red !important } ，IE6不支持。
8. 常用的一大块DIV水平绝对居中：margin:0 auto; /*上下为0，左右auto */
9. HTML5的文档类型声明(DTD) 为 <!doctype html>
10. HTML5中给<form>标签设置一个id，然后把要关联起来的表单元素加上form=”id” 即可：（IE无效）
<form action=“” id=“rx1”></form> <input type=“text” form=“rx1”>
11.input表单的type新属性值: email、url、date、time、month、week、number、range、search、color。
12.新增的表单属性：required（必填），placeholder（提示文本），autofocus（自动聚焦），Pattern（正则表达式）。
【JS】
[获取和设置属性]node.setAttribute("属性名","属性值");node.getAttribute("属性名");
[移动/新添节点]父节点.insertBefore(新节点,现有节点);
[替换节点]父节点.replaceChild(新节点,旧节点);
[追加节点]现有节点.appendChild(新节点);
[删除子节点]父节点.removeChild(子节点);
[节点克隆]节点.cloneNode(true/false);
[创建文本节点]document.createTextNode('一段文字');
[创建HTML节点]
var inputElement=document.createElement("input”);
inputElement.type = 'text';xx.appendChild(inputElement);
【jQuery】
[常用]xx.text()和xx.html()和xx.val() 获取和设置文本；xx.hide()和xx.show() 隐藏和显示。
[JQ使用方法] $(‘#b1’).click(function(){ $(‘#one’).css(“background”,“red”); });
[jQuery选择器] $(“#test”)，$(“.test”)，$(“p”)，$(“*”)，$(“div,span,p.myClass”)。
[层次选择器] $(“div span”)，$(“div > span”)，$(“.one + div”)，$(“#prev~div”)，$(“#prev”).nextAll(“div”)。
[过滤选择器] $(“div:first”)，$(“div:last”)，$(“input:not(.myClass)”)，$(“input:even”)，$(“input:odd”)，$(“input:eq(1)”)，$(“input:gt(1)”)，$(“input:lt(1)”)，$(“:header”)，$(“div:animated”)。
[内容过滤选择器]
$(“div:contains(‘我’)”)，$(“div:empty”)，$(“div:has(p)”)，$(“div:parent”)。
[可见性过滤选择器] $(“:hidden”)，$(“div:visible”)。
[属性过滤选择器] $('div[id]')，$('div[title=test]')，$('div[title!=test]')，$('div[title^=te]')，$("div[title$=est]")，$("div[title*=es]")，$("div[id][title*=es]")。
[子元素过滤选择器] $('div.one :nth-child(2)')，$('div.one :first-child')，$('div.one :last-child')，$('div.one :only-child')。
[表单对象属性过滤选择器】$(“#form1 :enabled”)，$(“#form2 :disabled”)，$(“input:checked”)，$(“select :selected”)。
[表单选择器] $(“:input”)，$(“:text”)，$(“:password”)，$(“:radio”)，$(“:checkbox”)，$(“:submit”)，$(“:image”)，$(“:reset”)，$(“:button”)，$(“:file”)，$(“:hidden”)。
汇总：Jquery选择器的各种用法
$(this) 当前元素，
$("p") 所有<p>元素，
$("input") 所有input元素，
$(".intro") 所有 class=“intro” 的元素，
$("p.intro") 所有 class="intro" 的<p>元素，
$("#intro") id="intro" 的第一个元素，
$("ul > li") ul下的所有li节点，
$("ul li:first") 每个 <ul> 的第一个 <li> 元素，
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的属性，
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素，
$(li[a:contains('Register')]") 内容包含Register的<a>元素，
$("input[@name=bar]") name是bar的<input>元素，
$("input[@type=radio][@checked]") type是radio的<input>元素，
$(“li”).not(“ul”) li下没有包含ul节点的节点元素，
$("span[@id]") 所有包含id属性的<span>元素，
$("[@id=span1]") 所有id为span1的节点元素。
[对象集合遍历] var $objs=$("select option:selected"); $.each($objs,function(){ alert($(this).val()); });
[jQuery的DOM操作] T===>"ul"，v===>"<li>北京</li>"；P===>"p",b===>"<b>你好</b>"。
① 后面追加内容：$(T).append(v); 或者 $(v).appenTo(T); “前面追加”改为prepend 和 prependTo。
② 元素之后插入：$(P).after(b); 或者 $(b).insertAfter(P); “元素之前插入”改为before 和 insertBefore（insertBefore还可以用来移动节点）。
③ 删除节点：xx.remove(); 清空节点：xx.empty(); 复制节点：clone()方法；替换节点：replaceWith()和replaceAll()；包裹节点：wrap()。
[属性操作] 获取和设置元素属性：xx.attr()；删除元素属性：xx.removeAttr()。
[CSS样式操作] 获取样式：xx.attr("class"); 追加样式:xx.addClass("another"); 删除全部样式:xx.removeClass(); 判断是否含有某样式:xx.hasClass("another"))。
[遍历节点] children()方法：var sx = $(“ul”).children();
[CSS-DOM操作] xx.css("color"); xx.height(); xx.width(); xx.css("color","red"); xx.css({"color":"red","fontSize":"30px"}); offset()方法，position()方法，scrollTop()方法。
[jQuery事件]
① $(document).ready(); ② $(window).load(function(){//代码⋯⋯})
③ $(document).ready(function(){}) 相当于 $().ready(function(){}) 相当于 $(function(){})
[常见事件] .click()、.dblclick()、.focus()、.mouseover()、.css()、.hide()、.show('slow')。
[事件绑定--bind()方法;unbind() 方法 解除绑定事件] $(function(){ $("p").bind("click",function(){ //... }) })
hover(fn1,fn2)：光标悬停到元素上触发第一个函数，光标离开时触发第二个函数。
toggle(fn1,fn2,....,fnN)：连续单击，第一次单击触发第一个函数，第二次触发第二个函数，....
one()方法:事件处理函数只会被执行一次。$('#btn').one("click", function(){//... });
animate()方法:自定义动画。
跨域请求 N 种解决方案
document.domain + iframe (只有在主域相同的时候才能使用该方法)
动态创建script
location.hash + iframe
window.name + iframe
postMessage（HTML5中的XMLHttpRequest Level 2中的API）
CORS，背后的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
JSONP，包含两部分：回调函数和数据。回调函数是当响应到来时要放在当前页面被调用的函数。数据就是传入回调函数中的json数据，也就是回调函数的参数了。
web sockets，是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
什么是CSRF攻击？XSS攻击？如何防范？
CSRF：跨站请求伪造，可以通过通过判断来源和加 Token 的方式来防范。
XSS：跨站脚本攻击，可以通过对内容转义和过滤来防范,还有CSP
JSON 和 JSONP
Json和JsonP虽然只差一个字母，但却根本不是一回事.
JSON是一种描述信息的格式，或者叫做数据描述格式；
jsonp是一种非官方跨域数据交互协议，如同ajax一样，它也不一定非要用json格式来传递数据.jsonp是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。Jsonp只支持Get请求方式。
