JQuery

Jquery

认识Jquery

• 让javscript变得更加好用的框架

• 实现动画，元素操作，ajax请求，表单验证等功能

• 特点：代码小巧、操作方便、兼容主流浏览器、语法规则优雅、支持扩展......

• HTML目录下使用：从官网(Jquery.com)下载

• 项目中添加Jquery库文件：

• 引用官方网址：

Jquery使用

JQuery语法

• 基本语法：$(selector).action()

• 美元符号定义jQuery

• 选择符(selector)”查询“和查找”HTML元素

• jQuery的action()执行对元素的操作

• 选择器：

• 元素选择器：$("p")

• #id 选择器:$("#test)

• .class选择器：$(".test")

• JQuery事件：

• 在事件中经常使用术语"触发"（或"激发"）

• 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法

JQuery效果

• 隐藏、显示：

• $(selector).hide(speed,callback);

• $(selector).show(speed,callback);

• 淡入、淡出：

• $(selector).fadeOut(speed,callback);

• $(selector).fadeToggle(speed,callback);

• 滑动：

• 下滑：$(selector).slideDown(speed,callback);

• 上滑：$(selector).slideUp(speed,callback);

• 动画：

• $(selector).animate({params},speed,callback);

• 停止动画：

• $(selector).stop(stopAll,goToEnd);

JQuery HTML

• 获取内容和属性

• 获得内容:text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容

• html() - 设置或返回所选元素的内容（包括 HTML 标签）

• val() - 设置或返回表单字段的值

• 获取属性 - attr()

• attr() 方法用于获取属性值

• 添加元素

• jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）

• jQuery prepend() 方法在被选元素的开头插入内容

• 删除元素

• remove() - 删除被选元素（及其子元素）

• empty() - 从被选元素中删除子元素

• CSS类

• Query 拥有若干进行 CSS 操作的方法

• addClass() - 向被选元素添加一个或多个类

• removeClass() - 从被选元素删除一个或多个类

• toggleClass() - 对被选元素进行添加/删除类的切换操作

• css() - 设置或返回样式属性

AJAX

• AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）

• 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

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

• $(selector).load(URL,data,callback);

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

• $.get(URL,callback); 或 $.get( URL [, data ] [, callback ] [, dataType ] )

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

• $.post(URL,callback); 或 $.post( URL [, data ] [, callback ] [, dataType ] )