1.jq与DOM对象转换
:
- DOM转换为jq对象: $(‘DOM对象’)
- jq转换为DOM对象:
(1)$(‘div’)[index]
(2)$(‘div’).get[index]------index索引号
2.jq样式操作
:
设置类样式:操作类里面的参数不需要加点
- 添加类:$(“div”).addClass(“current”);
- 移除类:$(“div”).removeClass(“current”);
- 切换类:$(“div”).toggleClass(“current”);
3.jq元素操作
:
获取元素:
- 获取固有的属性值如a链接的href ,title等:element.prop(“属性名”)
- 设置:$(“a”).prop(“属性名”,“后来属性值”);
- 获取元素自定义属性值 attr():attr(“属性值”)
- 设置:attr(“属性”,“属性值”)
遍历元素:对同一类元素做不同操作
$("div").each(function(index,domEle){xxx;})
回调函数中的2个参数:index为每个元素的索引号;domEle是DOM元素对象,如果用jq方法,需将其转换为jq对象$(domEle)
添加元素
(1)内部添加
- $(“ul”).append(li);添加到内容最后面
- $(“ul”).prepend(li);添加到内容最前面
(2)外部添加
- element.after(“内容”)—目标元素后面
- emement.before(“内容”)—目标元素前面
注:内部添加元素,生成之后为父子关系,而外部元素添加后为兄弟关系
删除元素
- $("ul’).remove();—删除ul
- $(“ul”).empty();—删除ul中的子节点
- $(“ul”).html(" ");—删除ul中的子节点
4.jq效果
:在每次效果之前添加stop()来停止排队
前两种语法:
show([speed],[easing],[fn])
(1)speed:速度字符串(“show”,“normal”,“last”)或者动画时长毫秒数
(2)easing:切换效果 默认为"swing’(先慢,中间快,最后慢),可用"linear"(匀速)
(3)fn:回调函数,在动画完成时执行函数,每个元素执行一次
淡入淡出语法:
fadeTo([speed],poacity,[easing],[fn])
其中opacity透明度必须写,0-1之间
自定义动画:
animate(params,[speed],[easing],[fn])
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不带引号,属性值若为数字可不加单位,如果是复合属性应用borderLeft驼峰命名法
$(function(){
$("button").click(function(){
$("div").animate({
left:500,
top:300
},500)
})
])
5.筛选方法
- partent() :只寻找最近父级-----$(“li”).partent();
- partents() :寻找所有的父级----$(“li”).partents(“zzz”) 即为寻找名为zzz的父级
- children(selector) :最近子一级—$(“ul”).children(“li”) 相当于 $(“ul>li”)
- find(selector):选择所有的子级—$(“ul”).find(“li”) 即找到ul中所有的li
- siblings(slector):选择兄弟级,不包括自己—$(".one").siblings(“li”)
- eq(index):选择相同第几个—$(“li”).eq(2)
- first() : $(“div p”).first()—div中的第一个p
- last() : $(“div p”).last()—div中的最后一个p
6.jq事件
:
(1)事件处理on():把原来子元素上的事件赋给父元素;给未来动态创建的元素绑定事件
$("ul").on("click","li",function(){
alert(11);
});
触发对象li,作出反应ul
(2)事件处理off()
- $(“p”).off()—解除p元素的所有事件
- $(“p”).off(“click”)—解除p的点击事件
- $(“ul”).off(“click”,“li”)解除事件委托
(3)阻止事件
- 阻止默认:event.prentDefault()或return false;
- 阻止冒泡:event.stopPropagation()