Web開發相關筆記 #01#

時間 2019-12-01

標籤 web 開發相關筆記欄目 HTML 简体版

原文原文鏈接

前端學習綱要 ※ jQuery 參考 ※ 整理 Chrome 收藏夾的小技巧 ※ 解決 AJAX 跨域獲取 cookie ※ 記一次 MyBatis 相關的 debugcss

【1】html

前端學習綱要：前端

♦ 第一階段：jquery

web-project 的命名規範與文件的組織規範；web

HTML 的基本元素 --> 例如 h p ui ol li .. img 等 --> HTML 元素的屬性；json

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 建立不了實體類對象。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。