4001—JS/JQuery随笔

zhang_yling

已于 2023-03-11 10:31:44 修改

阅读量325

点赞数

分类专栏：前端文章标签： JS JQuery

于 2020-02-09 13:37:35 首次发布

本文链接：https://blog.csdn.net/zhang_yling/article/details/104234253

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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        
})

zhang_yling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
4001—JS/JQuery随笔

1、【JQuery/JS】基本用法 1—1 JS建立元素<body> <div class="body-header" id="bodyid-header"> <p class="head-title"><b>头部</b></p> </div...
复制链接

扫一扫

专栏目录