jQuery和AJAX基础

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)

发布了1 篇原创文章 · 获赞 2 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/u011927449/article/details/104054907