- prop()方法--设置或返回被选的第一个元素的属性值。
它的功能和attr()一样，但是两者间也有不同点。第一点，在设置元素的属性时，prop()方法只设置被选的第一个元素的属性值，而attr()方法则设置被选中的所有元素的属性值；第二点，由于内置对象的改变，某些属性的访问和设置必须使用prop方法，比如：元素的checked, selected, 或 disabled状态属性等。
创建元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建节点元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/01.css">
</head>
<body>
<h1>学生信息录入</h1>
<table>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th><th>岗位</th>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td><td>五好青年</td>
</tr>
</table>
<ul>
<li>姓名：<input type="text" name="username"></li>
<li>性别：<input type="text" name="sex"></li>
<li>年龄：<input type="text" name="age"></li>
<li>岗位：<input type="text" name="job"></li>
<li><button>添加</button></li>
</ul>
</body>
</html>
<script>
$("button").click(function(){
/**
val()方法：用来设置和获取元素的值。
无论是元素的文本、下拉列表还是单选框都可以获取元素的值。
(即将在本章后面进行学习)
*/
var username = $("[name='username']").val(); //获取姓名
var sex = $("[name='sex']").val(); //获取性别
var age = $("[name='age']").val(); //获取年龄
var job = $("[name='job']").val(); //获取岗位
//创建html元素的字符串
var htmlStr = "<tr><td>"+username+"</td><td>"+sex+"</td><td>"+age+"</td><td>"+job+"</td></tr>";
/**
生成一个DOM元素节点 -> 对应<tr>元素
并且此DOM元素节点又包含四个子元素节点 -> 分别是四个<td>子元素
*/
var obj = $(htmlStr);
/**
append()方法：向每个元素内部追加内容。(即将在本章后面进行学习)
*/
$("table").append(obj);
});
</script>
插入节点 菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入节点元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/02.css">
</head>
<body>
<h1>菜单栏的批量移动</h1>
<select id="sid" multiple>
<option>滔滔</option>
<option>明霞</option>
<option>宝龙</option>
<option>万涛</option>
</select>
<div id="did">
<button onclick="fun('sid','mid')">></button><br>
<button onclick="fun('mid','sid')"><</button>
</div>
<select id="mid" multiple>
</select>
</body>
</html>
<script>
/**
获取obj节点元素，然后添加到对应的目标des元素中，并去除选中属性
prop()：与attr()方法功能和语法一样(即将在本章后面讲解)。
*/
function fun(obj,des){
$("#"+obj+" option:selected").appendTo("#"+des).prop("selected",false);
}
</script>
插入节点
- 注意，此处函数的参数都是
select里面对应id的名字
插入节点 瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入节点元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/03.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>图片的瀑布流</h1>
<div id="contains">
</div>
</body>
</html>
<script>
//创建五组不同的数据信息，模拟ajax数据请求
var images = [
{url:"images/01.jpeg",height:"180px",info:"把握当下，就是用心"},
{url:"images/02.jpg",height:"190px",info:"有志者事竟成"},
{url:"images/03.jpg",height:"200px",info:"变态严管，破茧成蝶"},
{url:"images/04.jpg",height:"210px",info:"让学习成为一种习惯"},
{url:"images/05.jpeg",height:"220px",info:"兄弟连教育帮你成就一切"}
];
//用来记录四列种，每列最后一个<dl>元素的垂直偏移量(Top的值)
var topArr = [10,10,10,10];
/**
函数：用来生成一个<dl>节点元素，添加到对应的DOM树上
*/
function doaction(){
/**
1. 首先获取整个文档DOM的高度--DOMHeight
获取浏览器的可用高度--WinHeight
获取文档的滚动条的位置--distanceTop
*/
var distanceTop = $(document).scrollTop();
var WinHeight = screen.availHeight;
var DOMHeight = $(document).height();
// 2. 当滚动条滑动到文档的最底端某位置的时候,开始执行添加html元素操作
if(DOMHeight - WinHeight - distanceTop < 0){
//3. 在images容器中随机取出一组数据--randomOne，
var randomOne = images[Math.floor(Math.random()*5)];
//4. 然后使用此数据生成一个Html节点元素--randomHtml
var randomHtml = $("<dl></dl>").append("<dt>![]("+randomOne.url+")</dt>").append("<dd>"+randomOne.info+"</dd>");
/*
5. 得到一个位置--getNodePosition：第getNodePosition列，
其position的Top偏移量为topArr[getNodePosition];
*/
var getNodePosition = getMinIndex(topArr);
//6. 然后把HTMl元素插入到DOM树上，并且设置html元素的positon属性值
randomHtml.appendTo("#contains").css("left",250*getNodePosition+"px").css("top",topArr[getNodePosition]+"px");
//8. 修改topArr[getNodePosition]为最新值。
topArr[getNodePosition] += randomHtml.height();
//9. 执行递归，判断是否还能继续加载多个HTML元素。
doaction();
}
}
//获取一个数值类型的数组中最小元素的下表
function getMinIndex(arr){
var obj = 0;
for(var i = 1; i < arr.length; i++){
if(arr[obj] > arr[i]) obj = i;
}
return obj;
}
//页面首先加载时候，执行一次
doaction();
//为页面的滚动条绑定滚动事件
$(document).scroll(doaction);
</script>
包裹节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包裹节点元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/05.css">
</head>
<body>
<h1>无限盖楼</h1>
<div id="contains">
<h2>主贴:同学，请问你认为兄弟连IT教育怎么样？</h2>
</div>
</body>
</html>
<script>
//创建一个容器，用来随机生成用户和对应的评论
var NameContains = ["张三","李四","王五","赵六","田七"];
var commentContains = [
'我认为此地是炼狱，也是天堂，青春的锤炼少不了这样的熔炉',
'感觉让人活的更加的真实，每天有着明确的目标而奋斗着',
'所谓的破茧成蝶，前提也得感谢老师给予我们了一层层经验、责任和鞭策的厚茧',
'在这里，我被自信感染了，被团结感染了，被责任感染了，此刻的我已百毒不侵'
];
//生成10条评论
for(var i = 0; i < 10; i++){
if(i == 0){ //首先判断是否加载第一条评论
$("#contains").append("<dl></dl>"); //添加一个空dl元素，作为参考点
}
/**
实现步骤：按照第一条评论道最后一条评论的顺序
从里到外，一条一条的加载每条评论。
*/
$("#contains > dl").wrap("<dl></dl>"); //首先包裹一个<dl>元素
$("#contains > dl") //切换到上一步生成的<dl>元素
.append("<dt class='name'>"+NameContains[Math.floor(Math.random()*5)]+"</dt>") //添加本条评论的用户
.append("<dt class='floor'>第"+(i+1)+"楼</dt>")//添加本条评论的楼层
.append("<dd>"+commentContains[Math.floor(Math.random()*4)]+"</dd>"); //添加本条评论的内容
}
/**
remove()方法:从DOM中删除所有匹配的元素。(下面即将学习)
*/
$("dl:empty").remove(); //删除第30行生成的空<dl>元素
</script>
实现效果
图片.png
