jQuery笔记

jQuery 是一个 JavaScript 函数库

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

一、引入jQuery：

　　　可以到jQuery官网http://jquery.com/download 下载js文件；然后在html中引入；

　    jQuery语法：

　　　　$(selector).action( )

　　　　 $美元符号定义 jQuery选择符

　　　　（selector）“查询”和“查找” HTML 元素

　　　　 jQuery 的 action( ) 执行对元素的操作

　　　示例：

　　　　　　$(this).hide( ) - 隐藏当前元素

　　　　　　$("p").hide( ) - 隐藏所有段落

　　　　　　$(".test").hide( ) - 隐藏所有 的所有元素

　　　　　　$("#test").hide( ) - 隐藏所有 的元素

　　jQuery 元素选择器：

　　　　jQuery 使用 CSS 选择器来选取 HTML 元素。

　　　　$("p") 选取 <p> 元素。

　　　　$("p.intro") 选取所有 的 <p> 元素。

　　　　$("p#demo") 选取所有 的 <p> 元素。

　　jQuery 属性选择器：

　　　　jQuery 使用 XPath 表达式来选择带有给定属性的元素。

　　　　$("[href]") 选取所有带有 href 属性的元素。

　　　　$("[href='http://t.zoukankan.com/123456fyl-p-10300529.html#']") 选取所有带有 href 值等于 "#" 的元素。

　　　　$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

　　　　$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

　　jQuery 事件：

二、jQuery 效果：

　　1.隐藏/显示

　　语法：$(selector).hide(speed,callback);　　
　　　　　$(selector).show(speed,callback);

　　　　　　　　可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

　　　　　　　　可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

　　　语法：$(selector).toggle(speed,callback);　　　

　　　　　　　　使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

　　2.淡入淡出

　　　　fadeIn( )　　淡入　　　　语法：$(selector).fadeIn(speed,callback);

　　　　fadeOut( )　　淡出　　　　语法：$(selector).fadeOut(speed,callback);

　　　　fadeToggle( )　　切换淡入淡出　　　　语法：$(selector).fadeToggle(speed,callback);

　　　　fadeTo( )　　给定的不透明度（值介于 0 与 1 之间）　　　　语法：$(selector).fadeTo(speed,callback);

　　3.滑动

　　　　slideDown( )　　向下滑动元素　　　　语法：$(selector).slideDown(speed,callback);

　　　　slideUp( )　　向上滑动元素　　　　语法：$(selector).slideUp(speed,callback);

　　　　slideToggle( )　　切换向上向下滑动　　　　语法：$(selector).slideToggle(speed,callback);

　　4.动画

　　　  animate( ) 方法用于创建自定义动画

　　　 语法：$(selector).animate({params},speed,callback);

　　　　 提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

　　　　 　　　如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

　 5.stop( )

　　　 语法：$(selector).stop(stopAll,goToEnd);

　　　　 stop( ) 方法用于停止动画或效果，在它们完成之前。

　　　　 stop( ) 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

三、jQuery HTML

　　1.获取内容 

　　　　text（）设置或者返回所选元素的文本内容

　　　　html（）设置或返回所选元素的html内容（包含标签）

　　　　val（）设置或返回表单字段的值

　　2.获取属性 

　　　　attr（）获取的是所选元素的直接属性

　　3.添加方法

　　　　append（）在被选元素内的结尾添加  添加多个元素用 ， 隔开

　　　　prepend（）在被选元素内的开头添加 添加多个元素用 ， 隔开

　　　　after（）在被选元素之后插入内容  添加多个元素用 ， 隔开

　　　　before（）在被选元素之前插入内容  添加多个元素用 ， 隔开

　　4.删除元素

　　　　remove（）删除被选元素（及其他的子元素） 删除的时候是彻底移除  还能接受参数进行过滤

　　　　empty（）删除被选元素的子元素   清空其子元素  本身不会清除

　　5.获取并设置css类

　　　　addclass（）向被选元素添加一个多个类 中间用 ， 隔开

　　　　removeclass（）删除一个多个类 中间用 ， 隔开

　　　　togglecalss（）进行添加/删除类的切换

　　　　caa（）设置或返回样式属性 一个或多个  他与attr相似 但是attr是返回的直接属性 css是返回的是样式

　　6.尺寸

　　　　width() height()  不包括内边距 边框 外边距

　　　　innerWidth() innerHeight()  包括内边距 不包括边框 和外边距

　　　　outerWidth() outerHeight()  包括内边距和边框  不包括外边距

　　　　outerWidth(true) outerHeight(true)  包括内边距和边框外边距

　　　　$(document).height()/width()  设置文档宽高

　　　　$(window).height()/width()　　设置窗口宽高

三、jQuery 遍历

　　1.所有的父级

　　　　parent()返回被选元素的直接父级（爸爸）

　　　　parents()返回被选元素的所有的父级

　　　　arentUntil()返回介于俩个被选元素的之间所有的父级元素 但是不包括parentsUntli("div")括号里面的

　　2.所有的子级

　　　　childen()返回被选元素的所有的子级

　　　　find("div") 返回被选元素的所有div子级

　　　　find("*") 返回被选元素的所有子级

　　3.同胞 兄弟

　　　   siblings() f返回被选元素的所有兄弟元素

　　　   next() 返回被选元素的下一个兄弟元素

　　　　nextAll()  返回被选元素跟随之后的所有兄弟元素

　　　　nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素  不包括括号内的元素

　　　　prev(), prevAll() & prevUntil() 方法 是上的意思 与next() nextAll() nextUntli()相反 它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

　　4.过滤

　　　　first()  返回被选元素的首个元素

　　　　last()  返回被选元素的最后一个元素

　　　　eq()  方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）