`
hupy
  • 浏览: 189157 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery常用方法

阅读更多
为了实现这些功能,我们项目首选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 常用方法详解 #### 一、JQuery简介及使用 1. **下载地址**:JQuery官网提供最新版本的下载链接,地址为http://jquery.com/。通常,JQuery会提供两种版本供用户下载:压缩版与未压缩版。其中,压缩版...

    jQuery 常用方法

    本篇文章将深入探讨jQuery中的常用方法,基于jQuery 1.4版本进行总结,帮助开发者更好地理解和应用这些功能。 1. **选择器(Selectors)**:jQuery的选择器与CSS选择器相似,如`$("#id")`选取ID为id的元素,`$("....

    jquery 常用方法

    **jQuery 是一个广泛使用的 JavaScript 库,它极大地...学习和掌握jQuery的常用方法,将极大地提高前端开发效率和代码质量。在实际工作中,查阅jQuery官方文档和在线教程,结合项目实践,可以进一步提升jQuery技能。

    jquery常用方法总结

    ### jQuery 常用方法总结 #### 一、页面元素的引用 在使用 jQuery 进行页面元素操作时,我们通常会使用 `$()` 函数来选取元素。这其中包括通过 `id`、`class`、元素名称以及元素之间的层级关系等方式进行选择。...

    jquery常用方法一览

    本书内容来自csdn网友fly_to_the_winds 关于jquery常用方法的说明.谢谢他。希望对大家有用.

    jQuery常用方法

    以上只是jQuery常用方法的一部分,实际使用中,jQuery还有许多其他功能,如插件系统、DOM操作、效果和工具方法等,都极大地提升了JavaScript开发的效率和体验。在学习和实践中,你可以根据需求深入探索jQuery的更多...

    jquery 常用方法精讲

    在深入探讨jQuery的常用方法之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及与服务器交互等任务。通过一个文档对象模型(Document ...

    jQuery常用方法事件属性.doc

    本篇文章将深入探讨jQuery中的常用方法和事件属性。 首先,`$(document).ready()`是一个非常重要的jQuery方法,它确保DOM(文档对象模型)完全加载并准备就绪后才执行指定的函数。相比之下,`onload`事件则会在整个...

    自理Jquery常用方法.txt

    自己在开发中整理的一些常用小方法,希望能帮助到小新。 大神绕。

    Jquery 常用方法经典总结

    ### Jquery 常用方法经典总结 #### 一、页面元素的引用 在使用 jQuery 时,我们经常需要选择页面中的元素来进行操作。选择器是 jQuery 的核心特性之一,它使得开发者能够轻松地通过 id、class、元素名称以及元素...

    iicoom#Note#jQuery常用方法1

    背景图片选择器获取标签属性Description: Specify a function to execute when the DOM is fully lo

    JQuery 常用方法基础教程

    JQuery 是一个流行的JavaScript库,它极大地...以上就是JQuery常用方法的基础教程,掌握这些方法能够帮助开发者高效地操作DOM,实现丰富的网页动态效果。通过不断实践和深入学习,可以更熟练地运用JQuery解决实际问题。

    jquery常用方法及使用示例汇总

    ### jQuery常用方法及使用示例汇总 jQuery是一个快速、小巧、功能强大的JavaScript库,它封装了JavaScript常见的操作,使得Web开发者可以更方便地进行文档操作、事件处理、动画效果以及AJAX交互。下面将详细地介绍...

    15个jquery常用方法、小技巧分享

    标题中提到的“15个jquery常用方法、小技巧分享”,意味着本文将要围绕jQuery展开,介绍15个在开发过程中频繁使用的jQuery方法以及一些实用技巧。jQuery作为一个强大的JavaScript库,广泛应用于Web开发中,能够简化...

    JQuery 常用方法和事件详细介绍

    本文将详细讲解JQuery中的常用方法和事件,帮助开发者更好地理解和运用JQuery进行网页开发。 ### 文档就绪函数 在JQuery中,我们通常会使用`$(document).ready()`函数来确保所有的DOM元素都加载完毕后再执行相关的...

    jQuery常用插件大全pdf

    ### jQuery常用插件详解 #### 1. Horizontal Accordion: jQuery **知识点**: 水平方向折叠控件,基于jQuery开发,设计简洁,适用于快速实现网页中的菜单或信息展示板块。 #### 2. jQuery-HorizontalAccordion **...

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...

    jquery常用插件包

    这个“jquery常用插件包”包含了几个重要的jQuery插件的源代码,包括dialog对话框插件、menu菜单插件以及tabs选项卡插件,这些都是网页交互设计中常用的组件。 首先,让我们详细探讨一下jQuery库的基础知识。jQuery...

Global site tag (gtag.js) - Google Analytics