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的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+等)、过滤器(包括:过滤器和[]过滤器)。 通过以上3种的组合,“查询”得到想要操作的元素或者元素集合,作为$()的参数,得到jQuery对象(或者jQuery对象的集合) 第二步是在jQuery对象间的跳转。也就是说,已经得到了一个jQuery对象,但是并不是想要的,那么可以通过一系列的跳转方法,比如parent()、next()、children()、find()等,或者过滤筛选的方法,比如eq()、filter()、not()等,来得到最终想要操作的jQuery对象。 用跳转和过滤方式得到的jQuery结果,往往通过比较复杂的表达式组合,可以达到同样的目的。 比如说$("div").eq(3),也可以用$("div:eq(3)")达到同样的目的。 又比如说$("div").find("span"),可以用$("div span")取到同样的元素。 方法是很灵活的,要根据具体的情况来选择。一般来说,HTML页面写得越规范,使用jQuery就越简单 还有一种情况,在得到了jQuery()对象之后,想要判断其是否满足条件,那么可以调用is()、hasClass()等方法,返回一个boolean值,进行后续的判断。这类方法也可以归到这类。 第三步是在获取准确的jQuery对象之后,调用其上的各种方法,来进行操作。这一步反而是比较简单的了。 后面就是对jQuery框架各种方法的简要介绍,更详细的内容,还是以官方API为准 1、$(...) $() 一切的核心,可以跟4种参数 $(expression),比如$("#id")、$(".class")等,返回jQuery对象,或者jQuery对象的集合 $(html),比如$("hello world"),返回jQuery对象,或者jQuery对象的集合 $(element),比如$(document.body),返回jQuery对象,或者jQuery对象的集合 $(*),所有元素 2、jQuery Object Accessors jQuery.index(element),返回该jQuery对象在集合中的索引 jQuery.each(function),遍历jQuery对象集合,在每个对象上执行function函数,function callback(index, domElement){this}; jQuery.size(),返回jQuery对象集合的大小 jQuery.length,相当于size()方法 jQuery.get(),获取原生DomElement对象的Array jQuery.get(index),获取原生DomElement对象 jQuery.eq(position),获取jQuery对象集合中的一个jQuery对象 3、Data相关方法 jQuery.data(name) jQuery.data(name, value) jQuery.removeData(name) 4、选择符 multiple(selector1, selector2),可以选择多个元素或者表达式,包装成jQuery对象的集合 例子:$("div,span") id(id) 例子:$("#id") class(class) 例子:$(".class") element(element) 例子:$("div")
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值