-专注于互联网、网络技术、网络工程、网络营销SEO、搜索引擎、社会化网络、IT技术、网络编程、网络安全、服务器管理、网站开发、移动互联网软件应用等领域的原创IT科技博客,欢迎喜欢互联网的朋友一起交流!

$.ajax()方法详解

jquery中的ajax方法参数总是记不住,这里记录一下。

JavaScript、Dom、jQuery基础

JavaScript、Dom、jQuery基础讲解,读者可以快速掌握JavaScript基本语法,dom结构,jquery基本应用。本节内容: JavaScript基础, Dom编程, jQeury

引入多个js文件jQuery的$命名冲突原因及解决办法

   引入多个js文件jQuery的$命名冲突原因及解决办法 在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突,因为调用js库的js语法中的$不清楚到底调用哪个js库,导致其中一个js库调用效果失效。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。 

JavaScript判断是否移动设备,哪种移动设备

1、原生JavaScript判断是否移动设备
function isMobile(){
if (typeof this._isMobile === 'boolean'){
return this._isMobile;
}
var screenWidth = this.getScreenWidth();
var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport;
var fixViewPortsExperimentRunning = fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase() === "new");
if(!fixViewPortsExperiment){
if(!this.isAppleMobileDevice()){
screenWidth = screenWidth/window.devicePixelRatio;
}
}
var isMobileScreenSize = screenWidth < 600;
var isMobileUserAgent = false;
this._isMobile = isMobileScreenSize && this.isTouchScreen();
return this._isMobile;
}

2、原生JavaScript判断是否移动设备访问
function isMobileUserAgent(){
return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
}

3、原生JavaScript判断是否苹果移动设备访问
function isAppleMobileDevice(){
return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase()));
}

4、原生JavaScript判断是否安卓移动设备访问
function isAndroidMobileDevice(){
return (/android/i.test(navigator.userAgent.toLowerCase()));
}

jquery 点击切换样式

$("#smenu").find("li").click(function(){
$(this).parent().children().siblings().removeClass("bline"); //遍历删除样式
$(this).addClass("bline");
//var val = "index_content.php?id="+$(this).attr("val");
// $("#iframe1",parent.document.body).attr("src",val);
});

#smenu下 li 菜单样式切换

ajax请求页如何真正返回json数据

$r = $db->query("SELECT title, thumb ,description , contentid FROM ".DB_PRE."content WHERE catid =2165 AND status = 99 AND thumb !='' ORDER BY contentid DESC limit 0,2");
/*while($s = $db->fetch_array($r))
{
$data[]=array(
'contentid'=>$s['contentid'],
'thumb'=>$s['thumb'],
'title'=>$s['title'],
'description'=>$s['description']
);
}
echo json_encode($data); 这个方法没有真正将数据转化成json ,而且无法输出中文 */

//正确格式如下

$json = '';
while (!!$row = mysql_fetch_array($r, MYSQL_ASSOC)) {
foreach ( $row as $key => $value ) {
$row[$key] = urlencode(str_replace("\n","", $value));
}
$json .= urldecode(json_encode($row)).',';
}

echo '['.substr($json, 0, strlen($json) - 1).']';

mysql_close();

jQuery+PHP实现浏览更多内容

基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页。其实就是Ajax分页效果。

XHTML

首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参数配置的功能。

  1. <script type="text/javascript" src="jquery.js"></script>

  2. <script type="text/javascript" src="jquery.more.js"></script>


xhtml结构如下:

  1. <div id="more">

  2.      <div class="single_item">

  3.            <div class="element_head">

  4.                <div class="date"></div>

  5.                <div class="author"></div>

  6.             </div>

  7.             <div class="content"></div>

  8.      </div>

  9.      <a href="javascript:;" class="get_more">::点击加载更多内容::</a>

  10. </div>


值得一提的是,样式single_item,get_more是和jquery.more.js插件关联的,你也可以取另外的class名字,但是在配置的时候一定要将对应的class写上。

CSS

  1. #more{margin:10px auto;width: 560px;  border: 1px solid #999;}

  2. .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}

  3. .author{position: absolute; left: 0px; font-weight:bold; color:#39f}

  4. .date{position: absolute; right: 0px; color:#999}

  5. .content{line-height:20px; word-break: break-all;}

  6. .element_head{width: 100%; position: relative; height: 20px;}

  7. .get_more{margin:10px; text-align:center}

  8. .more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif)

  9.  no-repeat;}


以上CSS是本例中定制的,当然,大家可以在实际项目中定制不同的样式。注意,more_loader_spinner是定义加载动画图片的。

jQuery

  1. $(function(){

  2.     $('#more').more({'address': 'data.php'})

  3. });


使用很简单,配置了后台地址:data.php,来看data.php是怎么处理数据的。

jQuery Email邮箱自动补全

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>输入Email相关字符自动提示Email地址</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
body
{
margin:0px;
padding:0px;
font-family:Arial;
font-size:12px;
padding:10px;
}
#myemail, .newemail, .newemailtitle{
cursor:default;
line-height:18px;
}
</style>
</head>
<body>
Email <input id="me" type="text" value="" style="width:150px; height:18px; line-height:18px; border:1px solid #999;">
<script type="text/javascript">
var nowid;
var totalid;
var can1press = false;
var emailafter;
var emailbefor;
$(document).ready(function(){
$("#me").focus(function(){ //文本框获得焦点,插入Email提示层
$("#myemail").remove();
$(this).after("<div id='myemail' style='width:170px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:"+$(this).get(0).offsetLeft+"px; top:"+($(this).get(0).offsetTop+$(this).height()+2)+"px; border:1px solid #ccc;z-index:5px; '></div>");
if($("#myemail").html()){
$("#myemail").css("display","block");
$(".newemail").css("width",$("#myemail").width());
can1press = true;
} else {
$("#myemail").css("display","none");
can1press = false;
}
}).keyup(function(){ //文本框输入文字时,显示Email提示层和常用Email
var press = $("#me").val();
if (press!="" || press!=null){
var emailtxt = "";
var emailvar = new Array("@163.com","@126.com","@yahoo.com","@qq.com","@sina.com","@gmail.com","@hotmail.com","@foxmail.com");
totalid = emailvar.length;
var emailmy = "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font></div>";
if(!(isEmail(press))){
for(var i=0; i<emailvar.length; i++) {
emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font>" + emailvar[i] + "</div>"
}

jquery1.8中文手册

点击此处下载手册

jquery1.8中文手册在线

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

Jquery+PHP摇圣诞树抽奖效果示例源码

这个抽奖效果是在网易理财那里看到的,圣诞节时用这个抽奖效果还不错吧?在这里分享一下,希望有人能喜欢。另外,还有很多其他抽奖效果,有兴趣的话,可以到处去看看。
附示例JS代码、示例PHP代码打包下载。

演示地址:Jquery+PHP摇圣诞树抽奖效果示例源码

打包下载
«1234»
搜索
网站分类
最近发表
文章归档

技术支持TTF的家园

Copyright www.ttfde.org. All Rights Reserved.站点统计 Design by TTF的家园