专栏首页web前端JavaScript基础学习--02属性操作

JavaScript基础学习--02属性操作

一、思路

1、模拟手机聊天思路:

     a.静态页面html+css,包括双发短信发送成功后的基本样式。

     b.获取头像、输入框、发送按钮和聊天内容显示界面等需要操作的对象。

     c.点击发送按钮,获取输入框内容和头像信息,将输入框内容和现有内容以字符串拼接,并根据头像信息(belongs)判断发送内容显示位置。

     d.当输入内容为空时,弹出“请输入内容”警示框;否则将聊天内容显示界面信息替换成c拼接出的信息。

     e.点击头像图片,获取现有头像信息(data-belongs),判断是哪一方头像。用if条件判断,如果是甲方(one),则将头像替换成乙方(starts2.jpg),并头像信息切换成乙方信息(two);否则换成甲方(starts1.jpg[one])。

二、属性操作要点:

1、属性获取直接以(obj.属性名)的方式,注意点是属性名不可出现(-),以驼峰法变幻,如(Odiv.font-size 错误! --》Odiv.fontSize)

2、class 不是属性(width、src、style),也不是关键字(var),而是保留字,所以Object.class=XX错误,--》Object.className

3、所有的相对路径都别拿来做判断,例如img/1.jpg , 绝对路径可以,例如http://www.baidu.com

4、颜色值、innerHTML值也别做判断,因为每个浏览器解析不同

5、对button按钮操作js:    

     oInput.type = 'checkbox'     IE8及以下不支持此js!!属性动态修改。     解决办法:点击后将input type=‘button’隐藏,显示checkbox即可。

6、object.style.float = 'left' 此js写法不兼容所有浏览器,所以

     法1:object.style.styleFloat = 'left' + object.style.cssFloat = 'left' 

     法2:用className方法进行属性添加即可。

7、js中允许所有(.)替换成(【】),且(.)后面的值无法修改(必须是非变量),

     如:var thisVal = oAttr.value;  ob.style.thisVal = XX 错误(这种做法相当于给元素增加了新属性thisVal),--》ob.style[oAttr.value] = XX 即可。

8、css样式多人协作时     .helenContant #id{……}     但是单独确定不会id冲突的情况下直接写成     #id{……}     即可。

9、透明度

     filter: alpha(opacity:80);

     (兼容IE) opacity:0.8;

10、word-wrap和word-break区别:<注:中文一般主动换行,西文单词需要设置>

     (1)word-wrap: break-word;      当西文单词太长,首先考虑换行,如果换行还太长,强制在该行断句。

     (2)word-break: break-all;          当西文单词太长,强制断句。

     (3)综上,考虑外文可读性,用word-wrap: break-word;     为了省空间,无需考虑任何问题,强制断句,用word-break: break-all;

11、white-space: nowrap; 处理元素内的空白,只在一行内显示(不换行)。    

      overflow: hidden;超出部分隐藏。    

     text-overflow: ellipsis;超出部分省略号显示。

 1 //必须全部书写
 2         p{
 3             overflow: hidden;
 4             text-overflow:ellipsis;
 5             white-space: nowrap;
 6         }
 7  
 8            .unilineText {  /*设置文本为单行,如果超出长度用省略号代替*/
 9                 width: 300px;
10                 overflow: hidden;
11                 text-overflow: ellipsis;
12                 -o-text-overflow: ellipsis;
13                 -webkit-text-overflow: ellipsis;
14                 -moz-text-overflow: ellipsis;
15                 white-space: nowrap;  /*规定段落中的文本不进行换行*/
16             }
17  
18            .multiLineText {  /*设置文本为多行,如果超出长度用省略号代替*/
19                 width: 200px;
20                 word-break: break-all;
21                 display: -webkit-box;
22                 -webkit-line-clamp: 3;  /*限制在一个块元素显示的文本的行数*/
23                 -webkit-box-orient: vertical;
24                 overflow: hidden;
25             }
26          

12、滚动条随着内容的增多,一直显示在最底部:

     document.getElementById("滚动条所在层的id").scrollTop=document.getElementById("滚动条所在层的id").scrollHeight;

二、条件判断要点:

1、要用条件判断但是没有合适的判断语句的时候,创建条件。         

     法1:flag(1/0或true/false)判断。     例如,点击图片切换图片,此时用if条件判断,但是并没有合适的判断句,此时flag = true/false;

     法2:通过H5中的data-*判断。

     法3:通过class类的添加与减少判断。推荐!

三、其他要点:

1、表单提交按钮input和button、a的差异和选择。

     首先input(submit)和button,考虑到浏览器的通用性首选input,但是考虑到表现力(button中value和显示文字可以不同)首选button。

     其次,如果不用表单直接提交的方式(action),而是选择异步或者其他方式提交,则选择a标签。避免了

          (1)ff和opera下line-height对input['button'],button不起作用。

          (2)submit按钮在IE6下会有一些兼容的问题,不好统一。 

          (3)在按钮有一些交互效果的时候,a标签更容易实现,hover效果便可(有些浏览器只支持a标签的hover的css效果(IE6不支持button等其他hover))

     注意:a标签表单不会自动提交,需要写函数:

1 function tosubmit(){ 2 var myform=document.getElementByIdx_x("myform"); 3 myform.submit(); 4 }

     最后,在非表单提交的场合:button是按钮,a是跳转,但是某些方面a兼容性好,支持hover样式,支持line-height。

2、js执行和顺序

     2.1  函数的定义方式大体两种:定义式和赋值式

          a定义式     function fn() {……}

          b赋值式     var fn = function() {……};

          区别:

               a定义式函数即函数声明的方式,当js代码加载时,会首先对其进行预处理(首先对该函数进行从头至尾读一遍,包括函数内部的各种操作,如此一来,调用此函数时,不必先声明后使用,但是,可能会影响性能!!!)

               b赋值式函数类似于变量的定义,只是赋值,不会先执行函数内部的各种操作。所以相对于定义式函数来说性能好,但需要严格按照先定义后使用的原则。

          Fn1();                                            var Fn2 = function(){
          function Fn1(){                                        alert("Hello wild!");
              alert("Hello World!");                        }xiangyuanlu
          }                                                 Fn2();

     2.2  JavaScript是多线程or单线程?

          严格讲,js是没有多线程概念的,所有的程序都是单线程依次执行。但是例如延时执行、ajax异步加载看起来像是“多线程”,其实是“回调”,类似于操作系统中的“中断和响应”,比如ajax异步加载,代码执行到ajax部分时,代码中断并开始往下执行,当ajax请求数据返回时,再“回调”执行ajax(此时中断其他正在执行的代码《如果有正在执行的代码的话》),最后再执行剩余代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于微信二次分享,描述变链接的解决方法(一)----文档说明

    本篇博文只是个人工作中的分享总结,仅代表个人观点,虽然解决了不少网友的问题,但同时也引来了一些网友的不满,所以特此声明,当您遇到本博文解决不了的问题,可以尝试重...

    用户1148399
  • SASS学习笔记(一)

    一、为什么使用SASS CSS不是编程语言,没有变量、条件语句等等,只是单纯的描述,因此为CSS加入编程元素(即“CSS预处理器”)。其基本思想:用一种专门的编...

    用户1148399
  • webpack基本打包配置流程

    项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index....

    用户1148399
  • fasfdfs安装记录(CentOS7)

    1. 安装libfastscommon时,git报错:Peer reports incompatible or unsupported pro

    休辞醉倒
  • 如何将一个PDF文件里的图片批量导出

    假设我有下面这个PDF文件,里面有很多图片,我想把这些图片批量导出,而不是在Adobe Acrobat Reader里一张张手动拷贝:

    Jerry Wang
  • 波士顿深度学习峰会上的AI算法偏差和伦理讨论

    今天在波士顿举办的深度学习峰会上,一群伦理学家和工程师讨论了人工智能面临的一些最大挑战:算法偏差,人工智能伦理以及是否应该广泛提供创建人工智能的工具。

    AiTechYun
  • 玩转OpenFeign

    很多时候,我们需要在项目中调用一些第三方接口,例如对接支付宝支付、微信支付,调用支付接口。如果项目中引入了OpenFeign,那么我们是否可以使用OpenFei...

    Java艺术
  • J. Med. Chem. | 用图形注意机制推进药物发现分子表征的边界

    今天给大家介绍的是上海科技大学免疫化学研究所蒋华良院士团队在Journal of Medicinal Chemistry上发表了一篇名为“Pushing the...

    智能生信
  • Pycharm中一些不为人知的技巧

    工欲善其事必先利其器,Pycharm 是最受欢迎的Python开发工具,它提供的功能非常强大,是构建大型项目的理想工具之一,如果能挖掘出里面实用技巧,能带来事半...

    OpenCV学堂
  • 为里皮献策:国足再进一步,试试人工智能 | 附机器人世界杯集锦

    唐旭、问耕 发自 凹非寺 量子位·QbitAI 报道 一场有着多重意义的比赛昨晚结束,国足坐镇长沙击败韩国队。 ? “天亮了”,赛后李毅大帝在朋友圈和微博上说。...

    量子位

扫码关注云+社区

领取腾讯云代金券