8.11jQuery遍历, attr,prop,data的区别,trigger和triggerhandler的区别,事件侦听传参和抛发传参

8.11早考

1. 简述:first :first-child,:first-of-type的区别
   • :first 筛选出第一个元素
   • :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
   • :first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

2.写出使用jQuery遍历数组，对象，jQuery对象的方法

• 遍历数组

  var arr=[1,2,3,4],
  $ech(arr,function(index,item){
  console.log(index,item);
  });
  

• 遍历对象

  var obj={a:1,b:2.c:3};
  $each(obj,function(key,value){
  console.log(key,value);
  });
  

• 遍历jQuery对象

  静态方法：
  $each($("div"),function(index,item){
  console.log(index,item);
  });
  实例化元素方法
  $("div").each(function(index,item){
  console.log(index,item);
  });
  

3.设置多个元素多个不同的标签属性和不同的属性值

$("div").attr({
b:"1",
c:function(index,item){
return index+1;
}
})

4.简述attr,prop,data的区别

• attr:是设置在DOM标签上的属性
• prop：是设置在DOM对象上的对象属性
• data：是设置在jquery映射对象上的属性，是为了不污染DOM对象的属性

5.通过jquery创建一个div，设置宽高为50，背景色是红色，位置是100。

$("div").css({
width:50,
height:50,
backgroundColor:red,
position:"absoulte",
left:100，
top:100
})

6.简述trigger和triggerhandler的区别

​

• trigger会触发默认事件，triggerhandler不会。

​ 简单来说，如果你要触发一个Form表单的submit事件。那么使用trigger，表单也会提交。而使用triggerHandler表单是不会提交的。如果你触发的是自己的自定义事件，都是没有浏览器默认行为的事件，那么两者效果其实一样。

7.举例说明事件侦听传参和抛发传参

​ 使用jQuery,不能使用addEventListener来监听，也不能使用despatchEvent来抛发事件，jQuery是自己重封过的。

$("div").on("click",{a:1},function(e){
console.log(e.data);
})//监听


$("div").on("chilema",function(e,o){
           console.log(e,o);
      })
  $("div").trigger("chilema");//抛发事件