web 開發相關筆記 01

來源:互聯網
上載者:User

標籤:google   客戶   ide   物件導向   屬性   spec   move   amp   mouse   

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

 

【1】

前端學習綱要:

♦ 第一階段:

web-project 的命名規範與檔案的組織規範;

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

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

web 開發相關筆記 01

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.