JS,CSS基础

哈哈金馆长

已于 2022-04-26 10:50:40 修改

阅读量873

点赞数

分类专栏： js 文章标签： css3 js

于 2017-01-12 18:25:17 首次发布

本文链接：https://blog.csdn.net/u011971132/article/details/54380538

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

React部分

*props是用来组件之间传值
state是组件内的状态机
属性和状态，本来就各不相干
各司其职

*每次更改state之后会再次进入render渲染页面。所以尽量避免分开使用setState,如果业务上确实需要分开设置state。可以将render中的动态的部分抽离为子组件，再将父组件的值作为参数传到子组件中，子组件用ComponentReceiveProps接收参数，再在子组件的render中渲染页面。

CSS选择器：伪类（图文详解）

componentWillReceiveProps(nextProps){}

在组件接收新props时调用。初始渲染不调用此方法。老的props可以用this.props 新值就用nextProps查看 ,在此函数中调用this.setState（）不会触发附加的渲染。

react 子组件获取父组件传来的 props 问题

React组件的生命周期

axios的使用

如果后台使用@RequestParam在axios中使用params传参，如果后台使用@RequestBody在axios中使用data传参。

Vue部分

*Vue父组件向子组件传值

*Vue子组件向父组件传值

*Vue组件中slot的用法

*vue之this.$route.params和this.$route.query的区别

*this.$route和this.$router的区别

* js异步回调Async/Await与Promise区别

*v-bind的意义

*vue + elementui表单重置 resetFields问题（无法重置表单），我遇到的问题这里面没有，我遇到的问题是prop用v-bind绑定了（实际上我是用的简写的“:”），其实并不需要绑定；而且form表单的:model和ref都不能少，前者用于绑定表单数据，后者用于ref获取元素

* ElementUI的el-tree控件后台数据结构的生成以及方法的抽取

*深入理解vue中的slot与slot-scope

*Vue.js作用域插槽的理解和应用

*在vue.js中，计算属性和方法达到的效果是一样的，但是计算属性是基于依赖进行缓存的，只有message发生改变才会导致reverseMessage发生改变，只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数；而方法是每次调用都会执行。

*Mustache 语法(双花括号)不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
```
<div v-bind:id="dynamicId"></div>
```
*v-bind 指令用于响应地更新HTML特性,形式如:v-bind:href,缩写为 :href;
v-on 指令用于监听DOM事件形式如:v-on:click,缩写为 @click;

*v-bind和v-model的区别

*windows安装vue.js
http://www.jb51.net/article/108889.htm

*vue 路由传参中刷新页面参数丢失及传参的几种方式？

*详解vue组件三大核心概念

*ES6、ES7、ES8、ES9、ES10新特性一览

*js判断数据类型的四种方法

*CSS总结div中的内容垂直居中的五种方法

*JavaScript学习--Item9 call(),apply(),bind()与回调>>点击打开链接

*前端通用埋点方案

*CSS总结div中的内容垂直居中的五种方法

*两个div并排,两个div的style:display="inline-block",如果设置为display="inline",margin-top会失效,因为inline是行内元素,会把所有东西放在一列,而inline-block是块级元素,可以控制其长宽.

*z-index起作用的前提是position:relative

*浅谈ajax上传文件属性contentType = false>>原文内容

*解决iframe嵌套页面,外部页面禁用滚动条

假如有这么个iframe:

要实现隐藏垂直滚动条但保留滚动功能，需要在html5-demo.html页面中添加：

*EL表达式forEach中varStatus属性的作用:就拿varStatus=“status”来说，事实上定义了一个status名的对象作为varStatus的绑定值。该绑定值也就是status封装了当前遍历的状态，比如，可以从该对象上查看是遍历到了第几个元素：${status.count},原文链接:点击打开链接

*ajax有哪些回调函数》原文内容

jquery ajax回调函数带入参数》原文内容

*送你43道JavaScript面试题

*css样式在html中有三种存在形态：
内联样式：<div style="display: none"></div>
内部样式: <style></style>
外联样式：<link href="" />
三者的优先级为：内联样式>内部样式>外联样式。

*如何使得一行中的两个组件水平对齐

vertical-align:top;

display:inline-block;

margin-top:5px;

*button和input的区别:button有提交的效果,如果只需要绑定id事件,尽量避免使用button,否则会出现很诡异的绑定事件无效的情况.

                <body>
			<div id="alterWindow">
				<input type="text" id="cityCode" name="cityCode" class="form-control comBox" />
			</div>
			<div id="searchWindow">
				<input type="text" id="cityCode" name="cityCode" class="form-control comBox" />
			</div>
		</body>
		<script type="text/javascript">
			$(function(){
				$('#cityCode',$("#alterWindow")).bind({
					click:function(){
						$("#cityCode").val("aa");//此处虽然没有指定父节点,但是默认父节点是alterWindow,所以在点击第一个cityCode的时候,只有第一个input会显示字符串"aa"
					}
				})
			})
		</script>

*readystate有几个状态

包含 5 种可能的值，对应常数表如下：
0 WebBrowserReadyState.UnInitialized(未初始化，默认)： WebBrowser 对象已经创建，但不包含文档。
1 WebBrowserReadyState.Loading(载入)：已经导航到新的文档，但尚未发送请求。
2 WebBrowserReadyState.Loaded(载入完成)： 请求已经发送完成。
3 WebBrowserReadyState.Interactive(交互)：可以接收到部分响应数据。
4 WebBrowserReadyState.Complete(完成)：已经接收到了全部数据，并且连接已经关闭。
上面的常量是包含在 System.Windows.Forms 命名空间下的，这个命名空间是默认声明好的。
其实如果是判断网页是否加载完成，应该用 WebBrowser 的 DocumentCompleted 事件来判断。
用 ReadyState 也可以吧，加个 Timer 反复判断它的值就好。
IfWebBrowser1.ReadyState=4Then'4也可以写成WebBrowserReadyState.Complete
Msgbox("加载完毕")
EndIf

*on和bind的区别:http://blog.csdn.net/aitangyong/article/details/43673535

*jquery中html()和append()的区别:前者是替换,后者是追加

*em和px的关系:em=px/16

*网上都说, 用$.ajax + formdata 上传文件很容易啊,只要别忘记设置 processData: false . 确实,如果不设置 processData:
false,jquery直接报错,分分钟死给你看。但当我向Django发送某个携带了文件的表单时,根本就是错得连 csrfmiddleware 都过不去啊!
在 csrfmiddleware 里面打上断点,request.POST 里面空空如也,什么表单数据都没有!
原因也很好解释,processData=false 就是不处理formdata的数据,网上的解释都很好听,但实际上呢?! Django 什么数据都没有收到!

*我们在 form 标签中设置了enctype = “multipart/form-data”,这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

*JavaScript中三种弹出式消息提醒的命令是什么？（如：警告，确认，信息输入）alert,confirm,prompt

*Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。

*jquery中prop和attr的区别

http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

*jquery中数组的使用

http://www.jb51.net/article/76601.htm

*jquery如何获取复选框的值

http://www.jb51.net/article/44397.htm

var ids=new Array()
	$('input[name="ids"]:checked').each(function(){ 
	ids.push($(this).val()); 
});

*JQuery checkbox选中

$("#sendSmsUnderwrite",$("#doFormUpdate")).prop("checked",true);

*JQuery checkbox反选

$("#selectAll").unbind("click").bind({
	click : function() {
		$("[name='ids']").each(function() {// 反选
			if ($(this).prop("checked")==false) {
				$(this).prop("checked",true);
			} else {
				$(this).prop("checked", false);
			}
		});
	}});

*JS序列化

前端页面表单提交后台用js序列化可以极大地减少字段的书写，节省开发时间，但条件是必须要要有name属性;

后端接收前端传来的数据时，为了减少字段的书写，可以用对象接收前端传来的数据，(但条件是前端除了使用序列化之外还要指定dataType:'json'，这句话还有待商榷，因为我后面去掉dataType后台也能将接收到的数据转为对象，如果接收不到，可以用dataType='json'试试)

*Bootstrap

重置按钮只要将form表单中的按钮type=reset即可

modal：http://www.jb51.net/article/83084.htm

data-toggle 表示触发类型
data-target 表示触发的节点

data-dismiss="modal"：

如果你的modal弹窗里面加上这个按钮，那么点击则会关闭当前弹窗，关键在于data-dismiss="modal"，它让按钮有了这个功能。这是bootstrap.js中MODAL插件相关代码中定义的:

aria-hidden="true"：

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

*Bootstrap的aria-label和aria-labelledby的区别

http://blog.csdn.net/liuyan19891230/article/details/50452835

*bootstrap div居中div class="center-block"

*js获取页面宽度高度及屏幕分辨率
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

*js去除字符串中间的空格（trim()只能去除字符串首尾的空格）

title = title.replace(/ /ig,'');

*jquery定时器

http://www.jb51.net/article/35347.htm

http://www.cnblogs.com/Fooo/archive/2011/12/15/2289215.html

*$("#searchBtn").trigger("click");触发点击事件

*Js Jquery 关于endWith() 和startWith() 的使用

http://blog.csdn.net/wjs7740/article/details/38434633

*页面之间传值

1.cookie

2.html5使用localStorage和sessionStorage，两者区别：localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

3.html5使用indexdb

*jquery 获取json key ，不循环获取
var bb = {'123':{'ccc':'aa'}};
console.log(Object.keys(bb));

*在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用如下的方式：
break----用return false;
continue --用return ture;

*JS（JQEERY）获取JSON对象中的KEY VALUE
var json= { "Type": "Coding", "Height":100 };
for (var key in json)
{
alert(key); alert(json[key]);
}
$.each(json, function(i) {
alert(json[i]);
alert(i);
});

*jquery判断是否在数组中$.inArray("targetField",array)

*forEach和$each的区别：http://blog.csdn.net/fightinggirls/article/details/70243859

动态生成表格js:

$.each(row,function(i,item){
html+="<tr>";
$.each(row[i],function(key,value){
html+="<td>"+value+"</td>";
})
html+="</tr>";
});

*easyui可以把input封装成textArea , 但是如果用那个input的id去hide的话是隐藏不了的,因为不是取的textArea的id,而是取的input的id，所以隐藏的不是textArea，而是input，解决办法：用外面一层的id隐藏（搞死人啊，这个是bug吧，反馈给easyui项目组不知道有没有奖励）。

*combotree里后台无法获取所有选中节点解决方法

1.首先要有一个combotree

<div class="divWindowRow">
<lable>是否发送短信</lable>
<input type="text" class="easyui-combotree formElement" id="smsContent" name="smsContent" >
</div>

2.其次要有一个隐藏域（这很关键，js通过这个隐藏域获得所选择的所有节点的值）

3.js中获取隐藏域中的值

var smss = $("#smsContent",$("#createWindow")).combotree('getValues');
$("#sms",$("#createWindow")).textbox("setValue",smss);

4.传到后台（这里用的序列化传值）

var formJson = $("#doFormCreate").serialize();

使用serialize()的条件：有form，有name。

需要注意的是，序列化必须放在第三步的下面，因为ajax传递的是formJson,如果第三步后执行，后台无法获取到隐藏域中的值。

*js控制checkbox选中$("#aa").prop("checked":true);id必须唯一，如果必须用id但是有不唯一，可以加上父节点$("#aa",$(""#bb)).prop("checked":true);

*ajax json写死数据字段固定为id和text.

*HTML5 js时钟插件

```
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/Go/getflashplayer">
```

*js，css路径放在WebContent（eclipse）或者WebRoot（myeclipse）下，不要放在WEB-INFO下，因为WEB-INFO下是受保护的文件，默认情况下不允许被发现，所以放在该目录下会导致无法找到js和css。

*jstl标签${name }后面的空格不能少，否则可能出问题。

js禁止超链接跳转
1.<a href="JavaScript:void(0);" >javascript:void(0);</a>
2.<a href="javascript:;" >javascript:;</a>
3.<a href=“#” >#</a> 跳转到页面的顶部

*js断点：debugger;

*让两个div并排方法：一个有宽度的div包着两个元素的style：float均设置为left,或者display均设置为inline，或者用一个大的div，将两个div包围，限定这个div宽度，第二个div向右悬浮再或者用table

*jQuery:Ajax返回的数据如果不是JSON而是JSON格式的字符串解析时需要用data = $.parseJSON(data);做处理，否则无法解析。

*判断字符串是不是数字。
var str = "37";
var n = Number(str);
if (!isNaN(n))
{
alert("是数字");
}
注意：在 JavaScript 中，对于省略写法（如：".3"、"-.3"）、科学计数法（如："3e7"、"3e-7"）、十六进制数（如："0xFF"、"0x3e7"）均被认定为数字格式，这类字符串都可以用 Number 转化成数字。

*jquery限制输入字数
<div style="font-size: large;">推送内容</div>
<fieldset style="border-radius:5px;border-color:#CECECE;background-color:#F9F9F9">
<textarea rows="10" id="textArea" οnkeyup="words_deal()" style="width:99%;border-radius:5px;border-color:#D1D1D1;background-color:#F9F9F9;font-size: medium;"></textarea>
<div>您还剩下<span id="textCount" style="font-size: 20px;font-family: fantasy;">236</span>个汉字可以输入</div>
</fieldset>
<script type="text/javascript">
function words_deal() {
var curLength = $("#textArea").val().length;
if (curLength > 236) {
var num = $("#textArea").val().substr(0, 236);
$("#textArea").val(num);
} else {
$("#textCount").text(236 - $("#textArea").val().length);
}
}
</script>

*JEECG的会把datagrid的field中的"_"转成".",比如页面的field="SHIFT_NAME",后台接收的时候是“SHIFT.NAME”

*easyUI的data-options用，作为分隔符;query：true上面显示，hidden：false下面显示

*原生js把输入框中的内容自动复制到另一个输入框
<INPUT type="text" name="a" id="a" οnkeyup="document.getElementById('b').value=this.value">
<INPUT type="text" name="b" id="b">

*js的方法里多数没有括号，比如取字符串str的长度，str.length而不是str.length()，页面代码与Java代码还是有所区别的。

*ajax获取信息成功或失败都要有处理方法及success和error,如果只有success可能会出错.

*如果提交按钮是 type 是submit 的话，验证的时间要放在 form标签的onsubmit事件里返回 true的话会提交表单，返回false的话就不会提交表单，如果 type 是button的话需要用js来提交表单

*Jquery通过id或者class获取属性，用name也行，但是效率不高。

*什么时候用post

*出现连续输出可能是因为输入的是字符串，应该强制转换为整型等数字的形式；

*window对象包含了当前的脚本，因此它被作为默认对象。但是，要注意的是当使用框架、层、多窗口时，或者在事件处理器中不能忽略window对象的名称；

*如果在数字和字符串之间使用加号，数字会转换成字符串并且进行连接操作；

*sort排序方法；

*js不严格区分单双引号；

*<span><class>标签和style连用，style放在script之外，head之内。
<span class="STYLE1">汪国真</span>，STYLE必须大写。
<style type="text/css">

</style>

*图片超链接消去蓝色外边框：img标签里加border=0，或者直接在css中
<style type="text/css">
img{border:0;}
</style>

*将表单中的信息经过检验传递到表格中只能使用getElementsByName不能用getElementsByid；

*将两个十进制数数做异或运算想要将两个数转换为二进制数再参与运算；

*要使document.writeln和"\n"发挥转行作用要将其放到document.write("<pre>")和document.write("</pre>")中；

*支持onload的 HTML 标签：<link>,<script>,<body>,<img>,<frame>,<frameset>,<iframe>支持该事件的JavaScript 对象：window,image, layer；

*关键字 this 总是指向调用该方法的对象，一般用别名；

*document对象不提供客户最近访问的url的列表；

*Math.round()(取整函数)方法你可以这样理解：就是括号内的数+0.5之后，向下取值,正数加正，负数加负；

*访问对象值要用字符串

*对象有原形prototype

*slice(a,b)表示左开右闭,即包含a,不包含b.

*js只保留整数，向上取整，四舍五入，向下取整等函数

http://www.ablanxue.com/shtml/201407/23258_1.shtml

*用jquery计算两个日期之间的天数
http://blog.sina.com.cn/s/blog_a1aef8c501013znp.html

*js，css路径放在WebContent（eclipse）或者WebRoot（myeclipse）下，不要放在WEB-INFO下，因为WEB-INFO下是受保护的文件，默认情况下不允许被发现，所以放在该目录下会导致无法找到js和css。

*常用的jquery获取表单对象的属性与值
http://www.cnblogs.com/thingk/archive/2013/03/01/2938957.html

*jstl标签${name }后面的空格不能少，否则可能出问题。

*js禁止超链接跳转
1.<a href="javascript:void(0);" >javascript:void(0);</a>
2.<a href="javascript:;" >javascript:;</a>

3.<a href=“#” >#</a> 跳转到页面的顶部

*网页页面实现自动刷新的3种代码
http://blog.csdn.NET/mane_yao/article/details/5559255

*HTML 里怎么隐藏文本框
http://blog.csdn.Net/llxsharp/article/details/4285262

*js断点：debugger;

*让两个div并排方法：两个div的style：float均设置为left,或者display均设置为inline，或者用一个大的div，将两个div包围，限定这个div宽度，第二个div向右悬浮再或者用table

*jquery:Ajax返回的数据解析需要用data = $.parseJSON(data);做处理，否则无法解析。

*判断字符串是不是数字。
var str = "37";
var n = Number(str);
if (!isNaN(n))
{
alert("是数字");
}
注意：在 JavaScript 中，对于省略写法（如：".3"、"-.3"）、科学计数法（如："3e7"、"3e-7"）、十六进制数（如："0xFF"、"0x3e7"）均被认定为数字格式，这类字符串都可以用 Number 转化成数字。

*jquery限制输入字数
<div style="font-size: large;">推送内容</div>
<fieldset style="border-radius:5px;border-color:#CECECE;background-color:#F9F9F9">
<textarea rows="10" id="textArea" οnkeyup="words_deal()" style="width:99%;border-radius:5px;border-color:#D1D1D1;background-color:#F9F9F9;font-size: medium;"></textarea>
<div>您还剩下<span id="textCount" style="font-size: 20px;font-family: fantasy;">236</span>个汉字可以输入</div>
</fieldset>
<script type="text/javascript">
function words_deal() {
var curLength = $("#textArea").val().length;
if (curLength > 236) {
var num = $("#textArea").val().substr(0, 236);
$("#textArea").val(num);
} else {
$("#textCount").text(236 - $("#textArea").val().length);
}
}
</script>

*JEECG的会把datagrid的field中的"_"转成".",比如页面的field="SHIFT_NAME",后台接收的时候是“SHIFT.NAME”

*easyUI的data-options用，作为分隔符;query：true上面显示，hidden：false下面显示

*原生js把输入框中的内容自动复制到另一个输入框
<INPUT type="text" name="a" id="a" οnkeyup="document.getElementById('b').value=this.value">
<INPUT type="text" name="b" id="b">

*js的方法里多数没有括号，比如取字符串str的长度，str.length而不是str.length()，页面代码与Java代码还是有所区别的。

*ajax获取信息成功或失败都要有处理方法及success和error,如果只有success可能会出错.

*如果提交按钮是 type 是submit 的话，验证的时间要放在 form标签的onsubmit事件里返回 true的话会提交表单，返回false的话就不会提交表单，如果 type 是button的话需要用js来提交表单

*Jquery通过id或者class获取属性，用name也行，但是效率不高。

*什么时候用post

*出现连续输出可能是因为输入的是字符串，应该强制转换为整型等数字的形式；

*window对象包含了当前的脚本，因此它被作为默认对象。但是，要注意的是当使用框架、层、多窗口时，或者在事件处理器中不能忽略window对象的名称；

*如果在数字和字符串之间使用加号，数字会转换成字符串并且进行连接操作；

*sort排序方法；

*js不严格区分单双引号；

*<span><class>标签和style连用，style放在script之外，head之内。
<span class="STYLE1">汪国真</span>，STYLE必须大写。
<style type="text/css">

</style>

*图片超链接消去蓝色外边框：img标签里加border=0，或者直接在css中
<style type="text/css">
img{border:0;}
</style>

*将表单中的信息经过检验传递到表格中只能使用getElementsByName不能用getElementsByid；

*将两个十进制数数做异或运算想要将两个数转换为二进制数再参与运算；

*要使document.writeln和"\n"发挥转行作用要将其放到document.write("<pre>")和document.write("</pre>")中；

*支持onload的 HTML 标签：<link>,<script>,<body>,<img>,<frame>,<frameset>,<iframe>支持该事件的JavaScript 对象：window,image, layer；

*关键字 this 总是指向调用该方法的对象，一般用别名；

*document对象不提供客户最近访问的url的列表；

*Math.round()(取整函数)方法你可以这样理解：就是括号内的数+0.5之后，向下取值,正数加正，负数加负；

*访问对象值要用字符串

*对象有原形prototype

*slice(a,b)表示左开右闭,即包含a,不包含b.