1、【JQuery/JS】基本用法
1—1 JS建立元素
<body>
<div class="body-header" id="bodyid-header">
<p class="head-title"><b>头部</b></p>
</div>
<div class="body-content">
<p class="content-title"><b>主体</b></p>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var headP=document.createElement("p");
//document.body.appendChild(headP);
//$(headP).html("第一次生成HTML元素,吼吼");
var divHead= document.getElementById("bodyid-header");
divHead.appendChild(headP);
headP.id="newHeadP";
headP.innerHTML="第一次代码初始化元素,吼吼";
};
</script>
1—2 复杂一点 insertAdjacentHTML
JS方法。该方法效率要比innerHTML高出很多。
这个方法接收两个参数,一个是where,一个是text。格式:节点.insertAdjacentHTML()。
where是指插入的位置,有四个可选值,分别为:
- beforeBegin: 插入到标签开始前
- afterBegin:插入到标签开始标记之后
- beforeEnd:插入到标签结束标记前
- afterEnd:插入到标签结束标记后
text——为HTML文本。
var parentN=document.getElementById('user-controlbox');
parentN.insertAdjacentHTML('beforeEnd','<li class="layui-nav-item"><a href="javascript:;">'+'刘阿姨'+ '</a></li>');
parentN.insertAdjacentHTML('beforeEnd', '<li class="layui-nav-item"><a href="">注销</a></li>');
1—3 变量声明规则
- 变量以字母、下划线或美元符号开头;其他位置可以是字母、下划线、数字、美元
- 变量名称不能以数字开头,且不能包含空格或其他符号
- 变量名称长度为255个字符
- 变量名不能使用保留字为全名称
2 、 【建立JS文件】
// JS文档内容
function exfuncAddelem(elemType, elemName,parentNode){
//建立指定ID的子元素
var node;
switch(elemType){
case 1:
node=document.createElement("article");
break;
case 2:
node=document.createElement("p");
break;
case 3:
node=document.createElement("span");
break;
default:
node=document.createElement("div");
}
document.getElementById(parentNode).appendChild(node);
node.id=elemName;
node.innerHTML="控件"+elemName;
}
调用方法
<script src="js01.js"></script>
<!-- 使用,在JS/Jquery函数内 -->
exfuncAddelem(2,"ctrlbox","content-body");
只有getElementById()才拥有appendChild方法。而getElementByClassName()则不可以。
3、【JQuery/JS】异同
3—1 赋值不同
//JQuery
$("#{元素}").html("{值}");
//JS
document.getElementById("{元素}").innerHTML={值}
3—2 初始化
JQuery的ready函数:在DOM树结构解析完成后执行(过早触发);
load函数:在页面初始化后执行;等效于window.onload()。
JQuery允许在文档中无限次使用ready事件。其中注册的事件处理函数会按照代码中的前后次序依次执行。一旦使用了JQuery的ready函数,就不能使用JS的load函数。
4、【JQuery/JS】代码
4—1 radio取值
var selectsex;
var rd = document.getElementsByName('rdSex');
if(rd[0].checked){
selectsex = "男";
}
if(rd[1].checked){
selectsex = "女";
}
4—2 SELECT取值
// 1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
// 2.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}
// 3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
// 4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
// 5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
// 6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
// 7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
// 8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
4—3 类型转换
1.字符串转数字parseint(<字符串>)
格式:parseint()
1-2.字符串转数字parseint(<字符串>,<进制>)
参数:进制取值为:2,8,10,16
2.字符串转单精度parsefloat(<字符串>)
3.强制类型转换number()
4—4 相等比较
我们都知道在Java中,判断是否相等,我们首先想到的是equals方法,但是此方法在Javascript中是不适用的。
我们要想判断是否相等能只能使用“==”或者“===”,在这里 ,我们需要注意:js的一大特性,那就是存在数据自动转换机制。
例如:var a=1; var b=true; a==b 返回true 而 a===b返回false。
原因:“==”,表示经过自动转换,比较的是数值。
“===”表示经过自动转换,先比较数值,在比较数据类型。
4—5 数组splice函数
- 删除
const nameArr=ref(['甲','乙','丙','丁','癸'])
function changeArr(){
nameArr.value.splice(1,2)
//结果如下
//nameArr=['甲','丁','癸']
}
2. 插入
const nameArr=ref(['甲','乙','丙','丁','癸'])
function changeArr(){
nameArr.value.splice(2,0,'A','B')
//结果如下
//nameArr=['甲','乙','A','B','丙','丁','癸']
}
3. 替换
const nameArr=ref(['甲','乙','丙','丁','癸'])
function changeArr(){
nameArr.value.splice(2,2,'A','B')
//结果如下
//nameArr=['甲','乙','A','B','癸']
}
5、浏览器调试
5—1 控制台
- 通过在html或js中使用console.log()语句打印到控制台界面
- 在控制台使用命令与页面控件进行交互,比如document.queryselector('input').value 获取input 文本输入的值。
6、map()方法
返回一个新数据,不改变实参数组的结构,不对空数组进行操作。
map()完整写法:
arr.map(function(currentValue,index,arr),thisValue)
ES6箭头函数写法:
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);// Array [2, 8, 18, 32]
实际应用在接口返回json进行处理或导出格式化
let rowVal = res.data.map(item => {
Name: item.name,
sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
age: item.age
})