jquery总结

Jquery简介:

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documentsevents、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

jQuery 语法:

通过 jQuery,您可以选取(查询,query HTML 元素,并对它们执行“操作”(actions)。

jQuery 语法实例

$(this).hide()

演示 jQuery hide() 函数,隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数,隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数,隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

美元符号定义 jQuery

选择符(selector)“查询”和“查找” HTML 元素

jQuery action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

提示:jQuery 使用的语法是 XPath CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

试图隐藏一个不存在的元素

获得未完全加载的图像的大小

Previous Page

Next Page

jQuery 选择器:

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

HTML DOM 术语中:

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

实例

$("p").css("background-color","red");

更多的选择器实例语法 描述

$(this) 当前 HTML 元素

$("p") 所有 <p> 元素

$("p.intro") 所有 class="intro" <p> 元素

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的第一个元素

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" <div> 元素中的所有 class="head" 的元素

jQuery 事件函数:

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中:

实例

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

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

$("p").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

在上面的例子中,当按钮的点击事件被触发时会调用一个函数:

$("button").click(function() {..some code... } )

该方法隐藏所有 <p> 元素:

$("p").hide();

单独文件中的函数

如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):

实例

<head>

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

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

</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

结论

由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

把所有 jQuery 代码置于事件处理函数中

把所有事件处理函数置于文档就绪事件处理器中

jQuery 代码置于单独的 .js 文件中

如果存在名称冲突,则重命名 jQuery

jQuery 事件

下面是 jQuery 中事件方法的一些例子:Event 函数 绑定函数至

$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery AJAX 函数:

什么是 AJAX

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

AJAX jQuery

jQuery 提供了用于 AJAX 开发的丰富函数(方法)库。

通过 jQuery AJAX,使用 HTTP Get HTTP Post,您都可以从远程服务器请求 TXTHTMLXML JSON

而且您可以直接把远程数据载入网页的被选 HTML 元素中!

写的更少,做的更多

jQuery load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:

$(selector).load(url,data,callback)

请使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。

只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。

Low Level AJAX

$.ajax(options) 是低层级 AJAX 函数的语法。

$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。

option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

jQuery AJAX 请求请求 描述

$(selector).load(url,data,callback) 把远程数据加载到被选的元素中

$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中

$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据

$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据

$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据

$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL(地址)

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时,所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

下面我们来举几个实例:

案例一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>demo01.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

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

<script>

/**

层次元素关系

1、祖先关系 空格符号

2、父子关系 大于符号

3、紧跟的关系 +符号

4、紧跟后的所有兄弟关系 ~符号

CSS样式

1css("");带有一个参数是获取其属性的值

2css("","");为其对象设置一个指定的属性和属性值

3css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};

*/

$(document).ready(function(){

/**层级元素选择器的使用方式*/

/**祖先关系 符号为===>空格*/

var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象

/**输出Jquery对象的大小*/

alert("后代个数是:"+$frmipts.size());

/**父子关系 符号为===>>*/

var $ipt = $("form>input");

//为你获取的input添加背景颜色

/**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/

var iptt = $ipt[0];

iptt.style.backgroundColor="red";

alert("-----------改变中介线---------------");

/**采用Jquery对象本身的css方法来设置样式*/

$ipt.css("background-color","blue");

/**匹配所有紧接在某个元素后的某个元素符号为===> +*/

var $lipts=$("label+input");

/**为其添加背景颜色*/

$lipts.css("background-color","green");

/**匹配 prev 元素之后的所有 siblings(兄弟) 元素 符号为====> ~*/

var $fipts = $("form~input");

$fipts.css("background-color","yellow");

/**我使用到了CSS样式

.css("")//获取其样式属性的值

案例: $fipts.css("background-color");

.css("","") //为其添加样式属性及属性值

$fipts.css("background-color","yellow");

.css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。

$fipts.css({"background-color":"red","color":"blue"});

*/

alert("获取该Jquery对象的背景颜色值:"+$fipts.css("background-color"));

});

</script>

</head>

<body>

<div>

<div>

<input name="ddd"/>

<h1>

层级选择器的使用方式

</h1>

</div>

<div id="#frm">

邮箱:<input name="test"/>

<form>

<label>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
# 智慧旅游解决方案摘要 智慧旅游解决方案旨在通过新一代信息网络技术和装备,实现旅游服务、管理、营销和体验的智能化。该方案响应国家政策背景,如国家旅游局和工业信息化部的指导意见,以及国家发改委的发展规划,强调数字化、网络化、智能化在旅游业的应用,推动5G和移动互联网技术在旅游领域的创新应用。 方案的建设目标围绕“一个中心、四个方面、五大平台”展开,即以智慧旅游数据中心为核心,面向服务、管理、商务和营销构建智慧景区管理平台、智慧旅游服务平台、智慧旅游商务平台和智慧旅游营销平台。这五大平台将整合全域旅游资源,提升旅游设施,拓展旅游空间,融合旅游产业链,提升旅游服务,定制旅游产品,推进旅游改革。 建设内容涵盖了整体架构的构建,包括智慧服务、智慧管理、电子商务和智慧营销等方面。通过云计算、人工智能、大数据、物联网、5G等技术,实现“云-管-端”服务能力,打造集时间、空间、层次为一体的体验平台。此外,还包括智慧景区管理平台的多个子系统,如视频监控、应急指挥调度、流量监测、舆情监督、线路SOS一键呼救、GIS人车调度、停车场管理、语音广播、环境监测管理、多媒体发布、电子巡更以及指挥调度大屏建设等。 智慧旅游服务平台则包括自助票务系统、人脸识别、扫码购票、景区门户网站、机游、WIFI覆盖系统、数字全景VR、AI机器人、智慧座椅、智慧厕所等,旨在提升游客体验,实现景区的智能化管理和服务。通过这些服务,游客可以享受到便捷的购票、入园、导览和信息服务,同时景区管理者能够更有效地监控和管理景区运营。 智慧旅游商务平台则侧重于旅行社团队申报、电子商城、综合票务系统、分销管理系统、大会员系统和景区聚合支付系统,为旅游企业提供全面的商务服务和营销支持。这些平台和系统帮助旅游企业拓宽分销渠道,实现财务管理和订单管理,同时为游客提供便捷的支付和会员服务。 最后,智慧营销平台通过综合票务系统、分销管理系统、大会员系统和景区聚合支付系统,为旅游行业提供精准的营销工具和策略。这些工具和策略有助于整合旅游资源,拓宽销售渠道,提升游客体验,实现旅游业务的数字化和智能化。 智慧旅游解决方案通过这些综合性的技术和平台,不仅提升了游客的旅游体验,还为旅游行业的可持续发展提供了强有力的技术支持和数据驱动的决策依据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值