成都创新互联网站制作重庆分公司

jquery配置,jquery 入门

怎样用jquery来设置cookie

一个轻量级的cookie 插件,可以读取、写入、删除 cookie。

创新互联长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为肇源企业提供专业的成都做网站、网站建设、外贸营销网站建设肇源网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

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有效时间时,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为

“会话cookie(session cookie)”。

2.创建一个cookie并设置有效时间为 7天:

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

注:当指明了cookie有效时间时,所创建的cookie被称为“持久 cookie (persistent cookie)”。

3.创建一个cookie并设置 cookie的有效路径:

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

注:在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设

置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这

个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突) 。

4.读取cookie:

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

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

5.删除cookie,通过传递null作为cookie的值即可:

$.cookie('the_cookie', null)

----------相关参数的解释---------------

1).expires: 365

定义cookie的有效时间,值可以是一个数字(从创建cookie时算起,以天为单位)或一个Date 对

象。如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。

2).path: '/'

默认情况:只有设置cookie的网页才能读取该cookie。

定义cookie的有效路径。默认情况下, 该参数的值为创建 cookie 的网页所在路径(标准浏览器的行为) 。

如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: '/'。如果你想删除一个定义

了有效路径的 cookie,你需要在调用函数时包含这个路径:$.cookie('the_cookie', null,

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

默认值:创建 cookie的网页所拥有的域名。

3).secure: true

默认值:false。如果为true,cookie的传输需要使用安全协议(HTTPS)。

4).raw: true

默认值:false。

默认情况下,读取和写入 cookie 的时候自动进行编码和解码(使用encodeURIComponent 编码,

decodeURIComponent 解码)。要关闭这个功能设置 raw: true 即可。

JQuery如何配置使用

Jquery是一个优秀的Javascript框架。它是轻量级的js库 ,兼容CSS3,适用于各种浏览器。网页开发人员值得掌握的一个框架,配置过程非常简单.

Jquery.com网站下载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 开发移动 Web App》

如何修改Jquery Mobile 设置默认选项

以下的默认配置可以通过$.mobile对象重新配置

自定义命名空间s (字符, 默认: ""):

在jQuery Mobile中,甚至可以自定义象HTML5中的data-attribute等系列属性,比如data-role等。这通过自定义命名空间即可实现。比 如可以实现自定义一个名字,变成data-自定义名-role这样的形式。按照“data-属性”格式安排的命名空间,例如:data-role,可以设 置为任何东西,默认为空字符串。如果你包含一个面包屑的话用起来会比较明晰,比如mynamespace-",会映射到 data-mynamespace-foo="...".

这可以通过$.mobile对象中增加ns属性来指定,如下代码:

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

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

});

通过上面的代码,建立了一个data-my-customer-ns-role的属性,而不是传统jQuery Mobile中指定的data-role。通过设置自定义的命名空间,可以方便开发者在CSS选择器中进行指定,同时如果要自定义mobile小插件的主 题,则也必须使用自定义命名空间,以示区别。

注意:如果你使用了data-命名空间,你需要在主题的css中手动的更新/覆盖一个选择器。按照以下格式把命名空间并并入到命名空间中。

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

页面初始化

autoInitializePage(布尔值,默认: true)

当DOM加载完成时,JQM框架会自动调用$.mobile.initializePage方法。如果设为False,页面page则不会自动初始化,在视觉上就会是隐藏的,直到 $.mobile.initializePage 方法被手动调用。

jQuery Mobile提供了一个叫autoInitializePage的属性,这个属性表示页面是否应该初始化,其默认值为true。然而,如果是继承扩展 了$.mobile对象,开发者则可以将该值设置为false,并且在稍晚的时候对页面初始化进行设置。下面的代码中,演示了当其他脚本在运行时,如何暂 时延迟页面的初始化。如果有大量的客户端脚本运行,则一个很好的建议方法是延迟页面的初始化,直到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标识。开发者可以通过$.mobile对象的subPageUrlKey去重新设置,比 如如果定义了subPageUrlKey为my-page,则默认的子页引用将从web-page.htmlui-page=value改为 web-page.htmlmy-page=value,这样做的一个好处是开发者可让url更友善更容易维护。

url参数用来指向组件产生的子页面(比如生成的嵌套的列表)。会被转义为example.htmlui-page=subpageIdentifier。Jquery Mobile会把 ui-page=之前的部分用来向子页面的url地址发出ajax请求。

设置历史记录

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

对于带有 data-rel 属性的a标签链接,或 data-role 属性的页面,如果选择器与之匹配,则他们不会在历史记录中被追踪 (即它们不会在location.hash中被更新也不会被浏览器历史所标记).

设置当前激活页面的样式

activePageClass (字符串, 默认: "ui-page-active"):给当前页面(包括转场中的) 分配class。

当使用了jQuery Mobile后,默认当前激活页面中的ui-page元素都会使用框架默认的样式中定义的ui-page-active,如果要对其进行修改,可以设置$.mobile对象中的activePageClass属性,比如:

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

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

});

其中ui-page-custome则为用户自定义的样式。

设置当前激活页面的按钮

activeBtnClass (字符串, 默认: "ui-page-active"):给活动状态的按钮分配class值,该class值必须在css框架中存。

设置ajax

ajaxEnabled (布尔值, 默认: true):Jquery Mobile 会自动通过ajax处理链接点击以及表单提交。如果无法处理,url hash 监听将会被禁用,url也会像常规那样发出HTTP 请求.

ajaxLinksEnabled (布尔值, 默认: true):可行时,Jquery Mobile 就会自动通过ajax处理链接的点击。

ajaxFormsEnabled (布尔值, 默认: true):可行时,Jquery Mobile 就会自动通过ajax处理表单的提交。

设置哈希值

hashListeningEnabled (布尔值, 默认: true)

Jquery Mobile 会自动监听与处理 location.hash的改变。禁用它会防止Jquery Mobile处理 location.hash的改变。使你可以自己处理他们,或者在文档中用完整的链接地址指到一个特定的id值上。

设置默认的转场效果

defaultTransition (字符串, 默认: 'slide'):设定使用AJAX进行页面转场的默认的转场效果。设为"none"的话则默认没有转场的动画。

默认的jQuery Mobile的页面和对话框的效果都是通过ajax实现的。默认的页面切换效果是幻灯片切换,默认的对话框出现的效果是弹出。如果需要改变这些效果的话 ,同样是如下代码所示,设置$.mobile对象的defaultPageTransition和defaultDialogTransition属性就 可以了。

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

$.mobile.defaultPageTransition = "fade";

$.mobile.defaultDialogTransition = "fade";

 });

jQuery Mobile提供了6种效果供用户选择,分别是:slide, slideup, slidedown, pop, fade, 和flip,用户可以按照上面的方法进行设置。

设置加载时默认信息

loadingMessage (字符串, 默认: "loading"):设置页面加载时显示的文本. 如果设置为false,将不会显示任何文字。

加载信息会在加载页面时显示给用户看,要更改这个设置,只需要修改$.mobile对象的loadingMessage属性即可,如下:

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

$.mobile.loadingMessage = "Please wait";

});

设置加载时错误信息

pageLoadErrorMessage (字符串, 默认: "Error Loading Page"):通过ajax加载页面失败时出现的文本信息。

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

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

});

设置页面的最小的卷动距离

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中加入

第四步、重启项目,引入成功


网页名称:jquery配置,jquery 入门
网站地址:http://cxhlcq.com/article/dsggooi.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部