JS阶段学习----问题小结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS阶段学习----问题小结相关的知识,希望对你有一定的参考价值。

学习js有一段时间了,断断续续的写了几个项目,就近期写东西时遇到的问题,写个简单的笔记,内容不太系统,比较零碎。


 

CSS部分:

1.文本溢出用省略号显示:p { width:100px;   overflow:hidden;   white-space:nowrap;  text-overflow: ellipsis;}

2.鼠标状态cursor : pointer , wait , help , text , crosshair , default , move

3.十六进制:0~9 ABCDEF 10

4.解决鼠标hover带有border的元素时,其他元素被挤发生位移的方法:

    (1).预留空间:足够的height , box-sizing:border-box;
    (2). 初始设置边框:border:3px solid transparent ;

5. 去掉{display:inline-block;}产生的几像素误差:{font-size:0;}

6.标准盒子模型和怪异盒子模型切换:{box-sizing:border-box / content-box ;}

7.  ------半角空格; -----全角空格;

8.设置动画完成后的状态{animation-fill-mode : none | forwards | backwards | both;}

9.由 SVG 定义的图形是XML格式

10.PS中选择图层便捷方法----方法1.顶部勾选自动选择、方法2.ctrl+点击要选择的图层+右击存储为智能对象


 

JavaScript和Jquery方法异同

1.dom中 insertBefore(new,old); replaceChild(new , old);         (js方法)

2.ele.remove()------------元素被删除,在文档流中不存在了      (js方法)

  $(ele).empty()-----------元素被置空,包括内部的标签以及文本,ele标签依旧存在  (jquery方法)

3.offset().left,offsetLeft, position().left, css中left的差异:

  (1).jquery中offset():永远相对于document获取偏移量(与父容器是否有定位无关)

             offset().left,offset().top   (没有单位)
  (2).jquery 中position() :相对上一层级(position不为static)父容器的偏移量;  
              position().left;position().top;  (没有单位)

  (3).jquery中css(‘left‘):读取的是在CSS中为该元素设置的定位    (单位:px)

  (4).js方法offsetLeft:获取的是相对于上一层级(position不为static)父容器的偏移量;    (没有单位)

4. 把一个jquery对象转换成js对象:$(‘ele‘).[0]   , $(‘ele‘).get(0):     

5.jquery操作元素

    $(‘ele‘).prepend(): 在被选元素的开头插入内容
    $(selector).unwrap()--删除被选元素的父元素。
    $(selector).wrap()--给被选元素添加父元素。
    $(":header")----h1-h6标题标签
    .delay(1000)-----延迟一秒执行后续动作  (此方法与setTimeout()差别很大,用于动画操作很不便,对于两者的区别在之前的笔记中有专门的文章介绍!)
    .map() 方法对于获得或设置元素集的值特别有用。
          $(‘:checkbox‘).map(function() {
              return this.id;
          }).get().join(‘,‘);

6.jquery方法.bind()和.on()差异

  (1):bind():为每个匹配元素的特定事件绑定事件处理函数。
  bind(type,[data],fn)
  type: 含有一个或多个事件类型的字符串,由空格分隔多个事件, 如"click"或"submit",还可以是自定义事件名。
  data:作为event.data属性值传递给事件对象的额外数据对象
  fn:绑定到每个匹配元素的事件上面的处理函数

  (2):on()在选择元素上绑定一个或多个事件的事件处理函数。
  on(events,[selector],[data],fn)
  events:一个或多个用空格分隔的事件类型和可选的命名空间, 如"click"或"keydown.myPlugin" 。
  selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
  data:当一个事件被触发时要传递event.data给事件处理函数。
  fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

对比发现on 和bind的 差别不大, 但是on多一个[selector] 可以过滤指定元素

on事件的优点:

    jquery中对于动态添加的元素,可以使用on事件给新增的元素添加事件,不必在添加元素的函数中添加事件(会造成每次都要注册事件)!

       可以用js中的onclick=function()或者jquery中on(click,ele,function(){ })

 


 

1. 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
  GET - 从指定的资源请求数据
  POST - 向指定的资源提交要处理的数据
  GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
  POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

 

























以上是关于JS阶段学习----问题小结的主要内容,如果未能解决你的问题,请参考以下文章

学习阶段小结 8.1

Ofbiz项目学习——阶段性小结——删除数据

Ofbiz项目学习——阶段性小结——服务返回结果

学习记录001-007-阶段习题小结

JS高级技巧学习小结

第四章学习小结