首页 > 代码库 > 零碎的前端知识点（为方便记录，每次更新都在最上面）

零碎的前端知识点（为方便记录，每次更新都在最上面）

2024-09-01 03:17:48   222人阅读

2017-01-15

获取元素属性的3种写法：

// 假设获取title属性 ，当title是变量的时候，考虑用1、3方式
element.getAttribute("title"); 
element.title;
element["title"];

——————————————————————————————————————————————————————————————————

2017/01/06

JavaScript 中 Number()、parseInt()、parseFloat()的区别：

有点多，重新整理了一份：http://www.cnblogs.com/zxjwlh/p/6258045.html

——————————————————————————————————————————————————————————————————

2016年12月21日

1、HTML

--Hyper Text Markup Language(超文本标记语言)

2、<!DOCTYPE HTML>声明理解

直译：！(警告??)  document (文档) type(类型) HTML(html)

人话：特别提示解析器（一般是浏览器内核解析），该文档类型是HTML5，请用相对应的解析方式解析。

3、常用标签

div 、 P 、span 

a 、img 、table - tr - td(th) 、form -input（select 、textarea 、button）

ul 、li

a (超链接、锚点、下载) 锚点用id不用name、下载是HTML5最新加的属性，具体查看W3C a标签下载

4、几个需要记忆的标签或属性

字体-font 、

加粗-font-weight：bold、strong、b(禁用)

斜体-font-style:italic、i、em

删除线-text-decoration:line-through、s、del

——————————————————————————————————————————————————————————————————

2016年12月23日

1、inline-block  

块元素在一排显示

内联支持宽高

默认内容撑开宽度

标签之间换行被解析

IE6/7不支持

2、float

定义：脱离文档流，按照指定方向移动，遇到父级边界或者相邻的浮动元素停下来。

内联支持宽高

脱离文档流

提升层级半层

浮动文档流遇到父级边界或者相邻浮动元素停下来

3、清除浮动

请见另一篇博客清除浮动

——————————————————————————————————————————————————————————————————

2016年12月29日

1、函数的预解析

 可以参考此博客，个人感觉很详细 理解JavaScript“预解析”

2、若变量没有赋值，函数声明高于变量的声明技术分享

 

但若变量被赋值，则变量的解析高于函数的解析（为防止误以为变量覆盖，调换了位置）

 技术分享

 

3、Jquery中prop()和attr()相对于checkbox的区别(可见不能用attr()进行checked判断)

 技术分享

技术分享 
<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="intersting" id="one" checked="checked" value=""/>
        <button id="button">显示prop和attr获取的值</button>
        <p class="prop"></p>
        <p class="attr"></p>
    </body>    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $("#button").click(function(){
            $(".prop").html("prop(): "+$("input[name=‘intersting‘]").prop(‘checked‘));
            $(".attr").html("attr(): "+$("input[name=‘intersting‘]").attr("checked"));
        })
    </script>
</html>
View Code

4、赋值换行符<br />和“\n”的区别

   （1） 用 innerHTML 是直接插入HTML代码，以HTML的方式解析换行当然用<br />

   （2） "\n"是向文本编辑框中插入换行，比如input、textarea

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <textarea name="" rows="3" cols="" id="text1"></textarea>
        <div id="text2"></div>
        <script type="text/javascript">
            document.getElementById("text1").value = "wang\nle\nhui";
            document.getElementById("text2").innerHTML = "wang<br />le<br />hui";
        </script>
    </body>
</html>

效果：

技术分享

——————————————————————————————————————————————————————————————————

2016年12月30日

1、JavaScript Boolean 类型

true ------非零数字、非空字符串、[](空数组)、”     “（一个空的字符串）

false------0、null、‘’、undefined、NaN(not a number)

2、JavaScript 类型转换

parseInt() \ parseInt("1000",2)

parseFloat() \ toFixed(number)

NaN \ isNaN \ Number 

3、逻辑运算符

与 &&

或 ||

非 ！

——————————————————————————————————————————————————————————————————

 

零碎的前端知识点（为方便记录，每次更新都在最上面）


联系
我们