当前位置: 首页 > 工具软件 > jQuery Growl > 使用案例 >

jQuery总结

翟单弓
2023-12-01

jQuery简介:

jQuery是一个JavaScript函数库。

jQuery库包含以下功能

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

提示: 除此之外,Jquery还提供了大量的插件

jQuery安装和使用

下载到本地使用:访问jQuery官网 jquery.com 下载 jQuery 库

    有两个版本的 jQuery 可供下载:

  •    Production version - 用于实际的网站中,已被精简和压缩。
  • Development version - 用于测试和开发(未压缩,是可读的代码)

从CDN载入:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">百度CDN(国内推荐使用百度CDN

jQuery基本语法

$ (selector) . action ()

$:jQuery的简写          selector:选择器                 action():事件

选择器有哪些?

元素选择器,.class选择器,#id选择器,

事件有哪些?

最常用的事件:$(document).ready(){            //文档完全加载完后执行的函数

function(){

    }

}

鼠标事件键盘事件表单事件文档/窗口事件
click鼠标点击事件keypresssubmit提交表单事件load
dblclick鼠标双击事件keydownchangeinput字段改变事件resize
mouseenter鼠标指针穿过元素keyupfocus<input> 字段获得焦点时发生 focus 事件:scroll
mouseleave鼠标指针离开元素hoverblur<input> 字段失去焦点时发生 focus 事件:unload

jQuery 效果

jQuery 隐藏/显示        jQuery 淡入淡出             jQuery 滑动

jQuery 动画                jQuery 停止动画               jQuery Callback             

jQuery 链

jQuery HTML

jQuery 捕获          jQuery 设置               jQuery 添加元素              jQuery 删除元素

jQuery CSS 类              jQuery css() 方法              jQuery 尺寸

jQuery 遍历

jQuery 遍历         jQuery 祖先              jQuery 后代             jQuery 同胞                jQuery 过滤

jQuery和AJAX

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery的 AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1.         jQuery - AJAX load() 方法

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。

2.        jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET请求  或     HTTP POST请求      从服务器请求数据。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);必需的 URL 参数规定您希望请求的 URL。可选的 callback 参数是请求成功后所执行的函数名。

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback);必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。

                                           可选的 callback 参数是请求成功后所执行的函数名。

jQuery - noConflict() 方法

我们已经知道 $是jQuery 的简写,那么就存在一个问题,在一个页面用到好几个框架,而且其他框架也用$作为简写,浏览器该怎么识别?

$.noConflict();               --------->                        noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。

var jq = $.noConflict();--------->                         创建自己的缩写,之后用jq来代替$

 

jQuery插件

jQuery Validate 表单验证插件

jQuery Accordion折叠菜单插件

jQuery Autocomplete自动补全,搜索过滤插件

jQuery Growl消息提醒插件

jQuery Prettydate日期插件

jQuery Tooltip工具插件

jQuery Treeview树形节点插件

 

更多优秀的jQuery插件请访问   jQuery插件库http://www.jq22.com/

 类似资料: