怎樣用jquery來設(shè)置cookie

一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。

創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為肇源企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)，肇源網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

jquery.cookie.js 的配置

首先包含jQuery的庫文件，在后面包含 jquery.cookie.js 的庫文件。

script type="text/javascript" src="js/jquery-1.6.2.min.js"/script

script type="text/javascript" src="js/jquery.cookie.js"/script

使用方法

1.新添加一個會話 cookie：

$.cookie('the_cookie', 'the_value')

注：當沒有指明 cookie有效時間時，所創(chuàng)建的cookie有效期默認到用戶關(guān)閉瀏覽器為止，所以被稱為

“會話cookie（session cookie）”。

2.創(chuàng)建一個cookie并設(shè)置有效時間為 7天:

$.cookie('the_cookie', 'the_value', { expires: 7 })

注：當指明了cookie有效時間時，所創(chuàng)建的cookie被稱為“持久 cookie （persistent cookie）”。

3.創(chuàng)建一個cookie并設(shè)置 cookie的有效路徑：

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' })

注：在默認情況下，只有設(shè)置 cookie的網(wǎng)頁才能讀取該 cookie。如果想讓一個頁面讀取另一個頁面設(shè)

置的cookie，必須設(shè)置cookie的路徑。cookie的路徑用于設(shè)置能夠讀取 cookie的頂級目錄。將這

個路徑設(shè)置為網(wǎng)站的根目錄，可以讓所有網(wǎng)頁都能互相讀取 cookie （一般不要這樣設(shè)置，防止出現(xiàn)沖突） 。

4.讀取cookie：

$.cookie('the_cookie'); // cookie存在 = 'the_value'

$.cookie('not_existing'); // cookie不存在 = null

5.刪除cookie，通過傳遞null作為cookie的值即可：

$.cookie('the_cookie', null)

----------相關(guān)參數(shù)的解釋---------------

1).expires: 365

定義cookie的有效時間，值可以是一個數(shù)字（從創(chuàng)建cookie時算起，以天為單位）或一個Date 對

象。如果省略，那么創(chuàng)建的cookie是會話cookie，將在用戶退出瀏覽器時被刪除。

2).path: '/'

默認情況：只有設(shè)置cookie的網(wǎng)頁才能讀取該cookie。

定義cookie的有效路徑。默認情況下， 該參數(shù)的值為創(chuàng)建 cookie 的網(wǎng)頁所在路徑（標準瀏覽器的行為） 。

如果你想在整個網(wǎng)站中訪問這個cookie需要這樣設(shè)置有效路徑：path: '/'。如果你想刪除一個定義

了有效路徑的 cookie，你需要在調(diào)用函數(shù)時包含這個路徑:$.cookie('the_cookie', null,

{ path: '/' });。 domain: 'example.com'

默認值：創(chuàng)建 cookie的網(wǎng)頁所擁有的域名。

3).secure: true

默認值：false。如果為true，cookie的傳輸需要使用安全協(xié)議（HTTPS）。

4).raw: true

默認值：false。

默認情況下，讀取和寫入 cookie 的時候自動進行編碼和解碼（使用encodeURIComponent 編碼，

decodeURIComponent 解碼）。要關(guān)閉這個功能設(shè)置 raw: true 即可。

JQuery如何配置使用

Jquery是一個優(yōu)秀的Javascript框架。它是輕量級的js庫 ，兼容CSS3，適用于各種瀏覽器。網(wǎng)頁開發(fā)人員值得掌握的一個框架,配置過程非常簡單.

Jquery.com網(wǎng)站下載jquery.js組件文件，并放到html文件能訪問到的相對位置上。

然后在需要使用的文件里加入下面引用即可

script src="相對位置/jquery.min.js"/script

script src="custom-mobile.js"/script

script src="jquery-mobile.min.js"/script

之后就能使用Jquery帶來的便利性功能了，如下：

$(document).bind("mobileinit", function(){

//$.mobile.ajaxEnabled = false;

$.extend($.mobile, {

ajaxEnabled: false

});

});

$(function(){

$("body").live('swiperight', function() {

$('#next').click();

});

});

這里還想推薦《使用 jQuery Mobile 與 HTML5 開發(fā)移動 Web App》

如何修改Jquery Mobile 設(shè)置默認選項

以下的默認配置可以通過$.mobile對象重新配置

自定義命名空間s (字符, 默認: ""):

在jQuery Mobile中，甚至可以自定義象HTML5中的data-attribute等系列屬性，比如data-role等。這通過自定義命名空間即可實現(xiàn)。比 如可以實現(xiàn)自定義一個名字，變成data-自定義名-role這樣的形式。按照“data-屬性”格式安排的命名空間，例如：data-role,可以設(shè) 置為任何東西，默認為空字符串。如果你包含一個面包屑的話用起來會比較明晰，比如mynamespace-",會映射到 data-mynamespace-foo="...".

這可以通過$.mobile對象中增加ns屬性來指定，如下代碼：

$(document).bind("mobileinit", function() {

$.mobile.ns = "my-custom-ns";

});

通過上面的代碼，建立了一個data-my-customer-ns-role的屬性，而不是傳統(tǒng)jQuery Mobile中指定的data-role。通過設(shè)置自定義的命名空間，可以方便開發(fā)者在CSS選擇器中進行指定，同時如果要自定義mobile小插件的主 題，則也必須使用自定義命名空間，以示區(qū)別。

注意：如果你使用了data-命名空間，你需要在主題的css中手動的更新/覆蓋一個選擇器。按照以下格式把命名空間并并入到命名空間中。

.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...

頁面初始化

autoInitializePage(布爾值,默認: true)

當DOM加載完成時，JQM框架會自動調(diào)用$.mobile.initializePage方法。如果設(shè)為False，頁面page則不會自動初始化，在視覺上就會是隱藏的，直到 $.mobile.initializePage 方法被手動調(diào)用。

jQuery Mobile提供了一個叫autoInitializePage的屬性，這個屬性表示頁面是否應(yīng)該初始化，其默認值為true。然而，如果是繼承擴展 了$.mobile對象，開發(fā)者則可以將該值設(shè)置為false,并且在稍晚的時候?qū)撁娉跏蓟M行設(shè)置。下面的代碼中，演示了當其他腳本在運行時，如何暫 時延遲頁面的初始化。如果有大量的客戶端腳本運行，則一個很好的建議方法是延遲頁面的初始化，直到DOM完成加載客戶端腳本。

!DOCTYPE HTML

html

head

titleUnderstanding the jQuery Mobile API/title

script type="text/java script" src="jquery.js"/script

script type="text/java script"

$(document).bind("mobileinit", function() {

$.mobile.autoInitializePage = false;

});

/script

script type="text/java script" src="jquery.mobile.js"/script

/head

body

div data-role="page"

div data-role="content"

ul data-role="listview" id="my-list"/ul

/div

/div

script type="text/java script"

$('#my-list').html('lia href="page-2.html"Link to another page/a/li');

$.mobile.autoInitializePage = true;

/script

/body

/html

自定義子頁的URL鍵

subPageUrlKey (字符串，默認: "ui-page")

當在jQuery Mobile中引用子頁時，默認使用的是ui-page做為KEY標識。開發(fā)者可以通過$.mobile對象的subPageUrlKey去重新設(shè)置，比 如如果定義了subPageUrlKey為my-page,則默認的子頁引用將從web-page.htmlui-page=value改為 web-page.htmlmy-page=value,這樣做的一個好處是開發(fā)者可讓url更友善更容易維護。

url參數(shù)用來指向組件產(chǎn)生的子頁面（比如生成的嵌套的列表）。會被轉(zhuǎn)義為example.htmlui-page=subpageIdentifier。Jquery Mobile會把 ui-page=之前的部分用來向子頁面的url地址發(fā)出ajax請求。

設(shè)置歷史記錄

nonHistorySelectors (字符串, 默認: "dialog")

對于帶有 data-rel 屬性的a標簽鏈接，或 data-role 屬性的頁面，如果選擇器與之匹配，則他們不會在歷史記錄中被追蹤 (即它們不會在location.hash中被更新也不會被瀏覽器歷史所標記).

設(shè)置當前激活頁面的樣式

activePageClass (字符串, 默認: "ui-page-active")：給當前頁面(包括轉(zhuǎn)場中的) 分配class。

當使用了jQuery Mobile后，默認當前激活頁面中的ui-page元素都會使用框架默認的樣式中定義的ui-page-active，如果要對其進行修改，可以設(shè)置$.mobile對象中的activePageClass屬性，比如：

$(document).bind("mobileinit", function(){

$.mobile.activePageClass="ui-page-custom";

});

其中ui-page-custome則為用戶自定義的樣式。

設(shè)置當前激活頁面的按鈕

activeBtnClass (字符串, 默認: "ui-page-active")：給活動狀態(tài)的按鈕分配class值，該class值必須在css框架中存。

設(shè)置ajax

ajaxEnabled (布爾值, 默認: true)：Jquery Mobile 會自動通過ajax處理鏈接點擊以及表單提交。如果無法處理，url hash 監(jiān)聽將會被禁用，url也會像常規(guī)那樣發(fā)出HTTP 請求.

ajaxLinksEnabled (布爾值, 默認: true)：可行時，Jquery Mobile 就會自動通過ajax處理鏈接的點擊。

ajaxFormsEnabled (布爾值, 默認: true)：可行時，Jquery Mobile 就會自動通過ajax處理表單的提交。

設(shè)置哈希值

hashListeningEnabled (布爾值, 默認: true)

Jquery Mobile 會自動監(jiān)聽與處理 location.hash的改變。禁用它會防止Jquery Mobile處理 location.hash的改變。使你可以自己處理他們，或者在文檔中用完整的鏈接地址指到一個特定的id值上。

設(shè)置默認的轉(zhuǎn)場效果

defaultTransition (字符串, 默認: 'slide')：設(shè)定使用AJAX進行頁面轉(zhuǎn)場的默認的轉(zhuǎn)場效果。設(shè)為"none"的話則默認沒有轉(zhuǎn)場的動畫。

默認的jQuery Mobile的頁面和對話框的效果都是通過ajax實現(xiàn)的。默認的頁面切換效果是幻燈片切換，默認的對話框出現(xiàn)的效果是彈出。如果需要改變這些效果的話 ，同樣是如下代碼所示，設(shè)置$.mobile對象的defaultPageTransition和defaultDialogTransition屬性就 可以了。

　$(document).bind("mobileinit", function() {

$.mobile.defaultPageTransition = "fade";

$.mobile.defaultDialogTransition = "fade";

　});

jQuery Mobile提供了6種效果供用戶選擇，分別是：slide, slideup, slidedown, pop, fade, 和flip，用戶可以按照上面的方法進行設(shè)置。

設(shè)置加載時默認信息

loadingMessage (字符串, 默認: "loading")：設(shè)置頁面加載時顯示的文本. 如果設(shè)置為false，將不會顯示任何文字。

加載信息會在加載頁面時顯示給用戶看，要更改這個設(shè)置，只需要修改$.mobile對象的loadingMessage屬性即可，如下：

$(document).bind("mobileinit", function() {

$.mobile.loadingMessage = "Please wait";

});

設(shè)置加載時錯誤信息

pageLoadErrorMessage (字符串, 默認: "Error Loading Page")：通過ajax加載頁面失敗時出現(xiàn)的文本信息。

$(document).bind("mobileinit", function() {

$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';

});

設(shè)置頁面的最小的卷動距離

minScrollBack (字符串,默認:'150')：返回一個頁面的最小的卷動距離。

gradeA (返回一個布爾值, 默認: 返回$.support.mediaquery的值)：瀏覽器必須符合所有支持的條件才會返回 true.

vue 全局引入 jquery

第一步、在項目中npm安裝JQ

npm install jquery --save

第二步、檢查是否安裝成功

? ? ? ? ? ?在package.json中的dependencies查看是否含有jquery

第三步、配置JQ

? ? ? ? ? ?在vue.config.js中頂部寫入?const webpack = require('webpack')

? ? ? ? ? ?寫入后在configureWebpack中加入

第四步、重啟項目，引入成功

網(wǎng)站標題：jquery配置,jquery 入門
當前地址：http://chinadenli.net/article5/dsggooi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、移動網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、標簽優(yōu)化、ChatGPT、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)