第一月小知识点

Posted 2020-09-30

1.最少写出5个jq中的伪类选择器：

答案：
 　　$(‘.box li:first‘)

 　　$(‘.box li:last‘)

 　　$(‘.box li:eq(3)‘)

 　　$(‘.box li:odd‘)

 　　$(‘.box li:even‘)

-------------------------------------------------------------
2.请写出jq中怎么来获取样式、以及怎么来设置一个样式、还有怎么来批量设置样式：

答案：
 　　alert($(obj).css(‘width‘))

 　　$(obj).css(‘width‘,‘100px‘);
     
 　　$(obj).css({‘width‘:‘100px‘,‘height‘:‘100px‘,‘background‘:‘red‘});

------------------------------------------------------------
3.请写出jq动画方法animate里面所有的参数：

答案：
　　 $(‘#box‘).animate({‘width‘:‘300px‘,‘height‘:‘300px‘}，

　　 {duration:1000,easing:‘easeOutElastic‘,complete:function( ){}});

-----------------------------------------------------------
4.写出jq中获取属性，设置属性，以及设置批量属性，还有删除属性：

答案：
 　　获取   $(obj).attr(name)

 　　设置   $(obj).attr(name,value)

 　　设置批量    $(obj).attr({name:value,name1:value1......})

 　　删除     $(obj).removeAttr(name)

-------------------------------------------------------
5.请写出jq中的dom操作的添加的：4个方位的方法：

  先写一个html代码：

 　　 <div id="div1">

  　   <h2></h2>

 　　 </div>
答案：
  　　1.div1内部h2的后面！  $(‘<h2>wefwefewf</h2>‘).appendTo(‘#div1‘);

  　　2.div内部h2的前面！ $(‘<h2>wefwefewf</h2>‘).prependTo(‘#div1‘);

  　　3.div1的前面！ $(‘<h2>wefwefewf</h2>‘).insertBefore(‘#div1‘);

  　　4.div1的后面！ $(‘<h2>wefwefewf</h2>‘).insertAfter(‘#div1‘);
 
---------------------------------------------------
6.请写出jq中的事件冒泡俩个方法：

答案：
　　 ev.stopPropagation( );//单纯阻止事件冒泡

　　 return false;//也可以阻止冒泡，但是阻止默认事件

------------------------------------------------------
7.请写出jq中的阻止默认事件的俩个方法：

答案：
 　　return false;//阻止默认事件，但是也可以阻止冒泡

 　　ev.preventDefault( ); //单纯阻止默认事件

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

8.用jq怎么来获取元素的单纯的宽？

答案：
 　   $(‘#box‘).width( )

 　   1.获取到的是单纯的元素宽

 　　2.得到的结果是number类型

-------------------------------------------------------
9.用jq怎么来获取元素的盒模型的宽：

答案：
 　  $(‘#box‘).outerWidth( ) ---和原生的offsetWidth一样！

   　1.盒模型的宽高(包括padding和border)

   　2.得到的结果是number类型

------------------------------------------------------
10.用jq怎么来获取元素距离左边的距离：

答案：
 　   $(‘#box‘).offset( ).left

        相当于原生offsetLeft

------------------------------------------------------
11.编写一个最简单的jq插件：让一个div变红！写出编写插件的代码及其使用代码：

答案：
　　 $.fn.toRed=function( ){

　　  this.css(‘background‘,‘red‘);

　　      }

 　　$(function( ){

 　　 $(‘div‘).toRed( );

 　　    })

---------------------------------------------------------
12.写出拖拽使用的三个事件名称代码：

答案：
 　　鼠标按下  onmousedown

　　 鼠标移动  onmousemove

　 　鼠标抬起  onmouseup

-------------------------------------------------------
13.写出清除浮动的三种方式！代码以及描述：

答案：
    方法一：.clearfix:after{

         display:block;

         clear:both;

         content: ‘ ‘;

   }
     方法二：给浮动的最后一个元素加clear:both

     方法二：给夫级加overflow:hidden
-------------------------------------------------------
14. 写出maigin的两种bug的场景代码：

答案：
　　margin 塌陷
 　　<div class="div1"></div>
　　 <div class="div2"></div>
　　 css:
  　　  div1{margin-bottom:100px;}
   　　 div2{margin-top:100px;}
　　 正常思维：200px
 　　bug:100px  那个值大就听那个的
          拖拽夫级
 　　<div>
 　　    <p></p>
　　 </div>
　　 css:
    　　 p{mrgin-top:100px;}
 　　正常思维：
　　 p距离div的上方是100px;
 　　bug：div 距离body上方是100px
　　　　解决方案： a.只用一个方向的margin

  　　 　　　　　　  b.用padding代替margin拖拽父级

　　　　解决方案： a.加边框

   　　　　　　　　  b.用padding

    　　　　　　　　 c.overflow:hidden;

------------------------------------------------------
15. 写出解决图片被标签所包时底部产生的几像素bug的俩种方法---切记写全了，解决的代码加给谁:

答案：
 　   1.img { vertical-align:top; } 

 　　2.img { display:block; }

-----------------------------------------------------
16.请写出以下内容的优先级：默认、标签、class、行间、继承、id、*

答案：
 　　行间 > id > class > 标签  > * > 默认 > 继承

-----------------------------------------------------
17.写出一个div在浏览器中绝对居中的代码

方法一：已知元素的高宽

　　#div1{

 　　   　　width:100px;

  　　 　　 height:100px;

  　　　　  position: absolute;        /*父元素需要相对定位*/

　　　　    top: 50%;

 　　　　   left: 50%;

  　　　　  margin-top:-50px ;   /*二分之一的height，width*/

  　　　　  margin-left: -50px;

  　　 }
          
方法二:未知元素的高宽

 　　 #div1{

  　　　　  width: 200px;

   　　　　 height: 200px;

   　　　　 margin:auto;

  　　　　  position: absolute;        /*父元素需要相对定位*/

  　　　　  left: 0;

  　　　　  top: 0;

  　　　　  right: 0;

  　　　　  bottom: 0;

   　　 }

-----------------------------------------------------
18.写出在原生js中获取一组元素的方法最少3个：

答案：
　　document.getElementsByTagName

　　document.getElementsByName

　　document.getElementsByClassName
 
----------------------------------------------------
19.写出原生js中获取一个元素的方法最少2个

答案：
　　document.getElementById/

　　document.querySelector

-----------------------------------------------------
20.写出3个原生js的DOM操作的方法

答案：
       创建：createElement(‘li‘)
　　添加：appendChild(要添加的标签，添加在这个位置标签之前)  
        删除removeChild( )

------------------------------------------------------
21.写出classList的添加，读取，删除方法

答案：
　　添加class名：classList.add( )

　　删除class名：classList.remove( )

　　查找class名：classList.contains( )

---------------------------------------------------
22.写出3个截取字符串的方法

答案：
　　slice( )

       substring( )

       substr( )

---------------------------------------------------
23.写出2D转换的所有方法。移动，缩放，旋转，倾斜

答案：
　　translate(100px,100px)

        scale(1,2)宽和高

        rotate(20deg,)角度

        skew(2deg,3deg)角度

---------------------------------------------------
24.写出background的css3的新增属性

答案：
  　  background-clip 

        background-origin

        background-size(100%,100%)  背景图片大小 一个值代表宽 两个值代表宽和高

--------------------------------------------------
25.IE和DOM事件流的区别

答案：
       1.执行顺序不一样

       2.参数不一样

       3.事件加不加on

       4.this指向问题

---------------------------------------------------
26.写出angular的自定义服务的4种方式

答案：
              factory    provider    service    value    constant

       1.$provide.factory(‘$factoryService‘,function(){

　　　　 return(a:1,b:2)
          })

　　
---------------------------------------------------
27.写出angular的5种基本过滤器

答案：
　　currency 格式化数字为货币格式。

　　filter  查找关键字。

　　lowercase 格式化字符串转为小写。

　　orderBy  根据某个表达式排列数组。

　　uppercase 格式化字符串为大写。

　　例： {{a|data}}

---------------------------------------------------
28.写出声明的3种方式,并描述他们的区别

答案：
 　   var     let     const

　　var  ：声明变量

 　              函数作用域

　　let  ：声明变量
 
　　          有{}作用域（块级作用域）

 　             不能重复声明

 　             代替封闭空间解决I值的问题

        const ：声明常量

 　                 常量不能重新赋值

 　                 常量不能二次修改 初始化的时候 必须都设置值！

---------------------------------------------------
29.ES6写出复制数组的方法

答案：
 　　Array.from( )

         [...arr]

---------------------------------------------------
30.写出4种循环的基本结构

答案：
   　 for  in

        for of

        while

        do while

---------------------------------------------------
31.例举3种强制类型转换和2种隐式类型转换?

答案：
        强制parseInt( )        parseFloat( )          Number( )

        隐式   ==      !!   

---------------------------------------------------
32.split() 、join() 的区别

答案：
         split()是切割成数组的形式

         join() 是将数组转换成字符串

---------------------------------------------------
33.写出css过渡的使用方式。

答案：
　　transition:1s all ease   简写属性，用于在一个属性中设置四个过渡属性。
 
　　transition-property  规定应用过渡的 CSS 属性的名称。

　　transition-duration  定义过渡效果花费的时间。默认是 0。
 
　　transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
　　
        transition-delay  规定过渡效果何时开始。默认是 0。

----------------------------------------------------
34.那些css属性可继承？不可继承

答案：
　　可继承： font-size font-family color, ul li dl dd dt;

　　不可继承 ：border padding margin width height ;

----------------------------------------------------
35：超链接访问后hover样式就不出现的问题是什么？如何解决？

答案：
           解决方法是改变CSS属性的排列顺序:

　　　L-V-H-A（link , visited , hover , active）

----------------------------------------------------
36.说说display属性有哪些？可以做什么？

答案：
　　display:block行内元素转换为块级元素

　　display:inline块级元素转换为行内元素

　　display:inline-block转为内联元素

----------------------------------------------------------------
37.写出原生ajax的代码基本实现步骤

答案：
 　　1、创建XMLHttpRequest对象
 　　2、建立连接(连接到服务器)
 　　3、发送请求
 　　4、获取相应数据(接收返回值)
    var Ajax= {
 get: function (url, fn) {
  // XMLHttpRequest对象用于在后台与服务器交换数据         
  var obj = new XMLHttpRequest();
  obj.open(‘GET‘, url, true);
  obj.onreadystatechange = function () {
   // readyState == 4说明请求已完成
   if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) {
    fn.call(this, obj.responseText);  //从服务器获得数据
   }
  };
  obj.send();
 },
 // datat应为‘a=a1&b=b1‘这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
 post: function (url, data, fn) {
  var obj = new XMLHttpRequest();
  obj.open("POST", url, true);
  // 添加http头，发送信息至服务器时内容编码类型
  obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  obj.onreadystatechange = function () {
   // 304未修改
   if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
    fn.call(this, obj.responseText);
   }
  };
  obj.send(data);
 }
    }