今天星期四,参加培训的第四十二天,今天依旧早起,然后买饭,到教室,开始看书,嗯,早上在宿舍看书的时候,临走看了一下,总共才看了三页,不过没什么记忆,然后只记得的是访问限制符,没有别的什么了,到教室继续看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;
}
好了,没有别的什么了,进度有点慢,不过不好,拿时间来补,嗯,就是这样,好的,没有什么了,就先这样了,嗯,好的,结束。