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

Posted 2020-08-27

学习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 方法不会缓存数据，并且常用于连同请求一起发送数据。