jquery网页开发实例精解源代码（web项目jquery实例）

今天给各位分享jquery网页开发实例精解源代码的知识，其中也会对web项目jquery实例进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、JQuery解析XML数据的几个简单实例
• 2、jQuery实现的网页左侧在线客服效果代码
• 3、《PHP与jQuery开发实例》pdf下载在线阅读全文，求百度网盘云资源
• 4、jQuery中ajax - get() 方法实例详解
• 5、jquery 实现回车登录详解及实例代码

JQuery解析XML数据的几个简单实例

用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案：

script

type="text/javascript"

$(document).ready(function()

{

$.ajax({

url:

'',

dataType:

'xml',

success:

function(data){

//console.log(data);

$(data).find("channel").find("item").each(function(index,

ele)

{

var

titles

=

$(ele).find("title").text();

var

links

=

$(ele).find("link").text();

console.log(titles+'-----');

$("#noticecon").find('ol').append('lia

href="'+links+'"'+titles+'/a/li');

});

}

});

})

/script

div

id="noticecon"

ol

/ol

/div

第二种方案：

script

type="text/javascript"

$.get("",

function(data){

$(data).find('channel').find('item').each(function(index,

ele){

var

titles

=

$(ele).find('title').text();

var

links

=

$(ele).find('link').text();

$("#noticecon").find('ol').append('lia

href="'+links+'"'+titles+'/a/li');

})

});

/script

div

id="noticecon"

ol

/ol

/div

一般步骤如下：

1.

读取xml文件

$.get("xmlfile.xml",function(xml){

//xml即为可以读取使用的内容，具体读取见第2点

});

2.

读取xml内容

如果读取的xml是来于xml文件，这结合上面的那点，处理如下：

$.get("xmlfile.xml",function(xml){

$(xml).find("item").length;

});

如果读取的是xml字符串，则要注意一点，xml字符串的必然被"xml"和"/xml"包围才可以被解析

$("xmlrootitem/item/root/xml").find("item").length;

解析xml内容：

示例xml：

?xml

version="1.0"

encoding="utf-8"

?

fields

field

Name="Name1"

fieldnamedsname/fieldname

datatype字符/datatype

/field

field

Name="Name2"

fieldnamedstype/fieldname

datatype字符/datatype

/field

/fields

以下是解析示例代码：

$(xml).find("field").each(function()

{

var

field

=

$(this);

var

fName

=

field.attr("Name");//读取节点属性

var

dataType

=

field.find("datatype").text();//读取子节点的值

});

以上这篇JQuery解析XML数据的几个简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

jQuery实现的网页左侧在线客服效果代码

本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下：

这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

!DOCTYPE

html

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程序设计有所帮助。

《PHP与jQuery开发实例》pdf下载在线阅读全文，求百度网盘云资源

《PHP与jQuery开发实例》百度网盘pdf最新全集下载:

链接:

?pwd=ua6j 提取码: ua6j

简介：《PHP与jQuery开发实例》由Vijay Joshi所着，循序渐进地讲述了如何使用PHP与jQuery构建高度交互的Web应用。每一章聚焦一个主题，讨论Web开发人员经常需要解决的一类具体问题。书中以实际示例及代码解释的方式给出了有针对性的快速解决之道，主要内容包括使用jQuery处理事件，在PHP和jQuery中使用XML、JSON、表单，向表单添加视觉效果，创建漂亮的导航菜单以及使用PHP绑定数据和改进网站等。另外，附录介绍如何使用Firebug来调试网页中的HTML和JavaScript。  

jQuery中ajax - get() 方法实例详解

在jquery中使用get，post和ajax方法给服务器端传递数据，在上篇文章给大家分享了jquery中ajax-post()方法实例，下面通过本文继续学习jQuery中ajax

-

get()

方法，具体介绍请看下文。

jQuery

Ajax

参考手册

实例

使用

AJAX

的

GET

请求来改变

div

元素的文本：

$("button").click(function(){

$.get("demo_ajax_load.txt",

function(result){

$("div").html(result);

});

});

亲自试一试

定义和用法

get()

方法通过远程

HTTP

GET

请求载入信息。

这是一个简单的

GET

请求功能以取代复杂

$.ajax

。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用

$.ajax。

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

详细说明

该函数是简写的

Ajax

函数，等价于：

$.ajax({

url:

url,

data:

data,

success:

success,

dataType:

dataType

});

根据响应的不同的

MIME

类型，传递给

success

回调函数的返回数据也有所不同，这些数据可以是

XML

root

元素、文本字符串、JavaScript

文件或者

JSON

对象。也可向

success

回调函数传递响应的文本状态。

对于

jQuery

1.4，也可以向

success

回调函数传递

XMLHttpRequest

对象。

示例

请求

test.php

网页，忽略返回值：

$.get("test.php");

更多示例

例子

1

请求

test.php

网页，传送2个参数，忽略返回值：

$.get("test.php",

{

name:

"John",

time:

"2pm"

}

);

例子

2

显示

test.php

返回值(HTML

或

XML，取决于返回值)：

$.get("test.php",

function(data){

alert("Data

Loaded:

"

+

data);

});

例子

3

显示

test.cgi

返回值(HTML

或

XML，取决于返回值)，添加一组请求参数：

$.get("test.cgi",

{

name:

"John",

time:

"2pm"

},

function(data){

alert("Data

Loaded:

"

+

data);

});

jquery

ajax

的

$.get（）用法详解

js文件

$(document).ready(function(){

$("form").submit(function(event)

{event.preventDefault()})//取消submit的默认行为

$("form

input[type='submit']").click(function(){

var

url

=

$('form').attr('action');

//

取Form中要提交的链接

var

param

=

{};

//

组装发送参数

param['name']

=

$('form

input[name=name]').val();

param['age']

=

$('form

input[name=age]').val();

$.get(url,

param,

function(dom)

{

$('div.get').append(dom)

})

;

//

发送并显示返回内容

});

})

html文件

form

action="ajax.php"

method="get"

Name:

input

type="text"

name="name"

/

Age:

input

type="text"

name="age"

/

input

type="submit"

/

/form

div

class="get"这是ajax的get方法/div

php文件

error_reporting(0);

if($_GET["name"]=="kitty")

{

$name=

"you

are

the

lucky";

}

else

$name=$_GET["name"];

$age=$_GET["age"];

echo

"div

".$name."

".$age."/div";

以上介绍就是本文给大家分享的jQuery中ajax

-

get()

方法实例详解，希望大家喜欢。

jquery 实现回车登录详解及实例代码

jquery

实现回车登

1.button按钮提交方式

//按钮事件

$(‘#btnSumit‘).click(function()

{

alert(‘测试‘);

});

//回车提交事件

$("body").keydown(function()

{

if

(event.keyCode

==

"13")

{//keyCode=13是回车键

$(‘#btnSumit‘).click();

}

});

2.form表单提交方式

a.使用jquery

$("body").bind(‘keyup‘,function(event)

{

if(event.keyCode==13){

document.form.submit();

}

});

b.非jquery　

body

onkeyup="autosubmit()"//添加监听事件

function

autosubmit(){//事件触发函数

if(event.keyCode==13){

document.form.submit();

}

}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

关于jquery网页开发实例精解源代码和web项目jquery实例的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。