1：链式编程
2：动画
3：表单
4：滚动
1：链式编程
1.1多行代码合并成一行代码，需要提前认清此行代码返回的是不是对象，是对象才能链式编程
1.2案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script src="../../jquery-1.12.2.js"></script>
<script>
/*
* 多行代码合成一行代码，提前要知道此行代码返回的是不是对象，是对象才可以链式编程
*获取列表中每个li，当前的li有高亮显示，点击的时候，可以让当前被点击的li字体变大，颜色改变
* */
$(function () {
$("ul>li").mouseover(function () {
$(this).css("backgroundColor", "pink").siblings("li").css("backgroundColor", "");
}).click(function () {
$(this).css("fontSize", "50px").siblings("li").css("fontSize", "");
})
})
</script>
<body>
<ul>
<li>大家哈</li>
<li>大</li>
<li>大哈</li>
<li>家哈</li>
</ul>
</body>
</html>
1.3获取兄弟元素的几个方法
next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素（上一个）
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
width: 200px;
position: absolute;
left: 500px;
}
ul li {
margin-top: 10px;
cursor: pointer;
text-align: center;
font-size: 20px;
}
</style>
<script src="../../jquery-1.12.2.js"></script>
<script>
$(function () {
$("ul>li").mouseenter(function () {
$(this).css("backgroundColor", "pink").siblings("li").css("backgroundColor", "");
}).mouseout(function () {
$("ul>li").css("backgroundColor", "");
}).click(function () {
/*
* 断链：对象调用方法，返回的不是当前对象，再调用方法，调用不了
* 解决锻炼-----修复锻炼
* .end()恢复到锻炼之前的效果
* */
$(this).prevAll().css("backgroundColor", "yellow").end().nextAll().css("backgroundColor", "blue");
});
})
</script>
</head>
<body>
<ul>
<li>青岛啤酒（TsingTao）</li>
<li>瓦伦丁（Wurenbacher）</li>
<li>雪花（SNOW）</li>
<li>奥丁格教士（Franziskaner）</li>
<li>科罗娜喜力柏龙（Paulaner）</li>
<li>嘉士伯Kaiserdom</li>
<li>罗斯福（Rochefort）</li>
<li>粉象（Delirium）</li>
<li>爱士堡（Eichbaum）</li>
<li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>
2.1动画
常见的显示隐藏
Show(),hide(),里面既可以是number类型，也可以是字符串类型
“slow”，“normal”，“fast” ====200ms，400ms，600ms
隐藏动画案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
}
img {
width: 90px;
height: 90px;
vertical-align: top;
}
</style>
<script src="../../jquery-1.12.2.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
//获取div,最后一个图片,隐藏
$("div>img").last("img").hide(800, function () {
//arguments.callee相当于递归
$(this).prev().hide(800, arguments.callee);
});
});
//显示
$("#btn2").click(function () {
$("div>img").first("img").show(800, function () {
//arguments.callee相当于递归
$(this).next().show(800, arguments.callee);
});
});
});
</script>
</head>
<body>
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
</div>
</body>
</html>
2.2其他动画的方法
滑入滑出，切换划入划出 slideUp,slideDown,slideToggle
淡入淡出，切换淡入淡出fadeIn,fadeOut,fadeToggle
设置透明度：fadeTo(时间，到达的透明度)
动画方法
Animate({},动画的时间，回调函数)
第一个参数:键值对,(数值的属性可以改,颜色不能改)
第二个参数:动画的时间
第三个参数:回调函数
$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
$("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
});
3
Jq中创建元素和追加元素
.html(“”) $(“”)
$("div").html("");//清空层中内容
$("div").empty();//清空层中的内容
$("div").remove();//干掉自己
$("#btn").click(function () {
var cloneUl=$("#dv1").children().clone();
cloneUl.css("fontSize","50px");
$("#dv2").append(cloneUl);
})
案例动态创建表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
div {
margin-left: 300px;
margin-top: 100px;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="../../jquery-1.12.2.js"></script>
<script>
// 模拟从后台拿到的数据
var datas = [
{
name: "传智播客",
url: "http://www.itcast.cn",
type: "IT最强培训机构"
},
{
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
},
{
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}];
$(function () {
$("#btnCreate").click(function () {
var arr = [];
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
arr.push("<tr> <td><a href=" + data.url + ">" + data.name + "</a></td> <td>" + data.type + "</td> </tr>")
}
$("#tbd").html(arr);
})
})
</script>
</head>
<body>
<input type="button" value="获取数据" id="btnCreate"/>
<div>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody id="tbd">
</tbody>
</table>
</div>
</body>
</html>
3.2通过val()来获取和设置表格的value值，
$("#s1").val(2);//设置value为2的选中
设置和获取系统或者自定义的属性的值
Attr()可以设置属性值,两个参数:1.属性名字,2,属性值
1个参数:1.属性名字,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
<script src="../../jquery-1.12.2.js"></script>
<script>
$(function () {
//点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
$("#btn").click(function () {
//获取div,创建超链接
var aObj=$("<a></a>");
//attr();可以写两个参数:1参数；属性,2属性值
//attr();只写了一个参数,获取该元素的这个属性的值
aObj.attr("title","传智播客好帅"); //没啥用？
aObj.attr("href","http://www.itcast.cn");
aObj.text("传智播客"); //要显示的文字
// $("#dv").append(aObj);
aObj.appendTo($("#dv"));
console.log(aObj.attr("href"));
});
});
</script>
</head>
<body>
<input type="button" value="设置超链接" id="btn"/>
<div id="dv"></div>
</body>
</html>
3.3全选和全不选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="../../jquery-1.12.2.js"></script>
<script>
// $(function () {
// //为全选的复选框添加点击的方法
// $("#j_cbAll").click(function () {
// //当前的复选框选中
// //结果:true或者false
// var checked=$("#j_cbAll").prop("checked");
// $("#j_tb").find(":checkbox").prop("checked",checked);
// });
// //为tbody中所有的checkbox添加点击的方法
// $("#j_tb").find(":checkbox").click(function () {
// //获取所有的checkbox的个数
// var checkboxLength=$("#j_tb").find(":checkbox").length;
// //获取所有选中的checkbox的个数
// var checkedLength=$("#j_tb").find(":checked").length;
// //判断个数是否相等
// if(checkboxLength==checkedLength){
// $("#j_cbAll").prop("checked",true);
// }else{
// $("#j_cbAll").prop("checked",false);
// }
// });
//
// });
</script>
<script>
$(function () {
//全选的复选框注册点击的事件
$("#j_cbAll").click(function () {
//获取该复选框的选中状态,为下面所有的复选框的选中状态设置
var checked = $(this).prop("checked");
//获取所有的复选框
$("#j_tb").find(":checkbox").prop("checked", checked);
});
//获取所有的复选框
$("#j_tb").find(":checkbox").click(function () {
//先获取所有复选框的个数
var length1 = $("#j_tb").find(":checkbox").length;
//获取所有选中的复选框的个数
var length2 = $("#j_tb").find(":checked").length;
console.log(length1 + "======" + length2);
//对比个数是否相同,如果相同则全选,否则反选
if (length1 == length2) {
$("#j_cbAll").prop("checked", true);
} else {
$("#j_cbAll").prop("checked", false);
}
});
});
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>课程名称</th>
<th>所属学院</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>JavaScript</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>css</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>html</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>jQuery</td>
<td>前端与移动开发学院</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
4.1设置和获取元素的宽和高
.css .height() .width()
Offset()方法返回的是对象,并且,对象中有一个left和一个top,并且
值是数字类型
设置的时候也可以没有px
设置的时候元素在设置前如果没有脱离文档流,设置的时候会自
动进行脱离文档流,默认为relative
如果设置前有脱离文档流,那么设置的时候直接改变位置
扫一扫
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
