THE FOUTY-SECOND DAY

最新推荐文章于 2021-12-20 15:55:51 发布

aizaiee

最新推荐文章于 2021-12-20 15:55:51 发布

阅读量152

点赞数

分类专栏：培训日记

本文链接：https://blog.csdn.net/aizaiee/article/details/80011721

版权

培训日记专栏收录该内容

49 篇文章 0 订阅

订阅专栏

今天星期四，参加培训的第四十二天，今天依旧早起，然后买饭，到教室，开始看书，嗯，早上在宿舍看书的时候，临走看了一下，总共才看了三页，不过没什么记忆，然后只记得的是访问限制符，没有别的什么了，到教室继续看html,没有什么好说的，记忆一点都不深，只记得一个@font-face,web开放字体什么的，别的没有什么了，用到再说吧，然后，老师上课说了一下昨天的作业，就开始讲jquery了,也没有别的什么，今天写的两个代码都贴上好了。

就这样，开始贴代码：

一个是和昨天一样的，然后js换成jquery写的，如下：

/**
 * 
 */
$(document).ready(function(){
  
    
    
    
    
    
});
function addList(){
    var name,age;
    $(":input").each(function(index,val){
	if(index==0){
	    name=val.value;
	} else if(index==1){
	    age=val.value;
	}
	
    });
    if (name == '' || age == '' || !isNaN(name) || isNaN(age)) {// 不是数字为真
	alert("准确填写后才能添加");
	return;
    }
    var id=$("tbody tr:last td:first").html();
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    var td4 = document.createElement('td');
    td1.innerHTML = ++id;
    tr.appendChild(td1);
    td2.innerHTML = name;
    tr.appendChild(td2);
    td3.innerHTML = age;
    tr.appendChild(td3);
    td4.innerHTML = "<a href='#' οnclick='deleteList(this)'>删除</a><a href='#' οnclick='updateList(this)'>修改</a>";
    tr.appendChild(td4);
    $("tbody").append(tr.innerHTML);
    //prepend从前面加。。
}

function deleteList(ww) {
    $(ww).parent().parent().css("background","blue");
    var choose=confirm("确定删除？");
	if(choose){		
//	    $(ww).parent().parent().empty();//只删除后代节点
	    $(ww).parent().parent().remove();//删除后代，包换自己
	    } else{
//		tbody.children[i].style.background="red";
		$(ww).parent().parent().css("background","");
	    }
     
}
function updateList(ww){
//    alert(11);
   var name = $(ww).parent().prev().prev().text();
   var age = $(ww).parent().prev().text();
   $(ww).parent().prev().prev().html("<input type='text' valeu='"+name+"/>");
   $(ww).parent().prev().html("<input type='text' />");
   $(ww).parent().html("<a href='#' οnclick='save(this)'>保存</a>");   
}
function save(ww){
    var name = $(ww).parent().prev().prev().children().val();
    var age = $(ww).parent().prev().children().val();
    $(ww).parent().prev().prev().html(name);
    $(ww).parent().prev().html(age);
    $(ww).parent().html("<a href='#' οnclick='deleteList(this)'>删除</a><a href='#' οnclick='updateList(this)'>修改</a>");
//    alert(name);
}
function search(ww){
    var name = $(ww).prev().val();
    $("tbody tr").each(function(index,val){
	if(val.children[1].innerHTML==name){
	    val.style.background="red";
	}else{
	    val.removeAttribute("style");
	}
	
    });
}

function test(){
//    $("tr").eq(0).text().indexOf(i2)>-1;
//    $("tr").length;
    $("tr").each(function(){
	if($(this).find("td[id^='tdb']").text().indexOf(i2)>-1){
	    $(this).css("background","red");
	}
    });
    //i2  匹配 .text()与i2是否相等;
    
    $.each($("tr"),function(){
	if($(this).find("td[id^='tdb']").text().indexOf(i2)>-1){
	    $(this).css("background","red");
	}
    });
}

然后今天的知识点：

/**
 *html 元素选取
 *元素操作
 *事件
 *css操作
 *js特效动画
 *dom遍历修改
 *ajax
 *其他 
 */
$(document).ready(function(){
//    alert("T_T");
});
$(function(){
//    alert("T_T");
});
//以上两种方法相同;
//alert("11");
function tt() {
    alert($("b").length);//标签选择器
    var b1=$("b").html();//匹配第一个标签的内容
    alert(b1);
}
function tt1(){
    alert($("#aaa")).html();//id选择器
}
function tt2(){
    alert($(".aaa")).html();//class选择器;
}
function tt3(){
    alert($([name="aaa"]).html());//属性选择器;
}
function tt4(ww){
    alert($(ww).html());//将传过来的js对象转化为jquery对象;
}
function tt5() {
    var temp;
    temp="ul li";
    temp="a>img";
    temp="h1+p";
    temp="h1~p";
    $(temp).html();
}
function aa(){
    var src =$("img").attr("src");
    alert(src);
    $("img").attr("src","test.jpg");
    $("img").attr({src:"test.jpg",alt:"Test Image"});
    $("img").attr("title",function(){
	alert(this.src);
	return this.src;
    });
}
function bb(){
    alert($("input[type='check']").prop("checked"));//prop用于form  attr用于其它
    $("input[type='checkbox']").prop({disabled:true});//一个对象获取值 ，两个赋值
    $("input[type='checkbox']").prop("checked",function(i,val){
	//获取所有的checkbox的index(从零开始) val(选中状态：true或false)
	return !val;
    });
    
}
function cc(){
    var v = $("#dd").val();//一般和表单有关;
    $("#dd").val("ssss");//赋值
    $("#dd").val(function(){
	return this.value+' '+this.className;
    })
}
function dd(){
    var c=$("div").css("color");
    $("div").css("color","red");
    $("div").css({"color":"red","background":"blue"});
    $("div").css({height:function(index,val){
	return parseFloat(val)*1.2;
    }})
}
function ee() {
    $("p").addClass("aa");
    $("p").addClass("aa bb");
    $("p").addClass(function(){
	return "dd";
    });
    $("p").toggleClass("selected");//存在删除，不存在添加
}
function ff(){
    $("p").removeClass("aa");
}
function gg(){
    $('#ggg').text();
    $('#ggg').text("hello world");
    $('#ggg').html();
    $('#ggg').html("ddd");
}

还有一个计算器：

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/Calculator.js"></script>
<link rel="stylesheet" href="../css/Calculator.css" type="text/css" />
</head>
<body>
<div class="main">
<div>
<input class="input1" type="text" name="input" readonly="readonly" />
</div>
<div>
<input type="text" name="result" value="0" readonly="readonly" />
</div>
<div>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>CE</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button>0</button>
</div>
<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button>=</button>
</div>
</div>
</body>
</html>

css:

@charset "UTF-8";
button{
	margin:0px;
	padding:0px;
	width:50px;
	height:30px;
	color:green;
	font-size:1em;
	backgrond-color:blue;
	letter-spacing: 0px;
}
input{
	border-bottom:0px;
	border-top:0px;
	border-right:2px solid black;
	border-left:2px solid black;
	width:200px;
	height:30px;
	text-align: right;
}
.input1{
	border-top:2px solid black;
}
div{
/* 	margin:0px; */
	padding:0px;
	letter-spacing: -7px;
/* 	float:left; */
}
.main{
	left:500px;
	top:200px;
	position: absolute;
}

js(jquery):

/**
 * 
 */
$(document).ready(function() {
    $("button").each(function(){
	$(this).attr("onclick","setClick(this)");   
    });
});
var isOperatorExist = false;
function setClick(ww){
    var input = $("[name='input']").val();
    var result= $("[name='result']").val();
//    var isNumberExist = false;
    
    
    if($(ww).html().match("\\d")){
	
	if(input==""){
	    
	    if(result==0){
		$("[name='result']").val($(ww).html());		
	    }else {
//		alert(result);
		var temp = result.concat($(ww).html());
		  $("[name='result']").val(temp);		  
	    }
	    
	}else{
//	    alert(isOperatorExist);
	    if(isOperatorExist){
//		alert($(ww).html());
		$("[name='result']").val($(ww).html());	
		isOperatorExist=false;
//		isNumberExist=true;
	    }else {
		var temp = result.concat($(ww).html());
		  $("[name='result']").val(temp);
	    }
	}
	
    }
    if($(ww).html().match("[\-+/*]")){
//	alert("bb");
	if(input==""){
	    var temp=input.concat(result).concat($(ww).html());
	    $("[name='input']").val(temp);
	    isOperatorExist=true;
//	    alert(isOperatorExist);
	}else{
	    if(isOperatorExist){
		var temp = input.substr(0,input.length-1)+$(ww).html();	
	        $("[name='input']").val(temp);
	    }else{
		var temp=input.concat(result).concat($(ww).html());
		   $("[name='input']").val(temp);
		   var operator = temp.substr(0,temp.length-1);
//		   alert(operator);
		   $("[name='result']").val(operate(operator));
		   isOperatorExist=true;
	    }
        
//	var temp = input.concat($(ww).html()).concat(result);
	}
    }
    if($(ww).html()=="="){
	if(input==""){
	    return;
	}
	if(isOperatorExist){
	    var operator = input.substr(0,temp.length-1);
	    $("[name='result']").val(operate(operator));
	    $("[name='input']").val("");
	    isOperatorExist=false;
	} else {	    
	var operator=input.concat(result);
	$("[name='result']").val(operate(operator));
	    $("[name='input']").val("");
	    isOperatorExist=false;
	}
    }
    if($(ww).html()=="CE"){
	$("[name='input']").val("");
	$("[name='result']").val("0");
    }
}
function operate(operator){
    var number = operator.split(/[\-+*/]/);
//    alert(number.length);
    var opera = operator.replace(/\d/g,"");
//    var opera = opera1.replace(/\d/,"");
    var result=parseInt(number[0]);
//    alert(number[1]);
//    alert(result);
//    alert(opera);
    for(var i=0;i<opera.length;i++){
	var number2=parseInt(number[i+1]);
//	alert(number2);
	if(opera.charAt(i)=='+'){
	    
	    result+=parseInt(number[i+1]);
//	    alert(result);
	}
	if(opera.charAt(i)=='-'){
	    result-=parseInt(number[i+1]);
	}
	if(opera.charAt(i)=='/'){
	    result/=parseInt(number[i+1]);
	}
	if(opera.charAt(i)=='*'){
	    result*=parseInt(number[i+1]);
	}
    }
    return result;
}

好了，没有别的什么了，进度有点慢，不过不好，拿时间来补，嗯，就是这样，好的，没有什么了，就先这样了，嗯，好的，结束。

aizaiee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
THE FOUTY-SECOND DAY

今天星期四，参加培训的第四十二天，今天依旧早起，然后买饭，到教室，开始看书，嗯，早上在宿舍看书的时候，临走看了一下，总共才看了三页，不过没什么记忆，然后只记得的是访问限制符，没有别的什么了，到教室继续看html,没有什么好说的，记忆一点都不深，只记得一个@font-face,web开放字体什么的，别的没有什么了，用到再说吧，然后，老师上课说了一下昨天的作业，就开始讲jquery了,也没有别...
复制链接

扫一扫

专栏目录