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>
        <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是指插入的位置,有四个可选值,分别为:

  1. beforeBegin: 插入到标签开始前
  2. afterBegin:插入到标签开始标记之后
  3. beforeEnd:插入到标签结束标记前
  4. 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函数

  1. 删除
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        
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值