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

时间: 2024-11-08 20:43:45

JS阶段学习----问题小结的相关文章

IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同的岗位所涉及的技术也会有差别,所以先要确定自己的发展定位,收集要学习的内容,整理好学习的顺序.很多时候,成功除了勇气.坚持不懈外,更需要方向.也许有了一个好的方向,成功来得比想象的更快.如果在错误的路上奔跑,再怎么努力也是白搭.学习Web前端也是如此,首先应该选择一个正确的学习路线.HTML5学习线

JS入门学习,写一个时钟~

<!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <title>数码时钟</title> <meta charset="gb2312"> <style type="text/css"> *{ padding:0; margin:0;} body{background:rgb(0,2

Vue.js 基础学习

今天我开始了Vue.js 的学习. 那么什么是Vue.js 呢? Vue.js是一套开发Web页面的JavaScript脚本框架.听起来感觉很难,不过据说,Vue.js是Web-Javascript脚本框架中最容易上手的框架.所以我便选择了先来学习这个. 要学习Vue.js首先就要获取库文件了,在网上有很多地方可以找到,我是在bootcdn上找到的 接下来我们通过Vue输出一串Hello World ! 首先引入vue. <script src="https://cdn.bootcss.c

Node.js知识点学习

Node.js知识点学习 一.基本概念 Node.js,或者 Node,是一个可以让 JavaScript 运行在服务器端的平台.可以说,Node.js开创了javascript模块化开发的先河,早期的javascript需求都很简单,基本都是写成函数的,然后是面向过程的写法,后来慢慢的引入面向对象开发思想,再后来就慢慢写成 类.最后node.js的出现才开始有了js模块化开发的概念,这使得臃肿的js代码免去了命名冲突等一系列开发难题. Node最大的特点就是采用了异步式I/O与事件驱动的架构设

谈谈我的高中阶段学习情况以及大学现状,还有对未来的规划和憧憬

谈谈我的高中阶段学习情况以及大学现状,还有对未来的规划和憧憬 作者:Luosd     时间:2017年春节 光阴似箭,日月如梭,正是经历了这些年的光阴,才真正懂得了这句话是多么的正确,回首过去,仿佛昨日还沉浸在刚入校园的喜悦中,而事实上,现在已经到了要离开校园,走进社会的时候了.这篇文章是自己一直想写却没有写的,现在,村里的一位小伙伴来找我,她们老师给她们布置了一道寒假作业,这才开始写的,可见,我是多么的不自觉呀! 壹:我的高中阶段学习情况 我是一名经历了两次高考的"高三党老党员",

js数组学习整理

原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); //长度为3 var colors = new Array('red','blue');//初始化 其中,在声明数组的时候,去掉new操作符,也可以. 还有一种初始化数组的方式,使用数组字面量表示法 . 数组字面量由一对包含数组项的方括号表示,多个数组项之间用逗号隔开. var colors = [ '

js入门学习~ 运动应用小例

要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ ----------------------------------------------------js代码如下 ----------------------------------------------------- //执行函数window.onload = function(){ //声明控制变量 var aDiv = docu

2.Freshman阶段学习内容的确定

我刷知乎.在知乎上答题的程序员,不是很牛逼就是更牛逼,说起各种系统.各种系统的各种版本.各种语言.数据库.算法.IT届的各种圣战都有板有眼.信手拈来.头头是道,不得不服.这导致了一些非常严重的问题:我都想学,什么都想学,要学的东西太多了,但是不知道从什么地方学期,注意力全都分散了,而且已经花了好多精力找资料了...不由得使我想起大一的时候各种下资料分类整理归档,然后基本上都没看过.前面犯过的错历历在目,再犯的时候毫无察觉,死性不改,人类为何总是重复相同的错误T_T.所以花了一会儿静下心想了想,觉

js Array 学习

摘抄自<JavaScript权威指南> 1.join()返回生成的字符串.数组元素转化为字符串,拼接.默认分隔符:“,”. 2.reverse()返回逆序的数组,替换.数组中的元素倒序. 3.sort()返回排序后的数组,替换.数组中的元素排序.无参数:按字母表排序,undefined元素尾部:参数为比较函数: 4.concat()创建并返回一个新数组.新数组的元素:调用concat()的原始数组的元素,concat()的每个参数.参数自身是数组,则连接数组的元素,而非数组本身.不会递归扁平化