博客

jQuery和AJAX基础

jQuery 基础：

1.jQuery 选择器：

元素选择器：$(“p”)； #id 选择器：$(“#test”)； .class 选择器：$(“.test”)；

举例子：选取所有元素$(“*”)；选取当前 HTML 元素 $(this)；选取所有 type=”button” 的 <input> 元素 和 <button> 元素$(“:button”)；

2.jQuery 事件选择器：

1）$(document).ready()：$(document).ready()方法允许我们在文档完全加载完后执行函数。

2）dblclick()：当双击元素时，会发生dblclick 事件。

3）mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。

4）focus()：当元素获得焦点时，发生focus 事件。

5）blur()：当元素失去焦点时，发生blur 事件。

3.jQuery 效果

1）隐藏和显示：$(“#icon”).toggle();将id=icon的元素在隐藏和显示之间切换；

2）淡入淡出：$(selector).fadeIn(speed,callback);//jQueryfadeIn() 用于淡入已隐藏的元素。

$(selector).fadeOut(speed,callback);//jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeToggle(speed,callback);//jQuery fadeToggle() 方法可以在fadeIn() 与 fadeOut() 方法之间进行切换。

$(selector).fadeTo(speed,opacity,callback);//jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

3)滑动：$(selector).slideDown(speed,callback);//jQueryslideDown() 方法用于向下滑动元素。

$(selector).slideUp(speed,callback);//jQuery slideUp() 方法用于向上滑动元素。

$(selector).slideToggle(speed,callback);//jQuery slideToggle() 方法可以在slideDown() 与 slideUp() 方法之间进行切换。

4)动画：$(selector).animate({params},speed,callback);//jQueryanimate() 方法用于创建自定义动画； params 参数定义形成动画的 CSS 属性。

$(selector).stop(stopAll,goToEnd);//停止动画，默认地，stop() 会清除在被选元素上指定的当前动画。

5)链(Chaining):通过 jQuery，可以把动作/方法链接在一起。Chaining允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

4.jQuery HTML

1）获取内容和属性：

$(“选择器”).text() – 设置或返回所选元素的文本内容；

$(“选择器”).html() – 设置或返回所选元素的内容（包括HTML 标记）；

$(“选择器”).val()  – 设置或返回表单字段的值；

$(“选择器”).atrr() – 设置属性值

2）删除元素：

$(“选择器”).remove();-删除被选元素及其子元素；

$(“选择器”).empty();-删除被选元素及其子元素；

3）CSS类：

$(“选择器”).addClass(）向被选元素添加一个或多个类，利用类可以改变CSS样式；

$(“选择器”).removeClass() – 从被选元素删除一个或多个类，可删除某一个CSS样式；

$(“选择器”).toggleClass() – 对被选元素进行添加/删除类的切换操作

$(“选择器”).css(“background-color”)-返回背景色的颜色值；

$(“选择器”).css({“background-color”:”yellow”,”font-size”:”200%”})-改变选择器元素的CSS样式；

4）尺寸：

$(“选择器”).width() 和 height() 方法：设置或返回元素的宽度/高度（不包括内边距、边框或外边距）；

$(“选择器”).innerWidth() 和 innerHeight() 方法：返回元素的宽度/高度（包括内边距）；

$(“选择器”).outerWidth() 和 outerHeight() 方法：返回元素的宽度/高度（包括内边距和边框）。

AJAX简介

1.概念：AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新，AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。jQuery – AJAX load() 方法

2.jQuery – AJAX load() 方法

$(selector).load(URL,data,callback);//服务器加载数据，并把返回的数据放入被选元素中。url必选，其他可选；

注：可选的callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt – 包含调用成功时的结果内容

statusTXT – 包含调用的状态

xhr – 包含 XMLHttpRequest 对象

3.jQuery – AJAX get() 和 post() 方法

1）jQuery$.get() 方法

$.get(URL,callback); //url必选：请求的 URL，callback可选；

2）jQuery$.post() 方法：$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);//url必选，其他可选；

杂项：

null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为null，否则为 undefined。

if (typeof myObj !== “undefined” && myObj !== null)