自学jQuery梳理笔记

基础语法： $(selector).action()基于css选择器

$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素

======================

关于 : 和 [] 这两个符号的理解

：可以理解为种类的意思，如：p:first，p 的种类为第一个。

[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。

========================
jQuery效果

显示/隐藏：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

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

toggle()：
切换显示与隐藏

--------------------------------------------

淡入淡出：

（）填入"slow"、"fast" 或毫秒

jQuery fadeIn()淡入

jQuery fadeOut()淡出

jQuery fadeToggle()淡入淡出切换

jQuery fadeTo('slow',0.5)颜色慢慢变淡50%

--------------------------------------------

滑动（类似淡入淡出）

slideDown()
slideUp()
slideToggle()

---------------------------

动画：

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

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

必需的 params 参数定义形成动画的 CSS 属性。
params例：left：‘250px’
—————————
animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
—————————
animate() - 使用队列功能

内部可以写多次变换

========================
停止动画：

stop(true,true)
无参数：停止当前的动画
一个参数true：停止所有的动画
两个参数true：停止所有的动画，完成第一个动作

======================

Callback函数

 

普通匿名函数，写在上面实现效果之后

 

=======================

链(Chaining）

 

很好理解，一次写多个语句

例：$("#p1").css("color","red").slideUp(2000).slideDown(2000);

 

===============

===============

捕获：

 获取内容：

text()- 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值数true：停止所有的动画，完成第一个动作

-----------------------

获取属性：

attr() 

==============

设置：

内容：

text()、html() 以及 val() 的回调函数

---------------------

属性：

例：attr("href","http://www.runoob.com/jquery")

------------------------

attr() 的回调函数 

改变href的数据

===================

添加删除元素：

 

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容
• remove() - 删除被选元素（及其子元素）
• empty()-从被选元素中删除子元素

 

======================

获取并设置 CSS 类：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

================================

尺寸：

（不包括内边距、边框或外边距）

• width()
• height()

（包括内边距）

• innerWidth()
• innerHeight()

（包括内边距和边框）

• outerWidth()
• outerHeight()