html js jquery——小问题汇总(2020.4.5)

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"];//使用中括号的方式