补充:
*$obj.eq(i)等价于$($obj[i]) 返回的是jQuery对象
*$(function(){});==windos.οnlοad=function(){};
写多次onload 后者会覆盖前者 $(function(){})则不会
1.jQuery是一个轻量级(低耦合度)的JS库,是一个优秀的JS框架
2.jQuery使用步骤:
*引入jQuery文件
*使用选择器选中节点
*调用API操作节点
3.*jQuery对象本质上是DOM数组(类数组,假数组)
*jQuery对象只能调用jQuery的API
*jQuery对象可以转换成DOM对象
4.大致规律
*选择器选中的是jQuery对象
*jQuery的API若返回的是节点,是jQuery对象(有例外)
*jQuery的API若返回的是值,通常是String
5.jQuery选择器
1)基本选择器
*元素选择器:$("标签名")
*类选择器:$(".class属性名")
*id选择器:$("#id")
*选择器组:$("#id,.importent")
2)层次选择器
*子孙元素:$("元素1 元素2")
*子元素:$("元素1>元素2")
*下一个弟弟:$("元素1+元素2")
*所有弟弟:$("元素1~元素2")
3)过滤选择器
*基本过滤(重点):
:first 第一个元素 :last 最后一个元素 :even 偶数行 :odd 奇数行
:not(过滤选择器 ) 选择指定选择器外的所有元素
:eq(index) 下标等于index的元素 :gt(index) 下标大于index的元素 :lt(index)下标小于index的元素
*内容过滤:根据文本内容定位
:contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含文本或子元素的空元素
*可见性过滤:根据可见性定位
:hidden 匹配所有不可见的元素或者type为hidden的 :visible 匹配所有的可见元素
*属性过滤:根据属性定位
[属性] 匹配具有给定属性的元素 [属性=value ] 匹配具有给定属性 并且值等于value的元素
[属性!=value ] 匹配具有给定属性 并且值不等于value的元素
*状态过滤:根据状态定位
:enabled 匹配所有可用的元素 :disabled 匹配所有不可用的元素 :checked 匹配所有选中的checkbox :selected 匹配选中的option
4)表单选择器 根据input的type来定位元素
:text , :password , :checkbox , :radio , :submit , :reset , :button , :file , :hidden
6.jQuery操作DOM
1)读写节点:
*obj.html/obj.html("..."); 读/写节点的HTML内容
*obj.text()/obj.text("..."); 读/写节点的文本内容
*obj.val()/obj.val("..."); 读/写节点的value属性值
*obj.attr("属性名")/obj.attr("属性名","属性值"); 读/写节点的属性值
2)增删节点
*创建节点:$("节点内容");
*插入节点: 父元素.append(obj); 做为最后一个节点添加 父元素.prepend(obj); 做为第一个节点添加
兄弟元素.after(obj); 做为下一个兄弟节点添加 兄弟元素.before(obj); 做为上一个兄弟节点添加
*删除节点: obj.remove(); 删除节点 obj.empty(); 清空节点
3)样式操作
*addClass("");追加指定样式
*removeClass("");移除指定样式
*removeClass();移除所有样式
*toggleClass("");切换样式
*hasClass("");判断是否有某个样式
*css("");读取css的值
*css("","");设置多个样式
4)遍历节点
*children()/children(选择器); 所有的子节点
*next()/next(选择器); 下一个兄弟节点
*prev()/prev(选择器); 上一个兄弟节点
*siblings()/siblings(选择器); 所有兄弟
*find(选择器); 查询满足选择器的所有后代
*parent();父节点
7.事件处理
1)事件后绑定:$obj.bind("事件类型",事件处理函数) 简写:$obj.事件类型(函数)
2)获取event对象:浏览器会自动传入event,为事件处理函数传个参接收即可
3)获取事件源:e.target
4)event对象常用属性:e.pageX/e.pageY
8.取消事件冒泡: e.stopPropagation();
9.合成事件:
*hover(mouseenter,mouseleave) 模拟光标悬停 设置的时候传入两个事件处理函数
*toggle(); 在多个事件响应中切换(在显示和隐藏之间切换)
10.模拟操作(电脑代替人的行为触发某些事件)
*$obj.trigger("事件类型") 简写形式:$obj.事件类型();
11.jQuery动画
1)显示,隐藏的动画效果(逐渐虚化)
*$obj.show(动画的执行时间,动画执行完后要执行的函数) $obj.hide()
2)上下滑动(无虚化的显示隐藏)
*slideDown() / slideUp() 用法同显示,隐藏
3)淡入淡出
*fadeIn() / fadeOut() 用法同显示,隐藏
4)自定义动画
*动画基于定位,通常都采用相对定位,永远以原始位置为目标设置偏移量
*animate(动画移动路径,动画执行时间,动画执行完后要执行的函数)
*$obj.eq(i)等价于$($obj[i]) 返回的是jQuery对象
*$(function(){});==windos.οnlοad=function(){};
写多次onload 后者会覆盖前者 $(function(){})则不会
1.jQuery是一个轻量级(低耦合度)的JS库,是一个优秀的JS框架
2.jQuery使用步骤:
*引入jQuery文件
*使用选择器选中节点
*调用API操作节点
3.*jQuery对象本质上是DOM数组(类数组,假数组)
*jQuery对象只能调用jQuery的API
*jQuery对象可以转换成DOM对象
4.大致规律
*选择器选中的是jQuery对象
*jQuery的API若返回的是节点,是jQuery对象(有例外)
*jQuery的API若返回的是值,通常是String
5.jQuery选择器
1)基本选择器
*元素选择器:$("标签名")
*类选择器:$(".class属性名")
*id选择器:$("#id")
*选择器组:$("#id,.importent")
2)层次选择器
*子孙元素:$("元素1 元素2")
*子元素:$("元素1>元素2")
*下一个弟弟:$("元素1+元素2")
*所有弟弟:$("元素1~元素2")
3)过滤选择器
*基本过滤(重点):
:first 第一个元素 :last 最后一个元素 :even 偶数行 :odd 奇数行
:not(过滤选择器 ) 选择指定选择器外的所有元素
:eq(index) 下标等于index的元素 :gt(index) 下标大于index的元素 :lt(index)下标小于index的元素
*内容过滤:根据文本内容定位
:contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含文本或子元素的空元素
*可见性过滤:根据可见性定位
:hidden 匹配所有不可见的元素或者type为hidden的 :visible 匹配所有的可见元素
*属性过滤:根据属性定位
[属性] 匹配具有给定属性的元素 [属性=value ] 匹配具有给定属性 并且值等于value的元素
[属性!=value ] 匹配具有给定属性 并且值不等于value的元素
*状态过滤:根据状态定位
:enabled 匹配所有可用的元素 :disabled 匹配所有不可用的元素 :checked 匹配所有选中的checkbox :selected 匹配选中的option
4)表单选择器 根据input的type来定位元素
:text , :password , :checkbox , :radio , :submit , :reset , :button , :file , :hidden
6.jQuery操作DOM
1)读写节点:
*obj.html/obj.html("..."); 读/写节点的HTML内容
*obj.text()/obj.text("..."); 读/写节点的文本内容
*obj.val()/obj.val("..."); 读/写节点的value属性值
*obj.attr("属性名")/obj.attr("属性名","属性值"); 读/写节点的属性值
2)增删节点
*创建节点:$("节点内容");
*插入节点: 父元素.append(obj); 做为最后一个节点添加 父元素.prepend(obj); 做为第一个节点添加
兄弟元素.after(obj); 做为下一个兄弟节点添加 兄弟元素.before(obj); 做为上一个兄弟节点添加
*删除节点: obj.remove(); 删除节点 obj.empty(); 清空节点
3)样式操作
*addClass("");追加指定样式
*removeClass("");移除指定样式
*removeClass();移除所有样式
*toggleClass("");切换样式
*hasClass("");判断是否有某个样式
*css("");读取css的值
*css("","");设置多个样式
4)遍历节点
*children()/children(选择器); 所有的子节点
*next()/next(选择器); 下一个兄弟节点
*prev()/prev(选择器); 上一个兄弟节点
*siblings()/siblings(选择器); 所有兄弟
*find(选择器); 查询满足选择器的所有后代
*parent();父节点
7.事件处理
1)事件后绑定:$obj.bind("事件类型",事件处理函数) 简写:$obj.事件类型(函数)
2)获取event对象:浏览器会自动传入event,为事件处理函数传个参接收即可
3)获取事件源:e.target
4)event对象常用属性:e.pageX/e.pageY
8.取消事件冒泡: e.stopPropagation();
9.合成事件:
*hover(mouseenter,mouseleave) 模拟光标悬停 设置的时候传入两个事件处理函数
*toggle(); 在多个事件响应中切换(在显示和隐藏之间切换)
10.模拟操作(电脑代替人的行为触发某些事件)
*$obj.trigger("事件类型") 简写形式:$obj.事件类型();
11.jQuery动画
1)显示,隐藏的动画效果(逐渐虚化)
*$obj.show(动画的执行时间,动画执行完后要执行的函数) $obj.hide()
2)上下滑动(无虚化的显示隐藏)
*slideDown() / slideUp() 用法同显示,隐藏
3)淡入淡出
*fadeIn() / fadeOut() 用法同显示,隐藏
4)自定义动画
*动画基于定位,通常都采用相对定位,永远以原始位置为目标设置偏移量
*animate(动画移动路径,动画执行时间,动画执行完后要执行的函数)