JQuery入门

最新推荐文章于 2024-11-02 16:30:36 发布

Linux????? Mr.Liyz

最新推荐文章于 2024-11-02 16:30:36 发布

阅读量69

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/huangdabing/p/9249224.html

版权

一：JQuery能干什么

jQuery是一个JavaScript函数库。我们知道，JS是运行在浏览器的脚本语言，可以实现页面的动态效果控制。但是原生的JS比较简单，实现复杂功能时所需的代码量也是可观的。由此，就诞生了一系列的JS函数库。其中，jQuery是比较流行的JS函数库，其中封装了大量功能复杂且好用的函数，我们直接调用即可。

jQuery库的功能：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX异步编程
插件机制用来扩展功能（可以增加自定义的函数）

二：JQuery的引入

三：JQuery基本语法

基础语法： $(selector).action()

注：与EL/JSTL不同，JQuery是通过 $() 选择对象的，然后通过 .函数名() 调用方法。

四：JQuery选择器：选取页面元素

1：基本选择器

jQuery 选择器可以通过元素的 id、类、类型、属性、属性值等选择HTML 元素。

1）元素选择器：通过元素名选择：$("name")

2）#id 选择器：页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器：$("#id")

3）类选择器：通过指定的 class 查找元素：$(".类名")

2：层级选择器

可以通过层级关系由大到小地细致选取。

1）祖先后代选择器：前面大选择器，后面为前面选择器结果中更小的元素选择器：$("大元素小元素")

2）父子选择器：$("父元素 > 子元素")

3）紧邻选择器：紧跟着第一个选择器后的第二个选择器元素：$("前 + 后")

4）范围选择器： prev 元素后的所有 target元素:$("prev ~target")

3：筛选器

1）第一个：$('范围元素:first')

2）非：$("范围元素:not(选择器)")

3）偶数项：$("范围元素:even")

4）奇数项：$("范围元素:odd")

5）第i-1项（从0开始）：$("范围元素:eq(i)")

6）大于i-1项：$("范围元素:gt(i)")

7）最后项：$('范围:last')

8）小于i-1项：$("范围:lt(i)")

9）文档的根：$(":root")

4：内容选择器

1）包含某内容的元素：$("范围元素:contains('内容')")

2）查找空元素：$("范围:empty")

3）包含某选择器内容的元素：$("范围:has(选择器)")

4）查找含有子元素的元素：$("范围:parent")

5：属性选择器

1）查找包含某属性的元素：$("范围[属性]")

2）查找属性为某值的元素：$("范围[属性='值']")

还有：不等于某属性值、属性值以某内容开头、属性值以某内容结尾、多个属性条件组成的选择器等等。

6：表单选择器

表单选择器格式为：$(":表单标签名")

主要有

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file

7：表单属性选择器

常用的有两个：

1）匹配所有选中的被选中元素(复选框、单选框等）：$("input:checked")

2）匹配所有选中的option元素：$("select option:selected")

五：对象访问与操作

1）为选择出的每一个匹配对象执行相应操作callback函数：$(选择器).each(callback)

2）统计选择出的元素个数：$(选择器).size();

3）获得选择出的第i-1个元素：$(选择器).get(i);

六：插件机制扩展自定义函数

1）为所有对象增加自定义函数：jQuery.fn.extend(｛函数定义｝)，使用：$（选择器）.自定义函数名()；

2）为JQuery命名空间增加自定义函数：jQuery.extend(｛函数定义｝)，使用：jQuery.函数名();

七：工具函数

1）数组遍历与处理：$.each(array,callback)

2）解析XML字符串为XMLdoc对象： $.parseXML(xml字符串)

3）判断数字：$.isNumeric(value)

4）测试对象是否是空对象（不包含任何属性）：$.isEmptyObject(obj)

5）去掉字符串起始和结尾的空格：$.trim(str)

八：Ajax

1:Ajax请求函数

1）GET方式发送请求：$.get(url,｛参数键值对｝,function(data)｛回调函数处理返回结果，data接收结果｝,[返回内容格式：xml, html, script, json, text, _default])；

2）POST方式发送请求：$.post(url,｛参数键值对｝,function(data)｛回调函数处理返回结果，data接收结果｝,[返回内容格式：xml, html, script, json, text, _default])；

（JQuery中，GET、POST方式只不过是函数名不同而已，都不需要在url上拼接参数，统一了格式。当然，底层实现时GET方式还是拼接了的。）

3）请求JSON文件：$.getJSON(url,[可选：参数键值对],function(json)｛把加载的JSON文件转化为对象给json形参，进行内容提取｝)

4）请求JS文件：$.getScript(url,[callback])

5）加载HTML文件：$.（选择器).load(url,[data],[callback])

2:Ajax事件函数

1）发送请求前：ajaxSend(callback)

2）开始发送时：ajaxStart(callback)

3）发送成功时：ajaxSuccess(callback)

4）发送失败时：ajaxError(callback)

5）请求结束时：ajaxStop(callback)

6）请求完成：ajaxComplete(callback)

九：事件处理

ready(fn)：浏览器载入DOM完成后执行fn回调函数；

$(选择器).on(event,fn)：为元素的event事件绑定回调函数fn；

$(选择器).off(event):为元素移除event事件；

hover([over],out)：over:鼠标移到元素上要触发的函数，out:鼠标移出元素要触发的函数

blur([[data],fn]):当元素失去焦点时触发 blur 事件。

change([[data],fn]):当元素的值发生改变时，会发生 change 事件。

click([[data],fn]):点击事件

dblclick([[data],fn])：双击事件

error([[data],fn])：当元素遇到错误（没有正确载入）时，发生 error 事件。

focus([[data],fn])：当元素获得焦点时，触发 focus 事件。

focusin([data],fn)：focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

focusout([data],fn)：focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

keydown([[data],fn])：当键盘或按钮被按下时，发生 keydown 事件。

keypress([[data],fn])：当键盘或按钮被按下时，发生 keypress 事件。

keyup([[data],fn])：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

mousedown([[data],fn])

mouseenter([[data],fn])

mouseleave([[data],fn])

mousemove([[data],fn])

mouseout([[data],fn])

mouseover([[data],fn])

mouseup([[data],fn])

resize([[data],fn])：当调整浏览器窗口的大小时，发生 resize 事件。

scroll([[data],fn])：当用户滚动指定的元素时，会发生 scroll 事件。

select([[data],fn])：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

submit([[data],fn])：当提交表单时，会发生 submit 事件

unload([[data],fn])：在当用户离开页面时，会发生 unload 事件。

十：页面内容、样式操作

1：页面内容操作

1）获得html代码：$(选择器).html();

2）更改元素html代码：$("选择器").html("更改代码");

3）获得文本：$(选择器).text();

4）更改文本：$(选择器).text(新文本);

5）获取文本框中的值：$(选取器).val();

6）更改文本框中的值：$(选择器).val(文本值);

2：更改元素位置

1）offset([coordinates]):元素进行相对偏移。

2）scrollTop([val])：元素相对滚动条顶部偏移。

3）scrollLeft([val])：元素相对滚动条左侧偏移。

3：更改元素尺寸

height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([soptions])
outerWidth([options])

十一：页面效果控制

基本
- show([s,[e],[fn]])
- hide([s,[e],[fn]])
- toggle([s],[e],[fn])
滑动
- slideDown([s],[e],[fn])
- slideUp([s,[e],[fn]])
- slideToggle([s],[e],[fn])
淡入淡出
- fadeIn([s],[e],[fn])
- fadeOut([s],[e],[fn])
- fadeTo([[s],o,[e],[fn]])
- fadeToggle([s,[e],[fn]])
自定义
- animate(p,[s],[e],[fn])
- stop([c],[j])
- delay(d,[q])
- finish([queue])