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: [email protected]?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请求方式。
 

猜你喜欢

转载自www.cnblogs.com/rxbook/p/10913059.html