清空元素
html("")方法empty()方法remove()方法
克隆元素
clone()方法
清空和克隆元素的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清空元素中的内容</title>
<script src="../jquery-1.12.2.js"></script>
<style>
div{
width: 300px;
height: 200px;
background-color: red;
margin-top: 20px;
}
</style>
<script>
$(function () {
// 点击按钮清空div中的内容
$("#btn").click(function () {
// $("#dv").html("");//清空元素中的内容
// $("#dv").empty();//清空元素中的内容
$("#dv").remove();//清空元素中的内容--直接将自己干掉了(div)
});
// 克隆元素
$("#btn2").click(function () {
var spanObj = $("#dv>span").clone();//克隆,复制了这个元素
spanObj.css("fontSize","20px");
$("#dv2").append(spanObj);
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果" id="btn2"/>
<div id="dv">
<span>今天天气真好啊....</span>
</div>
<div id="dv2"></div>
</body>
</html>
获取value和文本内容
val()方法:val()方法可以改变某一项选中:
$("#se").val(4);text()方法- demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val方法</title>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
// 点击按钮把所有的表单的value属性值全部显示出来
$("#btn").click(function () {
// console.log($(this).val());//显示按钮的value属性值
// console.log($("#txt").val());//显示文本框的value属性值
// console.log($("#rad").val());//显示单选框的value属性值
// console.log($("#ck").val);//显示复选框的value属性值
// console.log($("#sm").val);//显示提交的value属性值
//设置表单元素的value属性值
// $(this).val("这是一个按钮");
// $("#txt").val("这是一个按钮啊啊啊");
// $("#rad").val("这是单选按钮");
// $("#ck").val("兴趣来了");
// $("#sm").val("这是sm按钮");
//获取文本域中的内容:1. .text()方法 2 .val()方法--推荐
console.log($("#tt").text());
//点击按钮让下拉框中的 上海选中
});
/*$("#btn").click(function () {
$("#se").val(4);//可以改变某一项中选中
});*/
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<input type="radio" value="man" name="sex" id="rad" />男
<input type="checkbox" value="1" id="ck" />吃饭
<input type="submit" value="提交" id="sm" />
<!--表单元素-->
<textarea name="" id="tt" cols="30" rows="10">
哈哈,我又变帅了....
</textarea>
<select id="se">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">重庆</option>
<option value="5">东京</option>
</select>
</body>
</html>
attr设置属性
attr()可以写两个参数: 1.属性名,2.属性值
arrt()致谢一个参数,获取该元素的这个属性值
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr</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.baidu.com");
aObj.text("百度");
$("#dv").append(aObj);
console.log(aObj.attr("href"));
});
});
</script>
</head>
<body>
<input type="button" value="设置超链接" id="btn"/>
<div id="dv"></div>
</body>
</html>
复选框的问题
- 使用attr()方法是不能真正获取到复选框中的checked属性的值的,打印出来未定义undefined
- prop方法可以真正获取到复选框的checked属性值
demo:点击按钮获取复选框属性,判断是否选中,点击时如果选中就改成未选中,反之.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function (){
$("#btn").click(function () {
// console.log($("#ck").attr("checked"));//未定义undefined
// pop()可以真正的获取元素知否选中的状态
// console.log($("#ck").prop("checked"));
//点击按钮让复选框选中,再点击按钮让复选框不选中
var flag = $("#ck").prop("checked");//获取选中的状态
if(flag){
//选中了
$("#ck").prop("checked",false);
}else{
//没选中
$("#ck").prop("checked",true);
}
});
});
</script>
</head>
<body>
<input type="button" value="显示状态" id="btn"/>
<input type="checkbox" value="1" id="ck" />打豆豆
</body>
</html>
全选和全不选demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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>
//先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中和不全选
//让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
$(function () {
$("#j_cbAll").click(function () {//全选
var cked=$(this).prop("checked");//保存当前复选框的选中状态
//获取tbody中所有的复选框
$("#j_tb").find(":checkbox").prop("checked",cked);
});
//获取tbody中所有的复选框
$("#j_tb input[type='checkbox']").click(function () {
//现获取tbody中所有的复选框的个数
var length1 = $("#j_tb input[type='checkbox']").length;
// 获取tbody中所有选中的复选框的个数
var length2 = $("#j_tb input:checked").length;
//比较二者,与最上面的复选框保持一致
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>
设置宽高
- 用css()方法获取,操作的是字符串.
- 用jq中的width和height的两个方法来操作是使用的数字方式.
demo:点击按钮获取宽高,设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置宽高</title>
<style>
div{
width: 200px;
height: 100px;
background-color: green;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
//获取宽高
$(function () {
$("#btn").click(function () {
// 获取元素的宽高,获得是字符串,需要转成数字parseInt可以将前面为数字的字符转成数字,不包括后面的字符,如400px--->400
// var width = parseInt($("#dv").css("width"))*2;
// var height = parseInt($("#dv").css("height"))*2;
// console.log(width,height);
//设置样式:
// $("#dv").css("width",width+"px");
// $("#dv").css("height",height+"px");
//上面的操作通过css操作都是字符类型
//获取宽和高的属性值-->数字类型
var width = $("#dv").width()*2;
var height = $("#dv").height()*2;
//设置元素的宽高-->参数可以是数字也可以是字符
$("#dv").width(width);
$("#dv").height(height);
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
offset()方法返回的属性left和top
offset()方法返回的结果包含了两个属性left和top,均为数字类型
demo:点击按钮获取left和top,再重新设置left和top,设置是通过offset方法参数来实现的,参数是一个对象,包括left和top的键值对.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:100px;
top:50px;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//获取left和top的值--->都是数字类型
//offset()方法返回的结果包含了两个属性left和top
console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
$("#dv").offset({"left":200,"top":200});
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
获取滚动条的位置
scrollLeft()和scrollTop()方法
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 2000px;
height: 2000px;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
$(document).click(function () {
console.log($(this).scrollLeft()+"======"+$(this).scrollTop());
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
