jq样式、元素操作，效果，筛选方法与转换，事件对象

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])

其中opacity透明度必须写，0-1之间

自定义动画：

$(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()