发表于： 2020-09-09 23:43:16
1 1443
今天完成的事情：
学习jquery
$(function () {
var arr = [12, "abc", true];
var $btns = $("button");
for (var i = 0; i < $btns.length; i++) {
alert($btns[i])
}
});
// dom对象转换jquery对象
var $obj = $(dom对象);
// jquery对象转换dom对象
var dom=$obj[下标]
alert($(document.getElementById("testDiv"))[0])
<script>
$(function () {
// 1.选择id为one的元素"background-color","#bbffaa"
$("#btn1").click(function () {
// css()方法 可以设置和获取样式
// alert($("#one"));
$("#one").css("background-color", "#bbffaa")
});
// 2.选择 class 为 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color", "red")
});
// 3.选择 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color", "yellow")
});
// 4.选择所有的元素
$("#btn4").click(function () {
$("*").css("background-color", "blue")
});
// 5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color", "pink")
});
});
</script>
</head>
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1">
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2">
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3">
<input type="button" value="选择 所有的元素" id="btn4">
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5">
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one，title为tset的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
创建div
window.onload = function () {
//添加div
for (index = 0; index < arr.length; index++) {
// var boxs = document.createElement("div");//添加子节点div
// boxs.className = "boxs";//获取class为boxs
// main.appendChild(boxs);//把boxs添加到main中
var boxs = document.getElementById("boxs")//获取boxs的节点
var box = document.createElement("div");//添加boxs的子节点div
box.className = "box1";//获取css属性
boxs.appendChild(box);//把box添加到boxs中
var p1 = document.createElement("p");//添加文字节点
p1.className = "one";
box.appendChild(p1);
p1.innerHTML = arr[index];//添加玩家信息
var p2 = document.createElement("p");
p2.className = "two";
box.appendChild(p2);
p2.innerHTML = (index + 1) + "号";//玩家号数
var box2 = document.createElement("div");//添加节点的子节点
box2.className = "box2";
box.appendChild(box2);
var img = document.createElement("img");//添加图片节点
img.className = "img";
img.src = "./images/src/发言讨论结束，投票_04.png"//添加图组;
box2.appendChild(img);
console.log(index);
console.log(arr[index]);
}
明天的计划：
修改为jquery样式
返回列表
评论