jQuery

jQuery

• 介绍：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

• 特点：
  1.一款轻量级的js框架。
  2.链式表达式。
  3.事件、样式、动画支持。
  4.Ajax操作支持。
  5.跨浏览器兼容。
  6.插件扩展开发。
  7.可扩展性强。

• 作用
  1.取得页面中的元素。
  2.修改页面的外观。
  3.改变页面的内容。
  4.响应用户的页面操作。
  5.为页面添加动态效果。
  6.无需刷新页面即可从服务器获取信息(Ajax)。

• 选择器 (jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器)：
  jQuery 中所有选择器都以美元符号开头：$()。

 a.元素选择器
     $("p")
     //在页面中选取所有 <p> 元素
     
 b.id选择器
     $("#id")
     // #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
     
 c.class选择器
      $(".test")
     //类选择器可以通过指定的 class 查找元素。

• 效果

1.隐藏和显示

    $(selector).hide(speed,callback);//隐藏
    $(selector).show(speed,callback); //显示

2.淡入淡出

方法	描述
fadeIn()	用于淡入已隐藏的元素。
fadeOut()	用于淡出可见元素。
fadeToggle()	可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo()	允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

/*
  1.speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  2.callback 参数是 fading 完成后所执行的函数名称。
  3.opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
*/
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

3.滑动

$(selector).slideDown(speed,callback);
//向下滑动元素。

$(selector).slideUp(speed,callback);
//向上滑动元素。

$(selector).slideToggle(speed,callback);
//如果元素向下滑动，则 slideToggle() 可向上滑动它们。
//如果元素向上滑动，则 slideToggle() 可向下滑动它们。

4.动画

//创建自定义动画。
$(selector).animate({params},speed,callback);
/*params 参数定义形成动画的 CSS 属性。*/

5.停止动画

$(selector).stop(stopAll,goToEnd);
//停止动画或效果，在它们完成之前。
/*
stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
 goToEnd 参数规定是否立即完成当前动画。默认是 false。
*/

• HTML

1.捕获

方法	描述
attr()	获取属性值

2.设置

方法	描述
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容（包括 HTML 标记）
val()	设置或返回表单字段的值
attr()	设置/改变属性值
	attr()也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

3.添加元素

方法	描述
append()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素之后插入内容
before()	在被选元素之前插入内容

4.删除元素

方法	描述
empty()	从被选元素中删除子元素
remove()	删除被选元素（及其子元素）

5.尺寸

方法	描述
width()	设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()	设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()	返回元素的宽度（包括内边距）。
innerHeight()	返回元素的高度（包括内边距）。
outerWidth()	返回元素的宽度（包括内边距和边框）。
outerHeight()	返回元素的高度（包括内边距和边框）。

• 遍历(根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。)
  1.祖先

方法	描述
parent()	返回被选元素的直接父元素
parents()	返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
parentsUntil()	返回介于两个给定元素之间的所有祖先元素

2.后代

方法	描述
children()	返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历
find()	返回被选元素的后代元素，一路向下直到最后一个后代

3.同胞

方法	描述
siblings()	返回被选元素的所有同胞元素
next()	返回被选元素的下一个同胞元素
nextAll()	返回被选元素的所有跟随的同胞元素
nextUntil()	返回介于两个给定参数之间的所有跟随的同胞元素

4.过滤

方法	描述
first()	返回被选元素的首个元素
last()	返回被选元素的最后一个元素
eq()	返回被选元素中带有指定索引号的元素
filter()	允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()	返回不匹配标准的所有元素

• JS对象和JQ对象互转

js对象-->jQuery对象：对于已经是一个js对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(js对象) 
jQuery对象-->js对象：jQuery对象是一个数据对象，可以通过jQuery对象[0]来得到相应的js对象。