1.外部默认的css会覆盖之前设置css属性,如果使用dom.className=""
的方法,所以如果不想覆盖之前的class,可以使用方法classList.add("")
方法
代码示例:
var mainDiv=document.getElementById("mainDiv");
mainDiv.className="divStyle";
mainDiv.classList.add("divStyle");
2.已有html某个标签的引用,若使用jquery的选择器时,不用加引号直接使用即可
3.jquery通过serialize获得form表单中数据时,需要name属性
4.css 文字如何对齐到textarea顶端对齐:设置文字:vertical-align: top;
5.css中设置按钮的点击和悬停效果:
.publishBtn:active{ box-shadow: 0px 0px 50px #F60 inset; color:#fff; }
.publishBtn:hover { background:#385f9e; }
6.html已有某标签的父节点的引用(taskDescribeDiv),要获取其子标签的引用,可以利用childNodes
方法;
var taskDescribeTextarea = taskDescribeDiv.childNodes[1];
或
var taskDescribeTextarea = taskDescribeDiv.children[1];
7.判断某个标签是否有焦点,可以使用document.activeElement
属性。
8.延时函数setTimeout("shutdownUpTextarea(upTextarea)",100);
第一个参数为要执行的函数名,注意传递的参数必须为全局变量,第二个参数为延迟多少毫秒后执行该函数。
9.通过dom引用获取标签名并判断,mainDiv.nodeName=="P"
,注意获取的为大写
10.获取某标签内所有html元素,包含其中的标签等,使用$(td[i]).html()
方法
11.js替换字符串中指定字符
var str = 'abcadeacf';
var str1 = str.replace('a', 'o');//只替换第一个字符
alert(str1);
// 打印结果: obcadeacf//加上/g替换所有字符
var str2 = str.replace(/a/g, 'o');//g是重点,如果替换的为‘/’,需要转义,吧/a/g替换为'/\//g'
alert(str2);
//打印结果: obcodeocf,
12.获取某元素实际宽度:td[i].offsetWidth
13.对form表单中的元素进行修改时,要将修改的触发按钮<input id="submitBtn" type="button" value="提交">
放在表单form
标签外面才能生效,如果也放在表单里面,那么对其内容的修改有错误,原因未知。
14.html前端提交form表单的数据:注意其中的标签要有name,先将其封装为json对象格式,然后再提交到后台。
代码示例:
var t = $("#mainForm").serializeArray();
$.each(t, function () {
postData [this.name] = this.value;
});
$.post("http://localhost:8099/userResumeAdd", postData, function (data) {
alert(data);
});
15.有时候需要给元素添加类样式,但又要保留之前的类,可以使用element.classList.add("类名");
或者$(selector).addClass(class);
16.js替换字符串中全部对应字符的方法:
//创建replaceAll()函数
String.prototype.replaceAll = function (FindText, RepText) {
return this.replace(new RegExp(FindText, "g"), RepText);
};
17.js json字符串 转为json数组,注意str在输入时对“需要改为/"进行转义,可以考虑使用http://tool.chinaz.com/tools/jsonescape.aspx在线工具进行快速转义
var jsonObj = JSON.parse(str);//转换为json对象
18.注意复制重复代码时字符串等的微小差别,不然排除bug时费时费力,有时候往往只是写错的简单错误
19.js支持三目运算符,两者求大者
function max(first,second){
return first > second ? first : second;
}
//例子
var userAcc = (sessionStorage.getItem("userAcc") === null) ? "123" : sessionStorage.getItem("userAcc");
2020.4.5
20.jquery 判断 元素是否具有某个样式类class
,使用函数hasClass(‘classname’)
21.当要使用jquery的text()方法进行对比时,要记得在后面加trim()方法,以去除其前后的空格。如果是使用类选择器选取多个标签元素,同时要逐个比较其text(),那么需要用for循环遍历所有元素的text()逐个比较。
22.修改了html页面引用的js文件
,在调试网页时需要删除缓存
,再调试,不然网页实际引用的js文件不会变化
23.js对象与json字符串互相转化
JSON.parse(clickContract)//字符串转对象
JSON.stringify(clickContract)//对象转字符串
24.jquery修改图片src
$("#contractImage").attr('src','image.png');
或
$("#contractImage").prop('src','image.png');
25.js函数参数可以直接传递undefined
26.JS数组添加元素的三种方法
1、push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
2、unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
3、splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
参考:
https://www.cnblogs.com/willingtolove/p/10957669.html#_label2
27.html使页面的位置直接滚动到顶部的方法:
scrollTo(0,0);
28、关于bootstrap栅格布局的使用,注意所有的内容元素必须放在列的div中
参考:
https://blog.csdn.net/mslmhl/article/details/103357283
29.JQuery利用css()修改样式后 hover失效的解决办法:
是优先级的问题,css()中的内容覆盖了之前的样式,只需要在样式后写!important即可解决
eg:.filters-wrap li:hover {
background:#0085d7 !important;
}
30.js 判断字符串中是否包含某个字符串,注意str得有值若为undefined会出错
var str = "123";
console.log(str.indexOf("3") != -1 ); // true
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
31.jquery批量修改css的方法:
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});
32.jquery获取表单的所有值
var d = {};
var t = $('form').serializeArray();
$.each(t, function () {
d[this.name] = this.value;
});
//t的值为[{name: "a1", value: "xx"},
//{name: "a2", value: "xx"}...]
33.js 对象的复制问题,深复制与浅复制,通常是浅复制,深复制的一种方法如下:
原理:JSON复制,利用JSON复制可以将源对象转换为字符串,再转换为新对象
// 如果新对象有属性,不保留
// 完成深复制**
var obj1={c:1,d:55};
obj1=JSON.parse(JSON.stringify(obj));// JSON.string()是把对象转字符,JSON.parse()是把字符串转为对象
console.log(obj1);//obj1中的d属性不保留
参考:https://blog.csdn.net/weixin_45000381/article/details/94057502
34.使用纯JS代码判断字符串中有多少汉字的方法:
var str="中文字符"
var re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则
str.match(re).length;//返回str中中文字符的个数
参考:https://www.php.cn/js-tutorial-405746.html
35.纯css的div简易遮罩层
参考https://blog.csdn.net/qq_34569497/article/details/94721444
36.js手动添加json数组:
var jsonArray=[];
var jsonObj={};
jsonObj.itemContent="内容1";
jsonObj.itemHref="连接1";
jsonArray.push(jsonObj);
jsonObj.itemContent="内容2";
jsonObj.itemHref="连接2";
jsonArray.push(jsonObj);
console.info(jsonArray);
但此时jsonArray中的两个键值对内容均为{itemContent: "内容2", itemHref: "连接2"}
37.判断调用函数时该参数是否传递:
jsonArrayData!==undefined
//用undefined来判断
38.js 数组转字符串
.join() 将数组中所有元素放到一个字符串中,并用指定的分隔符进行分割,使用示例如下:
const a = [1, 2, 3]
a.join(',') // "1,2,3"
a.join('_') // "1_2_3"
39.前端dom元素图片验证码刷新及获取不及时的问题
问题具体描述:
要获得新的图片验证码的字符串值,但总是会出现问题,获得的验证码是上一次的验证码,而不是新的验证码。
原因:
向后台请求验证码图片并且前台加载验证码都需要一定的时间,而前台向后台获取验证码值的函数执行速度较快,所以导致获得的验证码值总是上一次的验证码值。即图片还未刷新完成就获取了验证码值。
解决方法:
方法1.使用setTimeout方法,在刷新验证码后的500ms再执行该获得验证码值的方法,
eg:
setTimeout(getCheckCode,500);
方法2.使用html元素image的onload方法,即当图片加载完成后再进行获取验证码的操作,
eg:
document.getElementById("image").onload=function (ev) {
getCheckCode();
};
(其中getCheckCode()是获得验证码值的方法)
推荐使用方法2
2020.5.3
40、ul标签自带margin属性,当使用ul与li的导航栏组合时,发现导航栏总是会上下空出一些空行,查找了半天原因,是因为ul的margin原因,手动设置ul标签的 margin即可控制行间距
41、jquery获取子节点的方法
children():选取子节点,可以带过滤参数。但只能选择子节点,不能选择孙子节点
find():选取子节点,可以带过滤参数。可以选择子节点及孙子节点。
42、重置或者去掉某个css属性值的方法
.reset{
color:unset; //去掉这个属性,文字会优先使用span和P的color值
}
43、css设置是否允许用户选中文本
/* CSS */
p{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
2020.5.29
44、js向数组头部添加元素
var array=[];
array.unshift("123");
45、js获取jsonObject中的键值
alert(jsonObj[''+key+'']); //类似数组元素的获取
46、js删除数组中某元素的方法
var binArticleData=["1","2","3"]
binArticleData.splice(0,1);//第一个参数为数组索引,第二参数为删除该元素及之后的长度
//执行后,删除“1”
47、如果前端js使用ajax传递一个undefined的参数给后端springboot,那么在后台controller中接收的该参数值为字符串"undefined"
48、js对象取值的两种方式
var obj = {abc:"ss",nn:90};
var v1 = obj.abc;//使用点的方式
var v2 = obj["abc"];//使用中括号的方式