jquery网站项目代码(jQuery代码)
jQuery实现的网页左侧在线客服效果代码
本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考,具体如下:
这是又一个网页上的在线客服代码,不错,可以用一下哦。与其它客服不一样的地方呢?无非是在网页左侧滑出,可对客服类型分组,又多了一个功能,哈哈。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
!DOCTYPE
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
title网页左侧浮动jquery在线QQ客服代码/title
style
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/*
QQbox
*/
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px
0;position:fixed;}
*html,
*html
body{background-image:url(about:blank);background-attachment:fixed;}
*html
.QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox
.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox
.Qlist{float:left;width:410px;background:url(images/bj01.png)
no-repeat;background-position:1px
0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox
.Qlist
.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox
.Qlist
.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox
.Qlist
.con
ul
li{height:31px;list-style:none;margin-left:35px;}
.QQbox
.Qlist
.con
ul
li
a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)
no-repeat;margin-top:-45px;margin-left:220px;}
/style
script
type="text/javascript"
src="jquery-1.6.2.min.js"/script
/head
body
div
id="divQQbox"
class="QQbox"
div
id="divOnline"
class="Qlist"
div
class="OnlineLeft"
div
class="con"
ul
li售前咨询a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li网站建设a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li网站优化a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li整合营销a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li售后服务a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
/ul
/div
/div
div
class="OnlineBtn"
/div
/div
/div
script
type="text/javascript"
$(function(){
//建站热线展开效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false);
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-276},149);
}
)
});
/script
/body
/html
希望本文所述对大家jQuery程序设计有所帮助。
求一个JAVAscript(Jquery)代码,实现的目标:
你这个需求有三种解决办法:使用框架frameset、使用iFrame、使用div+ajax,你是想使用最后一个,用jquery可以实现(或者用原生js自己写):
div id="newdiv"/div
script
$( "#newdiv" ).load( "test.html", function( response, status, xhr ) {
$('#newdiv').html(response);
});
统计当前网页被访问次数的Jquery代码:
最简单的办法:
script?type="text/javascript"
if?(localStorage.pagecount){????localStorage.pagecount=Number(localStorage.pagecount)?+1;}else{????localStorage.pagecount=1;}document.write("访问数:?"?+?localStorage.pagecount?+?"?time(s).");/script
Jquery?
jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。
简要介绍
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src=""/script
这个是jquery官方最新的地址。可用在自己网站里加个这个,就能使用jquery了。?但仍然建议下载到本地服务器上。
特点
动态特效
AJAX
通过插件来扩展
方便的工具 - 例如浏览器版本判断
渐进增强
链式调用
多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)
工厂函数
在编写js库代码时候,你一定经常和“$”美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会发现它的美丽:
代码
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#,好,看看下面的用法:
代码
$("div p");?// (1)
$("div.container");?// (2)
$("div #msg");?// (3)
$("table a",context);?// (4)
在prototype里看过这样的写法吗?第一行代码得到所有div标签下的p元素。第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。第四行代码得到context为上下文的table里面所有的链接元素。
如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。
遍历函数
jquery提供了很多遍历的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是jquery对象。使一个Dom对象成为一个jquery对象很简单,通过下面一些方式(只是一部分):
代码
var a = $("#cid");
var b = $("phello/p");
var c = document.createElement("table");
var tb = $(c);
代替标签
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:
$(document).ready(function(){
alert"hello");
});(1)
lt;body "alert'hello');"(2)
lt;body "alert'hello');"这里的alert'hello');要等到页面全部加载完毕才执行,注意是全部加载,包括dom,图片等其它资源。
而$(document).ready(function(){
alert"hello");
});(1)
当dom加载完就可以执行了。
代码1同时做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。
当使用jquery时,推荐使用代码1。
$(document).ready(function(){fn});?可以用?$(function(){fn});代替
如:
$(function(){
alert"hello");
});
事件机制
我们大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写 "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
代码
$(document).ready(function()
{
$("#clear").click(function(){
alert"i am about to clear the table");
});
$("form[12]").submit(validate);
});
function validate(){
//do some form validation
}
实现
代码
$("selector").load(url,data,function(response,status,xhr))
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url,?data,?success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单。
渐入淡出
代码
$("#msg").show("fast");
$("#msg").hide("slow");
$("#msg").fadeIn();
$("#msg").fadeOut();
没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。
关于jQuery 代码的书写形式
1、定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,不要定义成如下:
??$loading?=?$('#loading');?//这个是全局定义
2、使用一个var来定义变量
如果使用多个变量的话,如下方式定义:
var?page?=?0,
??$loading?=?$('#loading'),
??$body?=?$('body');
不要给每一个变量都添加一个var关键字
3、定义jQuery变量
申明或者定义变量的时候,请记住如果定义的是jQuery的变量,添加一个$符号到变量前,如下:
var$loading?=?$('#loading');
这里定义成这样的好处在于, 可以有效的提示自己或者其它阅读 代码的用户,这是一个jQuery的变量
4、DOM操作请务必记住缓存(cache)
在jQuery代码开发中,常常需要操作DOM,DOM操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jQuery:
$('#loading').html('完毕');
$('#loading').fadeOut();
代码没有任何问题, 也可以正常运行出结果,但是这里注意 每次定义并且调用$('#loading')的时候,都实际创建了一个新的变量,如果 需要重用的话,记住一定要定义到一个变量里,这样可以有效的缓存变量内容,如下:
var?$loading?=?$('#loading');
$loading.html('完毕');$loading.fadeOut();
这样性能会更好。
5、使用链式操作
上面那个例子,可以写的更简洁一些:
var?$loading?=?$('#loading');
$loading.html('完毕').fadeOut();
6、精简jQuery代码
尽量把代码都整合到一起,请勿这样编码:
//?!!反面人物$button.click(function(){
????$target.css('width','50%');
????$target.css('border','1px?solid?#202020');
????$target.css('color','#fff');
});
应该这样书写:
$button.click(function(){
????$target.css({'width':'50%','border':'1px?solid?#202020','color':'#fff'});
});
7、避免使用全局类型的选择器
请勿如下方式书写:
????$('.something??*');
这样书写更好:
????$('.something').children();
8、不要叠加多个ID
请勿如下书写:
????$('#something?#children');
这样书写更好:
????$('#children');
9、多用逻辑判断||或者来提速
请勿如下书写:
if(!$something)?{
????$something?=?$('#something?');
}
这样书写性能更好:
$something=?$something||?$('#something');
10、尽量使用更少的代码
????与其这样书写:if(string.length??0){..}
不如这样书写:if(string.length){..}
11、尽量使用 .on方法
如果 使用比较新版本的jQuery类库的话,请使用.on,其它任何方法都是最终使用.on来实现的
12、尽量使用最新版本的jQuery
最新版本的jQuery拥有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己针对实际情况选择
13、尽量使用原生的Javascript
如果使用原生的Javascript也可以实现jQuery提供的功能的话,推荐使用原生的javascript来实现
求一个jquery效果代码
1、jquery实现
div class="box" style="width: 100px;height: 80px;background: #999;"/div
$("div.box").click(function() {
var scale = 1.5; // 放大的倍数,0-1为缩小,大于1为放大
var speed = 500; // 动画执行的时间,单位:ms
var finalWidth = $(this).width() * scale;// 最终宽度
var finalHeight = $(this).height() * scale;// 最终高度
var mt = parseInt($(this).css("margin-top") == "auto" ? 0 : $(this).css("margin-top"));
var ml = parseInt($(this).css("margin-left") == "auto" ? 0 : $(this).css("margin-left"));
var wdv = (finalWidth - $(this).width()) / 2;
var hdv = (finalHeight - $(this).height()) / 2;
var finalMT = hdv 0 ? mt - hdv : mt + hdv;
var finalML = wdv 0 ? ml - wdv : ml + wdv;
// 动画显示
$(this).animate({
width : finalWidth,
height : finalHeight,
marginTop : finalMT,
marginLeft : finalML
}, speed);
});
// 亲自在chrome和IE8中试过,无问题,如果你放大的对象拥有position属性也不会有影响
2、如果你的浏览器支持css3,可以用transform实现,具体如下:
$("div.box").click(function() {
$(this).css({
"transform" : scale(1.5), // 1.5为放大的倍数
"-webkit-transform" : scale(1.5),
"-moz-transform" : scale(1.5)
});
});
当然你也可以事先在样式表中定义好样式,然后用addClass()追加即可。
JQuery的几种常用代码
1、$(document).ready(function(){
});
2、$("#id").val()
3、$("#id").click(function(){})
4、$().show();hide();
5、$.getJSON(RUL,{},function(data));