前端-jQuery-操作标签-属性操作
##############
jQuery-操作标签
#####
jQuery样式操作-操作class类-点击登录
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义模态框示例</title>
<style>
.cover {
position: absolute;
/*这是铺满屏幕*/
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 998;
}
.modal {
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送!</button>
<div class="cover hide"></div>
<div class="modal hide">
<form>
<p>
<label>用户名:
<input type="text">
</label>
</p>
<p>
<label>密码:
<input type="password">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 找到点击弹出模态框的按钮
$("#b1").click(function () {
// 把.cover和.modal显示出来(去除掉.hide)
$(".cover").removeClass("hide"); // 显示背景
$(".modal").removeClass("hide"); // 显示模态框
});
// 找到取消按钮,绑定事件
$("#cancel").click(function () {
// 给背景和模态框都加上hide类
$(".cover").addClass("hide");
$(".modal").addClass("hide");
})
</script>
</body>
</html>
jQuery修改css样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改CSS样式</title>
</head>
<body>
<p>乔小强</p>
<p>二哥</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("p").click(function () {
// 把当前点击的标签变绿
// 在处理事件的函数中用 this 表示 当前触发事件的标签
// $(this).css("color", "red");
// $(this).css("font-size", "24px");
$(this).css({"color": "pink", "font-size": "48px"});//这个写法就是直接修改的标签的style属性，里面就是css样式，
//使用原生dom怎么写的？
// 是找到元素.style.color="green"
})
</script>
</body>
</html>
###
原生js操作ss
jQuery操作css
####
jQuery位置相关方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置相关方法</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1,
.c2,
.c3 {
height: 100px;
width: 100px;
background-color: red;
}
.c2 {
position: relative;
left: 200px;
top: 200px;
background-color: green;
}
.c3 {
position: absolute;
left: 100px;
top: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1">我是div</div>
<div class="c2">
<div class="c3">我是c3</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".c1").offset(); //返回一个字典：{top: 0, left: 0}，获取位置
$(".c1").offset({top:100,left:100});//这是直接通过参数设置位置
$(".c3").position(); //获取匹配元素相对父元素的偏移，没有父标签就是和offset一样的结果，从body算父标签
</script>
</body>
</html>
############### jQuery位置相关方法-返回顶部实例 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
* {
margin: 0;
}
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(window).scroll(function () {//scroll这个是滚动事件
if ($(window).scrollTop() > 100) {//通过控制这个按钮的hide 属性来判断是否要展示，
$("#b2").removeClass("hide");
} else {
$("#b2").addClass("hide");
}
});
$("#b2").click(function () {
$(window).scrollTop(0);//设置距离顶部的距离是0，那么就是回到顶部了
})
</script>
</body>
</html>
#####
jQuery尺寸操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>尺寸示例</title>
<style>
.c1 {
height: 100px;
width: 200px;
padding: 10px;
margin: 20px;
background-color: red;
border: 5px solid green;
}
</style>
</head>
<body>
<div>
<div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".c1").height(); //这是文本的高度
$(".c1").width();//这是文本的宽度
$(".c1").innerHeight(); //这是文本和padding的高度
$(".c1").innerWidth();//这是文本和padding的宽度
$(".c1").outerHeight();//这是文本和padding，还有border的高度
$(".c1").outerWidth();//这是文本和padding，还有border的宽度
</script>
</body>
</html>
jQuery的文档操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<div id="d1">
<p><span>span</span></p>
<div>div</div>
</div>
<form id="f1">
<p>
<label>用户名:
<input class="need" name="username" type="text">
<span class="error"></span>
</label>
</p>
<p>
<label>密码:
<input class="need" name="password" type="password">
<span class="error"></span>
</label>
</p>
<p>爱好:
<label>篮球
<input name="hobby" value="basketball" type="checkbox">
</label>
<label>足球
<input name="hobby" value="football" type="checkbox">
</label>
<label>双色球
<input name="hobby" value="doublecolorball" type="checkbox">
</label>
</p>
<p>性别:
<label>男
<input name="gender" value="1" type="radio">
</label>
<label>女
<input name="gender" value="0" type="radio">
</label>
<label>保密
<input name="gender" value="2" type="radio">
</label>
</p>
<p>
<label for="s1">从哪儿来:</label>
<select name="from" id="s1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
</select>
</p>
<p>
<label for="s2">从哪儿来:</label>
<select name="from" id="s2" multiple>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
<option value="0755">深圳</option>
</select>
</p>
<p>
<label for="t1">个人简介:</label>
<textarea name="memo" id="t1" cols="30" rows="10">
</textarea>
</p>
<p>
<input id="b1" type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 对html和text文本操作
$("#d1");//获取id是d1的标签，这是一个jQuery对象
$("#d1")[0];//这是把jQuery对象里面的内容取出，这就是一个dom对象了
$("#d1")[0].innerHTML;//这是获取这个标签下面所有的html内容
$("#d1")[0].innerText;//这是获取这个标签下面所有的html内容
// ####################
//上面是dom操作
//使用jQuery操作
$("#d1").html();
$("#d1").text();
$("#d1").html("hehe");//这是设置html的值，但是这种设置之后，里面的子标签也会被替换
$("#d1").html("<p>123</p>>");//这是设置一个p标签，但是这种设置之后，里面的子标签也会被替换
$("#d1").text("hehe");//这是设置text的值，但是这种设置之后，里面的子标签也会被替换
//############################
// 对值操作：
$(":text").val();// 取得第一个匹配元素的当前值
$(":text").val("andy");// 设置所有匹配元素的值
//对多选框取值
$(":checkbox");//这是多选框中所有的值
$(":checkbox").val();//这是取多选框的值，但是只会返回第一个
$(":checkbox:checked");//这是取多选框中选中的值
$(":checkbox:checked").val();//这是取多选框被选中的值，但是只会返回第一个
//所以上面的两种取值方式都是有问题的，不能这么取
$("input").val();//这个取值也是默认只是去第一个input框的值，
$("input").val("1212")//但是设置值就是把所有的input框全都设置成这个了，
//这个取值和设置值的区别要记住，
//所以要循环读取才可以
var $checkbox = $(":checkbox:checked");
for (var i =0;i<$checkbox.length;i++){
console.log($checkbox[i]);
console.log($($checkbox[i]).val())
}
// 设置值
$(":checkbox:checked").val("basketball");
// 对单选框取值
$(":radio").val();
//对下拉框的单选和多选取值
$("#s1").val();
$("#s2").val();
// 设置值
$("#s2").val(["021","0755"]);
//对文本框操作
$("#t1").val()
</script>
<script>
// 需求：点击登录按钮验证用户名和密码为不为空
// 为空就在对应的input标签下面显示一个错误提示信息
// 1. 给登录按钮绑定点击事件
// 2. 点击事件要做的事儿
// 2.1 找到input标签--> 取值 --> 判断为不为空 --> .length为不为0
// 2.2 如果不为空,则什么都不做
// 2.2 如果为空,要做几件事儿
// 2.2.1 在当前这个input标签的下面 添加一个新的标签,内容为xx不能为空
$("#b1").click(function () {
var $needEles = $(".need");//找到所有必填的input标签
for (var i = 0; i < $needEles.length; i++) {
if ($($needEles[i]).val().trim().length === 0) {
var labelName = $($needEles[i]).parent().text().trim().slice(0, -1);//父标签就是label标签，文本就是用户名密码，进行切片是把后面的冒号去掉
$($needEles[i]).next().text(labelName + "不能为空!");//next已经定位到了下面的span标签，text是对这个span标签进行设置文本
}
}
//现在点击登录相当于两个事件，一个是我们自己绑定的，一个是默认的点击会自动提交的事件，
//设置这个False就是说执行完我的这个事件之后，下面的就不执行了，这样我们可以看到效果
return false;
})
</script>
</body>
</html>
jQuery属性操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
</head>
<body>
<img src="http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg" alt="">
<input type="button" id="b1" value="下一个">
<input checked type="checkbox" id="c1">
<input type="checkbox" id="c2">
<script src="jquery-3.2.1.min.js"></script>
<script>
//属性设置
$("img").attr({"title":"213123"})
//属性删除
$("img").removeAttr("title")
//判断一个radio，和CheckBox 有没有被选中
$("#c1").prop("checked")//返回一个布尔类型，
$("#c1").prop("checked",false)//设置值，取消选中
</script>
<script>
var oldURL;
var newURL = "http://img01.yohoboys.com/contentimg/2017/08/12/21/012a1eab9842a752f8c4d98b8fc2777ad7.jpg"
$("#b1").click(function () {
var $imgEles = $("img");
// 修改img标签的src属性
oldURL = $imgEles.attr("src");
$imgEles.attr("src", newURL);
newURL = oldURL;
});
</script>
</body>
</html>
jQuery全选-取消-反选功能分析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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>xx演员</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>韩涉</td>
<td>导演</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="反选">
<input type="button" id="b3" value="取消">
<script src="jquery-3.2.1.min.js"></script>
<script>
// 点击全选,表格中所有的checkbox都选中
// 1. 找checkbox
// 2. 全部选中 --> prop("checked", true);
// 点击取消
// 1. 找checkbox
// 2. 全部取消选中 --> prop("checked", false);
// 反选
// 1. 找到所有的checkbox
// 2. 判断
// 2.1 原来没选中的,要选中
// 2.2 原来选中的,要取消选中
</script>
</body>
</html>
###
######################
技术改变命运
