jQuery学习
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
1.选择器
元素选择器 $(“p”) ;
ID选择器 $(“#test”);
类 class选择器 $(“.test”);
Padding 内边距
Border 边框
Margin. 外边距
2.处理事件
页面中指定一个点击事件：
$(“p”).click();
下一步是定义一个时间触发事件，可以通过一个函数来实现
$(“p”).click(function()
{
});
3.常见的jquery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法章节中已经提到过。
4.DOM = Document Object Model（文档对象模型）
5.效果：
5.1 隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
5.2淡入淡出
5.3滑动
5.4 动画
$(selector).animate({params},speed,callback);
案例
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
5.5 停止
案例：
$(selector).stop(stopAll,goToEnd);
5.6 CallBack：Callback 函数在当前动画 100% 完成之后执行。
$(selector).hide(speed,callback)
6.获取内容
text()、html() 以及 val()、attr()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值 -input
· attr() - 获取链接中的href属性的值
7.添加内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
8.删除元素或者内容
remove() - 删除被选元素（及其子元素）—所有全部删除
empty() - 从被选元素中删除子元素
9.在jquery方法中添加css类，删除css类名,设置css样式
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
10.jQuery尺寸
width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()返回元素的宽度（包括内边距）。
innerHeight()返回元素的高度（包括内边距）。
outerWidth()返回元素的宽度（包括内边距和边框）。
outerHeight()返回元素的高度（包括内边距和边框）。
outerWidth(true)返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true)返回元素的高度（包括内边距、边框和外边距）。
11.JQuery遍历:
jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
11.1 祖先：DOM树向上遍历的祖先元素是指：父、祖父或曾祖父等等
parent()返回被选元素的直接父元素。
parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()返回介于两个给定元素之间的所有祖先元素。
11.2 后代：DOM树向下遍历的后代是指 ：子、孙、曾孙等等
children()返回被选元素的所有直接子元素
find()返回被选元素的后代元素，一路向下直到最后一个后代
11.3 同胞：同胞拥有相同的父元素， DOM 树中遍历元素的同胞元素
sibling:兄弟姊妹的意思
siblings() 返回被选元素的所有同胞元素
next() 返回被选元素的下一个同胞元素
nextAll() 返回被选元素的所有跟随同胞元素
nextUntil()返回介于给定的两个参数之间的所有跟随被选跟后的元素的同胞元素（包含关系）
prev()返回被选元素的上一个同胞元素
prevAll()返回被选元素的前面所有的同胞元素
prevUntil()返回介于给定的两个参数之间的所有跟随被选元素前面的同胞元素（包含关系）
12 jQuery-过滤
first()返回被选元素的首个元素。
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素,索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()方法返回不匹配标准的所有元素,ot() 方法与 filter() 相反
13.什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
14 jQuery load() 方法是简单但强大的 AJAX 方法。
14.1 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
14.2 语法 $(selector).load(URL,data,callback);
14.3 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
15. jQuery - AJAX get() 和 post() 方法
get方法 $.get(URL,callback); get方法参数是拼接在Url后面,GET 方法可能返回缓存数据
post方法 $.post(URL,data,callback); post参数可以放在Body体内,POST 方法不会缓存数据，并且常用于连同请求一起发送数据
网友评论