jQuery學習筆記

Query的介紹

學習目標

能夠知道jQuery的作用及優點

1. jQuery的定義

jQuery是對JavaScript的封裝，它是免費、開源的JavaScript函數庫，jQuery 極大地簡化了 JavaScript 編程。

2. jQuery的作用

jQuery和JavaScript它們的作用一樣，都是負責網頁行為操作，增加網頁和用戶的交互效果的，只不過jQuery簡化了JavaScript編程，jQuery實現交互效果更簡單。

3. jQuery的優點

jQuery兼容了現在主流的瀏覽器，增加了程序員的開發效率。
jQuery簡化了 JavaScript 編程，代碼編寫更加簡單。

4. 小結

jQuery是一個免費、開源的JavaScript函數庫
jQuery的作用和JavaScript一樣，都是負責網頁和用戶的交互效果。
jQuery的優點就是兼容主流瀏覽器，代碼編寫更加簡單。

jQuery的用法

學習目標

能夠知道jQuery的引入方式
能夠說出兩種jQuery入口函數的寫法

1. jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

2. jQuery的入口函數

我們知道使用js獲取標簽元素，需要頁面加載完成以后再獲取，我們通過給onload事件屬性設置了一個函數來獲取標簽元素，而jquery提供了ready函數來解決這個問題，保證獲取標簽元素沒有問題，它的速度比原生的 window.onload 更快。

入口函數示例代碼:


<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是獲取的div：' + oDiv);
    };
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery獲取的div：' + $div);
    });
</script>

<div id="div01">這是一個div</div>

入口函數的簡寫示例代碼:


<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是獲取的div：' + oDiv);
    };

    /*
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery獲取的div：' + $div);
    });
    */

    // 上面ready的寫法可以簡寫成下面的形式：
    $(function(){
        var $div = $('#div01');
        alert('jquery獲取的div：' + $div);
    }); 
</script>

<div id="div01">這是一個div</div>

3. 小結

引入jQuery
獲取標簽元素需要在入口函數來完成，它的速度比原生的 window.onload 更快
jQuery入口函數有兩種寫法:
// 完整寫法 $(document).ready(function(){ ... }); // 簡化寫法 $(function(){ ... });

jQuery選擇器

學習目標

能夠使用jQuery選擇器獲取標簽元素

1. jQuery選擇器的介紹

jquery選擇器就是快速選擇標簽元素，獲取標簽的，選擇規則和css樣式一樣。

2. jQuery選擇器的種類

標簽選擇器
類選擇器
id選擇器
層級選擇器
屬性選擇器

示例代碼:

$('#myId') //選擇id為myId的標簽
$('.myClass') // 選擇class為myClass的標簽
$('li') //選擇所有的li標簽
$('#ul1 li span') //選擇id為ul1標簽下的所有li標簽下的span標簽
$('input[name=first]') // 選擇name屬性等于first的input標簽

說明:
可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。

$(function(){
    result = $("div").length;
    alert(result);
});

3. 小結

jQuery選擇器就是選擇標簽的
標簽選擇器是根據標簽名來選擇標簽
類選擇器是根據類名來選擇標簽
id選擇器是根據id來選擇標簽
層級選擇器是根據層級關系來選擇標簽
屬性選擇器是根據屬性名來選擇標簽

選擇集過濾

學習目標

能夠使用選擇器進行標簽過濾

1. 選擇集過濾的介紹

選擇集過濾就是在選擇標簽的集合里面過濾自己需要的標簽

2. 選擇集過濾的操作

has(選擇器名稱)方法，表示選取包含指定選擇器的標簽
eq(索引)方法，表示選取指定索引的標簽

has方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  設置樣式
        $div.css({"background":"red"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

<div>
    這是第二個div
    <input type="text">
    <input type="button">
</div>

eq方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  設置樣式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div = $("div").eq(1);
        //  設置樣式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

<div>
    這是第二個div
    <input type="text">
    <input type="button">
</div>

3. 小結

選擇集過濾可以使用has方法和eq方法來完成
jquery給標簽設置樣式使用css方法

選擇集轉移

學習目標

能夠說出2種選擇集轉移方法

1. 選擇集轉移介紹

選擇集轉移就是以選擇的標簽為參照，然后獲取轉移后的標簽

2. 選擇集轉移操作

$('#box').prev(); 表示選擇id是box元素的上一個的同級元素
$('#box').prevAll(); 表示選擇id是box元素的上面所有的同級元素
$('#box').next(); 表示選擇id是box元素的下一個的同級元素
$('#box').nextAll(); 表示選擇id是box元素的下面所有的同級元素
$('#box').parent(); 表示選擇id是box元素的父元素
$('#box').children(); 表示選擇id是box元素的所有子元素
$('#box').siblings(); 表示選擇id是box元素的其它同級元素
$('#box').find('.myClass'); 表示選擇id是box元素的class等于myClass的元素

選擇集轉移的示例代碼:

<script>
    $(function(){
        var $div = $('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

<div>
    <h2>這是第一個h2標簽</h2>
    <p>這是第一個段落</p>
    <div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
    <h2>這是第二個h2標簽</h2>
    <p>這是第二個段落</p>
</div>

3. 小結

prev() 表示獲取上一個同級元素
prevAll() 表示獲取上面所有同級元素
next() 表示獲取下一個同級元素
nextAll() 表示獲取下面所有同級元素
parent() 表示獲取父元素
children() 表示獲取所有的子元素
siblings() 表示獲取其它同級元素
find("選擇器名稱") 表示獲取指定選擇器的元素

獲取和設置元素內容

學習目標

能夠知道獲取和設置元素內容的操作

1. html方法的使用

jquery中的html方法可以獲取和設置標簽的html內容

示例代碼:

<script>
    $(function(){

        var $div = $("#div1");
        //  獲取標簽的html內容
        var result = $div.html();
        alert(result);
        //  設置標簽的html內容，之前的內容會清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html內容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>

<div id="div1">
    <p>hello</p>
</div>

說明:

給指定標簽追加html內容使用append方法

2. 小結

獲取和設置元素的內容使用: html方法
給指定元素追加html內容使用: append方法

獲取和設置元素屬性

學習目標

能夠知道獲取和設置元素屬性的操作

1. prop方法的使用

之前使用css方法可以給標簽設置樣式屬性，那么設置標簽的其它屬性可以使用prop方法了。

示例代碼:

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 獲取元素屬性
        var sId = $a.prop("id");
        alert(sId);

        // 設置元素屬性
        $a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});

        //  獲取value屬性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 獲取value屬性使用val()方法的簡寫方式
        var sValue = $input.val();
        alert(sValue);
        // 設置value值
        $input.val("222222");
    })
</script>

<a id="link01">這是一個鏈接</a>
<input type="text" id="input01" value="111111">

說明: 獲取value屬性和設置value屬性還可以通過val方法來完成。

2. 小結

獲取和設置元素屬性的操作可以通過prop方法來完成
獲取和設置元素的value屬性可以通過val方法來完成，更加簡單和方便

jQuery事件

學習目標

能夠說出兩個常用的jQuery事件

1. 常用事件

click() 鼠標單擊
blur() 元素失去焦點
focus() 元素獲得焦點
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
ready() DOM加載完成

示例代碼:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

        //  鼠標點擊
        $li.click(function(){             
            // this指的是當前發生事件的對象，但是它是一個原生js對象
            // this.style.background = 'red';

            // $(this) 指的是當前發生事件的jquery對象
            $(this).css({'background':'gold'});
            // 獲取jquery對象的索引值,通過index() 方法
            alert($(this).index());
        });

        //  一般和按鈕配合使用
        $button.click(function(){
            alert($text.val());
        });

        //  獲取焦點
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  失去焦點
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  鼠標進入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  鼠標離開
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="點擊">
</div>

說明:

this指的是當前發生事件的對象，但是它是一個原生js對象
$(this) 指的是當前發生事件的jquery對象

2. 小結

jQuery常用事件:

click() 鼠標單擊
blur() 元素失去焦點
focus() 元素獲得焦點
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
ready() DOM加載完成

事件代理

學習目標

能夠知道事件代理的使用方式

1. 事件代理介紹

事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上，通過判斷事件來源，執行相應的子元素的操作，事件代理首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

事件冒泡代碼:


 <script>
    $(function(){

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>

說明:

當點擊子元素div，它的點擊事件會向它父元素傳遞，也會觸發了父元素的點擊事件，這就是事件冒泡。

2. 事件代理的使用

一般綁定事件的寫法:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件代理的寫法

$(function(){
    $list = $('#list');
    // 父元素ul 來代理 子元素li的點擊事件
    $list.delegate('li', 'click', function() {
        // $(this)表示當前點擊的子元素對象
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

delegate方法參數說明:

delegate(childSelector,event,function)

childSelector: 子元素的選擇器
event: 事件名稱，比如: 'click'
function: 當事件觸發執行的函數

3. 小結

事件代理就是使用父元素來代理子元素的事件，好處是減少事件的綁定次數，提高性能。
使用場景當多個相同的子元素綁定同一個事件，可以使用事件代理。
事件代理使用是使用delegate方法來完成

JavaScript對象

學習目標

能夠知道JavaScript對象有兩種創建方式

1. JavaScript對象的介紹

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數等都可以認為是對象，此外，JavaScript 允許自定義對象，對象可以擁有屬性和方法。

2. JavaScript創建對象操作

創建自定義javascript對象有兩種方式:

通過頂級Object類型來實例化一個對象
通過對象字面量創建一個對象

Object類創建對象的示例代碼:

<script>
    var person = new Object();

    // 添加屬性：
    person.name = 'tom';
    person.age = '25';

    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }

    // 調用屬性和方法：
    alert(person.age);
    person.sayName();
</script>

對象字面量創建對象的示例代碼:

<script>
    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 調用屬性和方法：
    alert(person2.age);
    person2.sayName();
</script>

說明:

調用屬性和方法的操作都是通過點語法的方式來完成，對象的創建推薦使用字面量方式，因為更加簡單。

3. 小結

創建自定義javascript對象有兩種方式:

Object
字面量

json

學習目標

能夠知道json的格式

1. json的介紹

json是 JavaScript Object Notation 的首字母縮寫，翻譯過來就是javascript對象表示法，這里說的json就是類似于javascript對象的字符串，它同時是一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。

2. json的格式

json有兩種格式：

對象格式
數組格式

對象格式:

對象格式的json數據，使用一對大括號({})，大括號里面放入key:value形式的鍵值對，多個鍵值對使用逗號分隔。

對象格式的json數據:

{
    "name":"tom",
    "age":18
}

格式說明:

json中的(key)屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數據錯誤。

數組格式:

數組格式的json數據，使用一對中括號([])，中括號里面的數據使用逗號分隔。

數組格式的json數據:

["tom",18,"programmer"]

實際開發的json格式比較復雜,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}

3. json數據轉換成JavaScript對象

json本質上是字符串，如果在js中操作json數據，可以將json字符串轉化為JavaScript對象。

示例代碼:

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);

// 操作屬性
alert(oPerson.name);
alert(oPerson.age);

4. 小結

json就是一個javascript對象表示法，json本質上是一個字符串。
json有兩種格式：1. 對象格式, 2. 數組格式

ajax

學習目標

能夠知道ajax的作用

1. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術，它可以讓 javascript 發送異步的 http 請求，與后臺通信進行數據的獲取，ajax 最大的優點是實現局部刷新，ajax可以發送http請求，當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。

這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

2. ajax的使用

jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執行ajax請求。

示例代碼:

<script>
    $.ajax({
    // 1.url 請求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 請求方式，默認是'GET'，常用的還有'POST'
    type:'GET',
    // 3.dataType 設置返回的數據格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 設置發送給服務器的數據, 沒有參數不需要設置

    // 5.success 設置請求成功后的回調函數
    success:function (response) {
        console.log(response);    
    },
    // 6.error 設置請求失敗后的回調函數
    error:function () {
        alert("請求失敗,請稍后再試!");
    },
    // 7.async 設置是否異步，默認值是'true'，表示異步，一般不用寫
    async:true
});
</script>

ajax方法的參數說明:

url 請求地址
type 請求方式，默認是'GET'，常用的還有'POST'
dataType 設置返回的數據格式，常用的是'json'格式
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數
error 設置請求失敗后的回調函數
async 設置是否異步，默認值是'true'，表示異步，一般不用寫
同步和異步說明同步是一個ajax請求完成另外一個才可以請求，需要等待上一個ajax請求完成，好比線程同步。異步是多個ajax同時請求，不需要等待其它ajax請求完成，好比線程異步。

ajax的簡寫方式:

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

ajax簡寫方式的示例代碼:

 <script>
    $(function(){
        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("網絡異常");
        });

        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("網絡異常");
        }); 
    });


</script>

$.get和$.post方法的參數說明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

url 請求地址
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數data 請求的結果數據status 請求的狀態信息, 比如: "success"xhr 底層發送http請求XMLHttpRequest對象
dataType 設置返回的數據格式"xml""html""text""json"
error 表示錯誤異常處理func 錯誤異常回調函數

3. 小結

ajax 是發送http請求獲取后臺服務器數據的技術
ajax的簡寫方式可以使用$.get和$.post方法來完成

插電混動汽車，作為純電技術與傳統燃油技術的結合，這項技術旨在為用戶提供更多樣的駕駛選擇與用車場景、還可以提供純電駕駛的體驗。但當電量耗盡，車輛的行駛性能和油耗會發生怎樣的變化？這種差異是否會影響用戶的駕駛體驗和經濟效益呢？結合廣汽本田第五屆極限挑戰中，插電混動旗艦雙子星的成績，分享你的看法？

在新能源車中，插電混動車是一個獨特的存在，他不同于純電動汽車，跟燃油車也有一定的區別，那么插電混動汽車有哪些優點和缺點。

插電混動汽車有三大優點：

1、沒有續航焦慮。

純電動汽車有續航焦慮，只適合在城市中行駛，在高速上比較少見，這是因為高速公路上的充電樁比較少，而且還不發達，純電動車跑高速總是擔心沒電了，跑長途也是如此，車主就會很焦慮。

插電混動汽車一般是兩套動力系統，一套是燃油系列，一套是電動系統，兩套系統可以同時工作，也可以單獨工作。

在城市中行駛，插電混動汽車可以用純電行駛，在高速公路上行駛，插電混動汽車可以用燃油行駛，插電混動汽車同時具備了燃油車的持久性和純電動汽車的便利性，是兩者之間的一個過渡性產品。

插電混動車沒有續航焦慮

插電混動汽車沒有續航焦慮，既可以跑短途，也可以跑長途，還支持外放電，當你在野外自駕游時，你的車還能成為戶外電源，供你煮飯、吃電火鍋、電燒烤，是不是很酷？

2、省油。

跟純電車比，混動車油耗肯定高，但跟燃油車比，混動車油耗明顯低多了。以我自己的哈弗H6 DHT-PHEV為例，在家里裝了充電樁，選擇凌晨充電，一度電5毛，電池容易是19.9度電，充滿電要10塊錢，可以跑100公里。

算起來一公里只要一毛錢，天天在城市上下班開，可以開4~5天，如果不跑長途，可以一直用電，根本不用加油，上次加了200塊錢，幾個月時間還在，根本用不到。

3、環保，動力強，能掛綠牌。

國家的環保標準越來越嚴格，國6B剛剛執行，用不了兩年，國7標準也會到來，這對燃油車來說，是一道緊箍咒，雖然能繼續上路，但有諸多限制，燃油車所能符合的環保標準太低了的話，有些大城市都進不去了。

環保標準嚴了，有些不達標的燃油車都沒法銷售了，也沒法過戶了，影響很大，但是，環保標準并不影響插電混動車，因為插電混動汽車能掛綠牌。

像北上廣深這樣的一線大城市，嚴格控制燃油車上牌，你能買車但上不了牌照，但是電動汽車卻不受影響，在政策引導下，很多消費者把眼光投入了新能源車，混動汽車符合環保要求，能上綠牌，得到很多消費者的喜愛。

插電混動汽車也有三大缺點：

1、電池容量偏小，經常要充電。

一般來說，混動車的電池容量沒有純電動汽車大，續航里程就短，以哈弗H6 DHT-PHEV為例，19.9度電的電池續航里程是110公里，實際續航里程是100公里。

如果你一天開20公里，能跑5天，那就4~5天充一次電，如果你一天開50公里，只能跑2天，那就是1~2天充一次電。

2、更換電池昂貴。

混動汽車是必須要有電池的，沒有電池汽車開不了，這是設計好的系統，當你的電池壽命達到之后，就需要更換電池，更換電池的費用是2~5萬元，這個費用是比較高的，目前新能源車大多還處于使用過程中，更換電池的情況較少，等到將來大規模更換電池時，就知道具體的費用了。

3、車價比同級別車高。

同級別的混動車比燃油車貴了4萬元左右，有人說4萬元可以加多少油，混動車省的油都不夠車價貴，需要注意，新能源車目前沒有購置稅，按落地價算的話，相差不到3萬元左右，然后兩者之間的駕駛感受是完全不同的，開過電動車的人對此深有體會。

----------------------------------------------------------------------------------------------------

接下來就是每文最后的前端小知識分享，因為博主是前端出身，這也算是福利吧，每文最后加個前端的小知識：

今天跟大家說的是如何在html中引入html：

目前已知的方法有三個；

1.配置tomcat來實現，需要后臺進行配合，修改本地和線上的tomcat的配置，才能使用該方式

2.使用jquery的load方式來實現，可行性需要完成測試后商榷（頁面之間數據傳輸是否可行）

3.通過iframe的引入

上有很多在線生成二維碼的功能，但如果我們系統想批量生成一批二維碼，總不能一個一個復制黏貼到第三方網站上生成吧。

因此，就有系統實現生成二維碼的需求，網上找到qrcode這個js組件。

實現方法：

1、引用jquery.qrcode.min.js

2、demo樣例見下面的

3、補充說明，可以根據參數配置不同樣式，但demo只是一個初稿

關鍵代碼：

function createQrCode() {
	$("#qrcode").html("");
	let url = $("#txt_input").val();
	$("#qrcode").qrcode({
	  // 渲染方式有table方式和canvas方式
		render: !!document.createElement('canvas').getContext ? 'canvas' : 'table', 
		width: 150, //默認寬度
		height: 150, //默認高度
		text: url, //二維碼內容
		typeNumber: -1, //計算模式一般默認為-1
		correctLevel: 2, //二維碼糾錯級別
		background: "#ffffff", //背景顏色
		foreground: "#000000" //二維碼顏色
	});
}

輸出效果：

在線咨詢

上一篇：HTML常用全部代碼，你懂，你不想成功都難
下一篇：HTML列表制作講解-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery學習筆記

Query的介紹

1. jQuery的定義

2. jQuery的作用

3. jQuery的優點

4. 小結

jQuery的用法

1. jQuery的引入

2. jQuery的入口函數

3. 小結

jQuery選擇器

1. jQuery選擇器的介紹

2. jQuery選擇器的種類

3. 小結

選擇集過濾

1. 選擇集過濾的介紹

2. 選擇集過濾的操作

3. 小結

選擇集轉移

1. 選擇集轉移介紹

2. 選擇集轉移操作

3. 小結

獲取和設置元素內容

1. html方法的使用

2. 小結

獲取和設置元素屬性

1. prop方法的使用

2. 小結

jQuery事件

1. 常用事件

2. 小結

事件代理

1. 事件代理介紹

2. 事件代理的使用

3. 小結

JavaScript對象

1. JavaScript對象的介紹

2. JavaScript創建對象操作

3. 小結

json

1. json的介紹

2. json的格式

3. json數據轉換成JavaScript對象

4. 小結

ajax

1. ajax的介紹

2. ajax的使用

3. 小結

您的項目需求