zoukankan      html  css  js  c++  java
  • 前一段时间笔记

    计划

    • html

    • css

    • javascript

    • es6

    • typescript

    • vue

    • react

    • angular

    • 对于三大框架中的各个,是了解其成套的配套信用方法

    • 了解三大框架在食用过程中的作用

     

    html

    有一些作用不同,但是效果是相同的,在文本部分

    像背单词一样,记得表单部分比较重要

     

    css

    style引入的方式

    <p style="color:red;font-size:50px;">这是一段文本</p>     
    <style type="text/css"> p { color: blue; font-size: 40px;
    }
    <link rel="stylesheet" type="text/css" href="style.css">

    样式优先级

    样式表层叠通过五种方式进行, 如果样式相同, 那么比如会产生冲突替换。 这时, 它的优先级顺序就显的比较重要。 以下优先级从低到高: (1).浏览器样式( 元素自身携带的样式) ; (2).外部引入样式( 使用<link>引入的样式) ; (3).文档内嵌样式( 使用<style>元素设置) ; (4).元素内嵌样式( 使用 style 属性设置) 。

    3.样式继承 如果某一个元素并没有设置父元素相关的样式, 那么就会使用继承机制将父元素的样式集成下来。 //<b>元素继承了<p>元素的样式 1. <p style="color:red;">这是HTML5</p> 样式继承只适用于元素的外观( 文字、 颜色、 字体等) , 而元素在页面上的布局样式则不会被继承。 如果继承这种样 式, 就必须使用强制继承: inherit。 //强制继承布局样式

    <p>这是<b>HTML5</b></p>
    <style type="text/css">
    p { border: 1px solid red;
    } b { border : inherit;
    }
    </style>  

    选择器

    基本选择器

    属性选择器

    伪选择器

     

    颜色的表达rgb(),rgba()

    margin padding 等细微的差别

    字体的复合式写法

    盒子模型

     

    JS

    apply call 和闭包的用法

    function* generator

    更细心的同学指出, number 对象调用 toString() 报SyntaxError: 1. 123.toString(); // SyntaxError 遇到这种情况, 要特殊处理一下: 1. 123..toString(); // '123', 注意是两个点! 2. (123).toString(); // '123'

    正则

    全局搜索

    贪婪匹配

    json解析和反向序列化

    xiaoming.__proto__ = Student;

    原型链

    原型继承浏览器对象

    windows对象

    navigator 对象表示浏览器的信息, 最常用的属性包括: navigator.appName: 浏览器名称; navigator.appVersion: 浏览器版本; navigator.language: 浏览器设置的语言; navigator.platform: 操作系统类型; navigator.userAgent: 浏览器设定的 User-Agent 字符串。

    screen

    location

    document

    button与js挂钩

    type="button" onclick="fn()"

    js中fn,用dom修改、

    history对象

    在操作一个DOM节点前, 我们需要通过各种方式先拿到这个DOM节点。 最常用的方法 是 document.getElementById() 和 document.getElementsByTagName() , 以及CSS选择 器 document.getElementsByClassName() id选择器唯一,也可以用bytagname和classname组合

    // 返回ID为'test'的节点:
    2. var test = document.getElementById('test');
    3.
    4. // 先定位ID为'test-table'的节点, 再返回其内部所有tr节点:
    5. var trs = document.getElementById('test-table').getElementsByTagName('tr');
    6.
    7. // 先定位ID为'test-div'的节点, 再返回其内部所有class包含red的节点:
    8. var reds = document.getElementById('test-div').getElementsByClassName('red');
    9.
    10. // 获取节点test下的所有直属子节点:
    11. var cs = test.children;
    12.
    13. // 获取节点test下第一个、 最后一个子节点:
    14. var first = test.firstElementChild;
    15. var last = test.lastElementChild;

    第二种方法是使用 querySelector() 和 querySelectorAll() , 需要了解selector语法

      // 通过querySelector获取ID为q1的节点:
    2. var q1 = document.querySelector('#q1');
    3.
    4. // 通过querySelectorAll获取q1节点内的符合条件的所有节点:
    5. var ps = q1.querySelectorAll('div.highlighted > p');

     

    第二种是修改 innerText 或 textContent 属性, 这样可以自动对字符串进行HTML编码, 保证无法 设置任何HTML标签:

    1. // 获取<p id="p-id">...</p>
    2. var p = document.getElementById('p-id');
    3. // 设置文本:
    4. p.innerText = '<script>alert("Hi")</script>';
    5. // HTML被自动编码, 无法设置一个<script>节点:
    6. // <p id="p-id"><script>alert("Hi")</script></p>  

    这里的 innerText是指html内容,带有编码的,innerHtml直接改变元素内容,含危险,网络攻击

    dom的删除插入

    删除一个DOM节点就比插入要容易得多。 要删除一个节点, 首先要获得该节点本身以及它的父节点, 然后, 调用父节点的 removeChild 把自 己删掉:

    var parent = document.getElementById('parent');
    2. parent.removeChild(parent.children[0]);

    因此, 删除多个节点时, 要注意 children 属性时刻都在变化

    操作表单,文件,ajax要重新学

    跨域

    Jquery

    $ 是著名的jQuery符号。 实际上, jQuery把所有功能全部封装在一个全局变量 jQuery 中, 而 $ 也是一个合法的变量名, 它是变量 jQuery 的别名:

    window.jQuery; // jQuery(selector, context)
    2. window.$; // jQuery(selector, context)
    3. $ === jQuery; // true
    4. typeof($); // 'function'

    按ID查找 选择器 本文档使用 书栈网 · BookStack.CN 构建 - 202 -

    1. // 查找<div id="abc">:
    2. var div = $('#abc');

    注意, #abc 以 # 开头。 返回的对象是jQuery对象。

    总之jQuery的选择器不会返回 undefined 或者 null , 这样的好处是你不必在下一行判断 if (div === undefined) 。 jQuery对象和DOM对象之间可以互相转化:

     var div = $('#abc'); // jQuery对象
    var divDom = div.get(0); // 假设存在div, 获取第1个DOM元素
    var another = $(divDom); // 重新把DOM包装为jQuery对象

    通常情况下你不需要获取DOM对象, 直接使用jQuery对象更加方便。 如果你拿到了一个DOM对象, 那可 以简单地调用 $(aDomObject) 把它变成jQuery对象, 这样就可以方便地使用jQuery的API了。

    按tag查找只需要写上tag名称就可以了: 1. var ps = $('p'); // 返回所有<p>节点 2. ps.length; // 数一数页面有多少个<p>节点 按class查找注意在class名称前加一个 . :

    var a = $('.red'); // 所有节点包含`class="red"`都将返回
    // 例如:
    // <div class="red">...</div>

    按class查找注意在class名称前加一个 . var a = $('.red'); // 所有节点包含class="red"都将返回

    一个DOM节点除了 id 和 class 外还可以有很多属性, 很多时候按属性查找会非常方便, 比如在一 个表单中按属性来查找: 1. var email = $('[name=email]'); // 找出<??? name="email"> 2. var passwordInput = $('[type=password]'); // 找出<??? type="password"> 3. var a = $('[items="A B"]'); // 找出<??? items="A B"> 当属性的值包含空格等特殊字符时, 需要用双引号括起来。 按属性查找还可以使用前缀查找或者后缀查找: 1. var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM 2. // 例如: name="icon-1", name="icon-2" 3. var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM 4. // 例如: name="startswith", name="endswith"

    要选出JavaScript, 可以用层级选择器: 1. $('ul.lang li.lang-javascript'); // [<li class="langjavascript">JavaScript</li>] 2. $('div.testing li.lang-javascript'); // [<li class="langjavascript">JavaScript</li>]

    $('form[name=upload] input');

    子选择器 $('parent>child') 类似层级选择器, 但是限定了层级关系必须是父子关系, 就 <child> 节点必须是 <parent> 节点的直属子节点。 还是以上面的例子: 1. $('ul.lang>li.lang-javascript'); // 可以选出[<li class="langjavascript">JavaScript</li>] 2. $('div.testing>li.lang-javascript'); // [], 无法选出, 因为<div><li>不构成父子关系

    过滤器一般不单独使用, 它通常附加在选择器上, 帮助我们更精确地定位元素。 观察过滤器的效果: 1. $('ul.lang li'); // 选出JavaScript、 Python和Lua 3个节点 2. 3. $('ul.lang li:first-child'); // 仅选出JavaScript 4. $('ul.lang li:last-child'); // 仅选出Lua 5. $('ul.lang li:nth-child(2)'); // 选出第N个元素, N从1开始 6. $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素 7. $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素 Node.js加载了 hello.js 后, 它可以把代码包装一下, 变成这样执行:

     (function () {
    // 读取的hello.js代码:
    var s = 'Hello';
    var name = 'world';

    console.log(s + ' ' + name + '!');
    // hello.js代码结束
    })();

    这样一来, 原来的全局变量 s 现在变成了匿名函数内部的局部变量。 如果Node.js继续加载其他模 块, 这些模块中定义的“全局”变量 s 也互不干扰。

    这样一来, 原来的全局变量 s 现在变成了匿名函数内部的局部变量。 如果Node.js继续加载其他模 块, 这些模块中定义的“全局”变量 s 也互不干扰。

    通常情况下你不需要获取DOM对象, 直接使用jQuery对象更加方便。 如果你拿到了一个DOM对象, 那可 以简单地调用 $(aDomObject) 把它变成jQuery对象, 这样就可以方便地使用jQuery的API了。

    注意, #abc 以 # 开头。 返回的对象是jQuery对象。

     

  • 相关阅读:
    解决SharePoint 文档库itemadded eventhandler导致的上传完成后,编辑页面保持报错的问题,错误信息为“该文档已经被编辑过 the file has been modified by...”
    解决SharePoint 2013 designer workflow 在发布的报错“负载平衡没有设置”The workflow files were saved but cannot be run.
    随机实例,随机值
    Spring4笔记
    struts2笔记(3)
    struts2笔记(2)
    获取文本的编码类型(from logparse)
    FileUtil(from logparser)
    DateUtil(SimpleDateFormat)
    struts2笔记
  • 原文地址:https://www.cnblogs.com/anatkh/p/14401542.html
Copyright © 2011-2022 走看看