01_初識jquery

jQuery是什么？

jQuery是一款優秀的JavaScript庫，從命名可以看出jQuery最主要的用途是用來做查詢（jQuery=js+Query）.
在jQuery官方Logo下方還有一個副標題（write less, do more）, 體現了jQuery除了查詢以外,還能讓我們對HTML文檔遍歷和操作、事件處理、動畫以及Ajax變得更加簡單

體驗jQuery
- 原生JS設置背景

<script>
// 查詢
    var div = document.getElementsByTagName("div");
    var one = document.getElementsByClassName("one");
    var two = document.getElementById("two");
// 操作css
    div[0].style.backgroundColor = "red";
    one[0].style.backgroundColor = "yellow";
    two.style.backgroundColor = "blue";
</script>

使用jQuery設置背景

<script>
  $(document).ready(function () {
// 查詢，操作CSS一步到位
      $("div").eq(0).css('background', 'red');
      $(".one").eq(0).css('background', 'yellow');
      $("#two").css('background', 'blue');
  });
</script>

為什么要使用jQuery？

強大選擇器: 方便快速查找DOM元素
- 如上面實例所展示一樣，通過jQuery查找DOM元素要比原生js快捷很多
- jQuery允許開發者使用CSS1-CSS3幾乎所有的選擇器,以及jQuery獨創的選擇器
鏈式調用: 可以通過.不斷調用jQuery對象的方法
- 如上面實例所展示一樣，jQuery可以通過.（點）.不斷調用jQuery對象的方法，而原生JavaScript則不一定

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 報錯,必須分開寫
    div[0].style.backgroundColor = "red".width = 200+"px";
//    div[0].style.width = 200+"px";
    
    // 2.jQuery
    $(document).ready(function () {
    // 不報錯,后面還可以接著繼續寫
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    }); 
</script>

*隱式遍歷(迭代): 一次操作多個元素*

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
//    div.style.backgroundColor = "red";// 無效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隱式遍歷(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>

*讀寫合一: 讀數據/寫數據使用是一個函數*

<script>
    $(document).ready(function () {
        // 讀取數據
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 寫入數據
        $("div").eq(0).text("新的數據");
    });
</script>

*事件處理*
*DOM操作(C增U改D刪)*
*樣式操作*
*動畫*
*豐富的插件支持*
瀏覽器兼容(前端開發者痛點)
- 1：兼容ie678，但相對其它版本文件較大，官方只做BUG維護，功能不再新增，最終版本：1.12.4 (2016年5月20日).
- 2：不兼容ie678，相對1.x文件較小，官方只做BUG維護，功能不再新增，最終版本：2.2.4 (2016年5月20日)
- 3：不兼容ie678，只支持最新的瀏覽器，很多老的jQuery插件不支持這個版本，相對1.x文件較小，提供不包含Ajax/動畫API版本。
- 應該選擇幾點幾版本jQuery?
  - 查看百度網頁源碼使用1.x
  - 查看騰訊網頁源碼使用1.x
  - 查看京東網頁源碼使用1.x
  - 綜上所述學習1.x,選擇1.x
- 應該使用開發板還是生產版?
  - 開發板: 所有代碼沒有經過壓縮,體積更大(200-300KB)
  - 生產版:所有代碼經過壓縮,提及更小(30-40KB)
  - 初學者為了更好的理解jQuery編碼時使用開發板,項目上線時為了提升訪問速度使用生產版

如何使用jQuery？

下載jQuery庫
- 下載地址: http://code.jquery.com/
引入下載的jQuery庫

<head>
    <meta charset="UTF-8">
    <title>01-初識jQuery</title>
    <script src="code/js/jquery-1.12.4.js"></script>
</head>

編寫jQuery代碼

<script>
    $(document).ready(function () {
      // 所有jQuery代碼寫在這里面
         alert("hello LNJ");
    });
</script>

jQuery 和 JS 的加載模式

通過原生 JS 和 jQuery 都可以拿到 DOM 元素，及圖片的寬高

window.onload = function () {
    // 1. 通過原生的js入口函數可以拿到DOM元素
    var img = document.getElementsByTagName('img')[0]
    console.log(img)
    // 2. 通過原生的JS入口函數可以拿到DOM元素的寬高
    var width = window.getComputedStyle(img).width
    console.log('onload: ', width)
}
$(document).ready(function () {
    // 1. 通過JQuery入口函數可以拿到DOM元素
    var $img = $('img')
    console.log($img)
    // 2. 通過JQuery入口函數可以拿到DOM元素的寬高
    var $width = $img.width()
    console.log('ready: ', $width)
})

原生的 JS 如果編寫了多個入口函數，后面編寫的會覆蓋原來的。而 jQuery 不會覆蓋

window.onload = function () {
    alert('hello tzk1')
}
window.onload = function () {
    alert('hello tzk2')
}

只會彈出 hello tzk2

$(document).ready(function () {
    alert('hello tzk1')
});
$(document).ready(function () {
    alert('hello tzk2')
});

hello tzk1 與 hello tzk2 都會彈出。

jQuery 入口函數的其他寫法

// 1. 第一種寫法
$(document).ready(function () {
    alert('hello tzk')
});
// 第二種寫法
jQuery(document).ready(function () {
    alert('hello tzk')
});
// 第三種寫法(推薦)
$(function () {
    alert('hello tzk')
})
// 第四種寫法
jQuery(function () {
    alert('hello tzk')
})

jQuery 的四種寫法中，推薦使用第三種寫法。

jQuery 的沖突問題

釋放 $ 符號
```
jQuery.noConflict()
jQuery(function () {
    alert('hello tzk')
})
```
- 釋放操作必須在編寫其他 JQuery 代碼之前編寫
- 釋放之后就不能在使用 $, 改為使用 jQuery

自定義訪問符號

var nj = jQuery.noConflict()nj(function () {    alert('hello tzk')})

ry(function () {
alert(‘hello tzk’)
})




- 釋放操作必須在編寫其他 `JQuery` 代碼之前編寫
- 釋放之后就不能在使用 `$`, 改為使用 `jQuery`

2. 自定義訪問符號



```Javascript
var nj = jQuery.noConflict()nj(function () {    alert('hello tzk')})

本文鏈接：https://blog.csdn.net/Lime_00/article/details/106883144

智能推薦

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

styled-components —— React 中的 CSS 最佳實踐

https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...

基于TCP/IP的網絡聊天室用Java來實現

基于TCP/IP的網絡聊天室實現開發工具:eclipse 開發環境:jdk1.8 發送端接收端工具類運行截圖...