JQuery入门
Posted huangdabing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery入门相关的知识，希望对你有一定的参考价值。
一：JQuery能干什么
jQuery是一个javascript函数库。我们知道，JS是运行在浏览器的脚本语言，可以实现页面的动态效果控制。但是原生的JS比较简单，实现复杂功能时所需的代码量也是可观的。由此，就诞生了一系列的JS函数库。其中，jQuery是比较流行的JS函数库，其中封装了大量功能复杂且好用的函数，我们直接调用即可。
jQuery库的功能：
- html元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX异步编程
- 插件机制用来扩展功能（可以增加自定义的函数）
二：JQuery的引入
三：JQuery基本语法
四：JQuery选择器：选取页面元素
$("大元素 小元素")$("父元素 > 子元素")$("前 + 后")$("prev ~target")$(‘范围元素:first‘)$("范围元素:not(选择器)")$("范围元素:even")$("范围元素:odd")$("范围元素:eq(i)")$("范围元素:gt(i)")$(‘范围:last‘)$("范围:lt(i)")$("范围元素:contains(‘内容‘)")$("范围:empty")$("范围:has(选择器)")$("范围:parent")$("范围[属性]")$("范围[属性=‘值‘]")- :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])
以上是关于JQuery入门的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段