为了实现这些功能,我们项目首选jQuery做为js框架,jQuery Validator作为js验证。
要使用jQuery库,首先要加载jQuery的js文件,
<script type="text/javascript" src="jquery.js"></script>
jQuery 对js的封装主要体现在,页面加载的封装,对选择器和事件封装,DOM操作封装,css操作封装,对Ajax封装。
1.页面加载的封装。
当加载了jQuery库,我们访问此页面的时候,在页面加载完毕的是会自动执行ready()方法。
$(document).ready(function(){
//需要执行的代码
});
这里需要提醒的是,页面加载完毕是只页面的DOM树加载完毕。简化了传统的onload方法。
也可以简化写:
$(function(){
//需要执行的代码
});
2.对选择器和事件封装
jQuery对于HTML元素提供了两种方式,一种是用css和xPath选择器想结婚组成一个字符串来构造jQuery对象;一种是使用jQuery对象的一些方法,如find(),parent(),next()等,同样可以混合使用。
如:$("#idName"),选择id为"idName"的元素,相当于document.getElementById("idName").
$(".className"),选择class属性为"className" 的元素,使用这种形式可以快速选择具有相同样式的一批元素。
$("#idName>li"),选择id为idName下的li元素。
$("div"),选择所有的div元素。
事件的封装体现在,对于传统的onXXX事件,jQuery基本上都把方法前面的on去掉了,直接改成了XXX。
3.DOM操作封装
jQuery对DOM操作提供了很多方便的方法。
id(),获取对象的id属性。
id(val),为对象的id属性赋值。
html(),html(val),表示为获得对象的innerHTML,对innerHTML赋值。
val(),val(val)。获得对象的value属性,对value属性赋值。
after(html),after(elem),after(elems),在对象元素后插入一段html文本,指定对象后对象数组。
before(html),before(elem),before(elems)
append(html),append(elem),append(elems)在对象元素内部末尾追加一段html文本,指定对象后对象数组。
appendTo(expr),将当前对象追加到expr所匹配的元素中去。
empty(),删除对象的所有子节点。
remove(),删除对象。
parent(),取父节点。
prev(),next(),去前一个后一个兄弟节点。
attr(name),取匹配的第一个属性。
attr(key,value),通过key和value设置属性。
removeAttr(name),删除匹配的第一个属性。
4.css操作封装
通过对css的封装,似的css操作变得简单,对一些常用的操作,
color(),color(val),获取颜色和设置颜色。
left(),left(val),获取左边距和设置左边距。
top(),top(val),获取顶边距和设置顶边距。
css(name)获取样式为name的样式。
css(key,value),通过key和value设置一个样式。
hide(),show(),隐藏和显示对象。
fadeIn(),fadeIn(speed),淡入的效果,可以设定其速度。
fadeOut(),fadeOut(speed)
slideDown(),将对象高度从0变化到正常。
slideUp,将对象的高度从正常变为0。
5.对Ajax封装
jQuery对ajax的封装包括了一个通用的方法和三个简单的方法。
通用的方法为$.ajax(prop)。发送ajax请求来获取远程数据。prop为hash格式,传递方式为key/value:
type:数据请求的方式(get,post)。
url:请求的服务器的url
data:传递数据的参数字符串,只用于post方式
dataType:期待服务器凡是的数据格式,可以是xml,html,json。
ifModified:设置是否最好一次请求的响应有变化时才成功返回,默认为false
timeout:设置延迟发送请求的时间
global:是否发送当前请求为全局事件,默认为true
error:当请求师傅时候触发的函数
success:请求成功时候触发的函数
complete:请求完成后的触发函数
除了通用方法为,还有3种常用的方式:
$.get(url,params,callback):用get方式发送请求,传入url地址,发送的参数,回调函数,其中url为必填。
$.post(url,params,callback):用post方式发送请求,传入url地址,发送的参数,回调函数,url为必填。
$.getJSON(url,params,callback):用get方式发送请求,传入url地址,发送的参数,回调函数,url为必填,服务器直接返回的结果为JSON对象。
此外,我们可以使用JSON.simple包来生成JSON对象,这样比起直接拼接字符串来说简单,JSON.simple程序包种最为常用的是JSONObject和JSONArray两个对象,分别对应JSON对象和JSON数组。
关于JSONObject和JSONArray的使用这里不说了,网上很多类似资料。
分享到:
相关推荐
### JQuery 常用方法详解 #### 一、JQuery简介及使用 1. **下载地址**:JQuery官网提供最新版本的下载链接,地址为http://jquery.com/。通常,JQuery会提供两种版本供用户下载:压缩版与未压缩版。其中,压缩版...
本篇文章将深入探讨jQuery中的常用方法,基于jQuery 1.4版本进行总结,帮助开发者更好地理解和应用这些功能。 1. **选择器(Selectors)**:jQuery的选择器与CSS选择器相似,如`$("#id")`选取ID为id的元素,`$("....
**jQuery 是一个广泛使用的 JavaScript 库,它极大地...学习和掌握jQuery的常用方法,将极大地提高前端开发效率和代码质量。在实际工作中,查阅jQuery官方文档和在线教程,结合项目实践,可以进一步提升jQuery技能。
### jQuery 常用方法总结 #### 一、页面元素的引用 在使用 jQuery 进行页面元素操作时,我们通常会使用 `$()` 函数来选取元素。这其中包括通过 `id`、`class`、元素名称以及元素之间的层级关系等方式进行选择。...
本书内容来自csdn网友fly_to_the_winds 关于jquery常用方法的说明.谢谢他。希望对大家有用.
以上只是jQuery常用方法的一部分,实际使用中,jQuery还有许多其他功能,如插件系统、DOM操作、效果和工具方法等,都极大地提升了JavaScript开发的效率和体验。在学习和实践中,你可以根据需求深入探索jQuery的更多...
在深入探讨jQuery的常用方法之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及与服务器交互等任务。通过一个文档对象模型(Document ...
本篇文章将深入探讨jQuery中的常用方法和事件属性。 首先,`$(document).ready()`是一个非常重要的jQuery方法,它确保DOM(文档对象模型)完全加载并准备就绪后才执行指定的函数。相比之下,`onload`事件则会在整个...
自己在开发中整理的一些常用小方法,希望能帮助到小新。 大神绕。
### Jquery 常用方法经典总结 #### 一、页面元素的引用 在使用 jQuery 时,我们经常需要选择页面中的元素来进行操作。选择器是 jQuery 的核心特性之一,它使得开发者能够轻松地通过 id、class、元素名称以及元素...
背景图片选择器获取标签属性Description: Specify a function to execute when the DOM is fully lo
JQuery 是一个流行的JavaScript库,它极大地...以上就是JQuery常用方法的基础教程,掌握这些方法能够帮助开发者高效地操作DOM,实现丰富的网页动态效果。通过不断实践和深入学习,可以更熟练地运用JQuery解决实际问题。
### jQuery常用方法及使用示例汇总 jQuery是一个快速、小巧、功能强大的JavaScript库,它封装了JavaScript常见的操作,使得Web开发者可以更方便地进行文档操作、事件处理、动画效果以及AJAX交互。下面将详细地介绍...
标题中提到的“15个jquery常用方法、小技巧分享”,意味着本文将要围绕jQuery展开,介绍15个在开发过程中频繁使用的jQuery方法以及一些实用技巧。jQuery作为一个强大的JavaScript库,广泛应用于Web开发中,能够简化...
本文将详细讲解JQuery中的常用方法和事件,帮助开发者更好地理解和运用JQuery进行网页开发。 ### 文档就绪函数 在JQuery中,我们通常会使用`$(document).ready()`函数来确保所有的DOM元素都加载完毕后再执行相关的...
### jQuery常用插件详解 #### 1. Horizontal Accordion: jQuery **知识点**: 水平方向折叠控件,基于jQuery开发,设计简洁,适用于快速实现网页中的菜单或信息展示板块。 #### 2. jQuery-HorizontalAccordion **...
这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...
这个“jquery常用插件包”包含了几个重要的jQuery插件的源代码,包括dialog对话框插件、menu菜单插件以及tabs选项卡插件,这些都是网页交互设计中常用的组件。 首先,让我们详细探讨一下jQuery库的基础知识。jQuery...