jQuery和AJAX基础
来源:互联网 发布:建筑电气设计师知乎 编辑:程序博客网 时间:2024/06/06 03:11
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)
- jQuery和AJAX基础
- AJAX基础和jQuery中的AJAX
- ajax基础 和 Jquery的ajax
- jQuery基础---Ajax基础
- jquery ajax基础
- JQuery-ajax基础篇
- jQuery AJAX基础
- jQuery基础篇(五)Ajax和工具类函数
- 使用jquery中的$.Ajax 和$.post 发送请求 (基础写法)
- JavaScript Ajax和jQuery Ajax
- Ajax和JQuery的$.ajax
- jQuery、AJAX基础学习笔记
- jQuery(4)__jQuery基础<Ajax>
- nodejs ajax 基础-jQuery实现
- Jquery validate 和Jquery Ajax
- jquery和ajax
- AJAX 和 jQuery
- 初学Ajax和jQuery
- spring环境的搭建
- Django1-10-5管理界面中文设置
- hrbust 2192 螺旋的矩阵
- JS 验证邮箱格式(正则表达式讲解)
- 关于CDN上js文件获取503的问题
- jQuery和AJAX基础
- ubuntu eclipseC++ caffe
- Linux 下创建一个文件,打开一个目录需要什么权限呢?
- 华为OJ训练之0007-151230-统计大写字母个数
- Code_浅蓝之runtime学习与记录
- 关于父类引用指向子类对象的那些事
- Project Euler Problem 8: Largest product in a series
- Javacc词法分析初练
- 生成1~n的全排列