48 直接操作css样式 文本操作 属性操作 登录验证 全选取消反选
主要内容:
1 直接操作css样式
$('.divineRight').css('color','red') 设置值
$('.divineRight').css('color') 获取值
2 位置
offset () : 获取匹配元素在当前窗口的相对位移或设置元素位置;
positon(): 获取匹配元素相对于父元素的偏移;
scrollTop(): 获取匹配元素相对滚动条顶部的偏移
scrollLeft(): 获取匹配元素相对滚动条左侧的偏移
$('.senseOfRitual').offset()
{top: 200, left: 400}
$('.senseOfRitual').position()
{top: 200, left: 200}
使用滚动条返回顶部事例: 见老师博客:https://www.cnblogs.com/liwenzhou/p/8178806.html
3 : 尺寸
height() innerHeight() outerHeight()
width() innerWidth() outerWidth()
$('.c1').height() 文本的高度
200
$('.c1').innerHeight() padding内填充的高度+文本的高度
220
$('.c1').outerHeight() border边框的高度+padding内填充的高度+文本的高度
230
4 : 文本操作
test()
document.getElementById('d0').innerText
"div的文本
p标签的文本呵呵哒~"
$('#d0').text() 获取值
"
div的文本
p标签的文本呵呵哒~
"
$('#d0').text('嘿嘿') 设置值
$('#d0').text("<a href='http://www.sogo.com'>sogo</a>")
结果:<a href='http://www.sogo.com'>sogo</a> 不能访问
html()
$('#d0').html() 获取值
"
<div>div的文本
<p>p标签的文本<span>呵呵哒~</span></p>
</div>
"
$('#d0').html('哈哈') 设置值
w.fn.init [div#d0]
$('#d0').html("<a href='http://www.sogo.com'>sogo</a>") 可以访问
val()
$('#i1').val() 获取值
"mi"
$('#i1').val('tiantian') 设置值
w.fn.init [input#i1]0: input#i1length: 1__proto__: Object(0) input框
$('#s1').val() select获取的value是对应的value值
"1"
$('#s1').val()
"2"
$('#s1').val(3)
$('#t1').val() testarea文本框
"雨后江岸破晓
老舟新客知多少
"
$('#t1').val('张杰/张靓颖') 设置值
w.fn.init [textarea#t1]
val([val1,val2]) 设置多选的select和checkbox值
<body>
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<input type="checkbox" value="doublecolorball" name="hobby">双色球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
</script>
</body>
</html>
获取选中的checkbox或radio的值
$("input[name='gender']:checked").val() radio
"1"
$("input[name='hobby']:checked").val() checkbox val获取的默认值只能取第一个元素的值
"basketball"
5 属性操作:
用于id等或者自定义属性
$('#d1').attr('id') 获取属性值 "d1" $('#d1').attr('s14') "hao" $('#d1').attr('s14','good') 设置属性值 w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0) $('#d1').removeAttr('s14') 删除属性 w.fn.init [div#d1] $('#d1').attr({'s14':'good','teacher':'best'}) 采用字典可设置多个属性 w.fn.init [div#d1]
用于checkbox和radio
$('#i1').prop('checked') 获取属性 获取的是布尔值 // 获取文本的属性用attr
true
$('#i1').prop('checked')
false
prop和attr的区别:
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox . radio 和option的是否被选中都用prop
补充:
<form action="">
<input type="text">
<button type="button">点我</button>
<!--form里面的button按钮不写type属性默认是submit类型 submit类型的按钮一点就会提交表单刷新页面-->
</form>
6 全选 反选 取消
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>蝇蝇</td>
<td>用手</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>康抻</td>
<td>gay in gay out</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>黄袍哥</td>
<td>吹牛逼</td>
</tr>
</tbody>
</table>
<hr>
<button id="b1">全选</button>
<button id="b2">反选</button>
<button id="b3">取消</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 全选
$("#b1").click(function () {
// 找到所有的checkbox,选中:prop("checked", true)
$(":checkbox").prop("checked", true);
});
// 取消
$("#b3").click(function () {
// 找到所有的checkbox,取消选中:prop("checked", false)
$(":checkbox").prop("checked", false);
});
// 反选
$("#b2").click(function () {
// 找到所有选中的checkbox取消选中
// $("input:checked").prop("checked", false); // 此时全部都没选中
// // 找到所有没选中的checkbox选中
// $("input:not(:checked)").prop("checked", true) // 此时都全选中
// var $check = $(":checkbox");
// for (var i=0;i<$check.length;i++){
// var tmp = $check[i];
// var s = $(tmp).prop("checked");
//
// // 如果s是true就改成false，如果是false就改成true
// // if (s){
// // $(tmp).prop("checked", false);
// // }else {
// // $(tmp).prop("checked", true);
// // }
//
// $(tmp).prop("checked", !s);
// }
// 找到所有选中的checkbox;
var $checked = $("input:checked");
// 找到没有选中的
var $unchecked = $("input:not(:checked)");
$checked.prop("checked", false);
$unchecked.prop("checked", true);
});
</script>
</body>
</html>
7 登录验证问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>d登录验证练习题</title>
</head>
<body>
<form action="" id="f1">
<p>
<label>用户名：
<input type="text" name="username" id="i1">
<span></span>
</label>
</p>
<p>
<label>密码：
<input type="password" name="password" id="i2">
<span></span>
</label>
</p>
<button type="button" id="b1">登录</button>
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$("#b1").click(function () {
var $inputEles = $("#f1 input");
for (var i=0;i<$inputEles.length;i++){
var tmp = $inputEles[i];
if ($(tmp).val().length === 0){
// 表示该input框的值为空
console.log($(tmp).parent().text().trim().slice(0,-1));
var s = $(tmp).parent().text().trim().slice(0,-1);
$(tmp).next().text(s + "不能为空").css("color", "red");
}
}
});
</script>
</body>
</html>
