• 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请求方式。
     
  • 相关阅读:
    [Python]小甲鱼Python视频第038课(类和对象:继承 )课后题及参考解答
    [Python]小甲鱼Python视频第037课(类和对象:面向对象编程 )课后题及参考解答
    [Python]小甲鱼Python视频第036课(类和对象:给大家介绍对象 )课后题及参考解答
    Session共享
    防止表单重复提交
    Docker安装redis
    Docker安装mysql
    docker-compose常用命令
    Docker常用命令
    Oracle 随机取记录
  • 原文地址:https://www.cnblogs.com/rxbook/p/10913059.html
Copyright © 2020-2023  润新知