相对路径引入方式
html/css/js各类相对路径引用方法归类
/代表根目录;
../代表上一级目录;
../../代表上两级目录;
/..代表下级目录;
/../..代表下两级目录.
同级 直接引用文件名
<img src='katana.jpg'/>
下级 同级目录/下级目录/文件名
<img src='bl9u.katana.jpg'/>
获取文档高度
$(document).height()
jQuery(window).height()代表了当前可见区域的大小，
jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.
注意：当浏览器窗口大小改变时(如最大化或拉大窗口后) ，
jQuery(window).height() 随之改变，但是
jQuery(document).height()是不变的。
操作标签
样式类
addClass() 添加指定的css类
removeClass() 移除指定的css类名
hasClass() 判断样式存不存在
toggleClass() 切换css 类名 如果有就清除, 没有就添加
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height:200px;
width: 200px;
/*border-radius:50%;*/
background-color: red;
}
.c2{
background-color: green;
}
</style>
</head>
<body>
<div class="c1" id="d1"></div>
<script src="../day48/jquery.js"></script>
</body>
</html>
标签操作
样式类操作
添加类删除类
$('.c1').addClass('c2')
$('.c1').hasClass('c1')
$('.c1').hasClass('c2')
$('.c1').hasClass('c2')
css 样式
原生dom
标签.style.color='red'
jquery
$('.c1').css({'background-color':'red','height':'400px'})
位置操作
offset() 获取元素在当前窗口的相对位置
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离
$(window).scrollTop(200) 直接滚动到200位置
相对位置
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离
.c1{
height:200px;
width: 200px;
/*border-radius:50%;*/
background-color: red;
position:relative;
}
.c2{
height:50px;
width: 50px;
background-color: green;
position:absolute;
}
设置c1 offset c2 会跟着移动
jquery绑定事件 的写法
原生
// $('.c1')[0].onclick=function () {
// this.style.backgroundColor="green"
//
// }
jquery
$('.c1').click(function () {
$(this).css({backgroundColor:'green'})
})
注意的是 this--> $(this)
点击就移动
$(this).offset({top:100,left:100})
返回顶部
锚点方式
<a href="#top">返回顶部</a>
*********************************
//顶部
$('.c3').click(function () {
// $(this).css({backgroundColor:'green'})
$(window).scrollTop(0)
})
//底部
$('.c4').click(function () {
// $(this).css({backgroundColor:'green'})
$(window).scrollTop($(document).height())
})
改进 自动隐藏
$(window).scroll(function () {
console.log($(window).scrollTop())
console.log($(window).height())
if ($(window).scrollTop() > $(window).height()){
$('.c3').removeClass('hide');
}
else{
$('.c3').addClass('hide');
}
大于窗口 出现
小于窗口宽度 消失
盒子尺寸：
height()
//盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight()
//内容content高度 + 两个padding的高度
innerWidth()
outerHeight()
//内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()
文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容，包含标签内容
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
$('.c1').html() 获取
$('.c1').html('<h3>打打</h3> ')
文本值：
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
$('.c1').text() 获取文本
$('.c1').text('<h3>打打</h3> ')
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
查看值
单选 checked
$('[name=sex]:checked').val() 选择选中的
$(':radio:checked').val()
多选
var d= $(':checkbox:checked')
for (var c in d){
console.log(d.eq(c).val());
}
另一种 首选**************
for (var i = 0 ;i<d.length;i++){
console.log(d.eq(i).val());
}
eq(i) 多元素选择
下拉框
$('#city').val()
设置值
单选框
$('[name=sex]').val(['2'])
tip:
$('[name=sex]').val('2') 不带[] 的话
所有的值全都设置成 2 了
多选下拉
$('#author').val(['2','3'])
多选框 checkbox
$('[name=hobby]').val(['2','3'])
下拉框
$('#city').val('6')
属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
设置单个属性
$('.c1').attr('xx','oo')
设置多个属性
$('.c1').attr({'age':18,'sex':alex})
$('.c1').attr({age:18,sex:'alex'})
前面不带 后面字符带
查看属性
$('.c1').attr('属性名')
$('.c1').attr('xx')
$('.c1').attr('age')
必须带 引号
移除属性
$('.c1').removeAttr('age')
prop针对的是 checked/ selected /disabled
查看标签是否有checked属性 也就是是否被选中
attr $(':checked').attr('checked')
//checked --undefined
prop$(':checked').prop('checked')
//true --false
$(':radio').eq(1).attr('checked','checked')
选中第二个
$(':radio').eq(1).prop('checked',true)
true 和false 不加引号
不选中
$(':radio').eq(1).prop('checked',false)
简单总结:
1. 对于标签上有的能看到的属性和自定义属性用attr
2. 对于返回布尔值的比如 checkbox radio 和option 是否被选中或者设置 选中与 取消选中 都用prop()
具有true 和false 两个属性的属性 例如checked selected disabled 都用 prop 其他的使用 attr()
prop不支持的 获取自定义属性
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
5/6
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$('.c1').append ('<a href='www.baidu.com'>bddu</a>')
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
$('.c1').remove()
替换
replaceWith()
replaceAll()
两个一样 随便用
$('.c1').replaceWith('asdsad')
例子 新增开除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#t1{*/
/*border: 10px solid blue;*/
/*width: 300px;*/
/*}*/
.kai{width:60px;
height: 30px;
color: red;
}
#name{
width: 50px;
}
#hobby{
width: 50px;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="3px" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>吃饭</td>
<td>
<button class="kai">开除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>睡觉</td>
<td> <button class="kai">开除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>打豆豆</td>
<td> <button class="kai">开除</button></td>
</tr>
</tbody>
</table>
<!--<div class="cover hide"></div>-->
<!--<div class="modal hide">-->
<!--<div>-->
<!--<label >姓名:<input type="text" id="name"></label>-->
<!--</div>-->
<!--<div><label >爱好<input type="text" id="hobby"></label></div>-->
<!--</div>-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#add').on('click',function(){
$('table').append('<tr>\n' +
' <td><input type="checkbox"></td>\n' +
' <td><input type="text" id="name"></td>\n' +
' <td><input type="text" id="hobby"></td>\n' +
' <td> <button class="kai">开除</button></td>\n' +
'</tr>');
});
$("table").on('click', '.kai', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我
//们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
// 点击开除按钮要做的事儿
// 把当前行移除掉
//this --> 触发当前点击事件的DOM对象
$(this).parent().parent().remove(); // 链式操作
});
</script>
</body>
</html>
<!--$('#b1').on('click',function(){-->
<!--$(this).clone(true).insertAfter(this)};)-->
官方的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.modal {
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗头、不翻车、不要脸</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<div>
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>爱好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" type="button">取消</button>
<button id="submit" type="button">提交</button>
</div>
<script src="jquery.js"></script>
<script>
// 定义一个清空输入框并且隐藏模态框的方法
function hideModal(){
// 1. 清空input的值
$("#name,#hobby").val('');
// 2. 隐藏起来
$(".cover,.modal").addClass('hide');
}
// 开除按钮的功能
$("table").on('click', '.fire', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我
//们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
// 点击开除按钮要做的事儿
// 把当前行移除掉
//this --> 触发当前点击事件的DOM对象
$(this).parent().parent().remove(); // 链式操作
});
// 新增按钮的功能
$("#add").click(function () {
// 点击新增按钮要做的事儿
// 1. 移除cover和modal的hide样式
$(".cover,.modal").removeClass('hide');
});
// 点击modal中的cancel按钮
$("#cancel").click(function () {
hideModal();
});
// 点击modal中的submit按钮
$("#submit").click(function () {
// 1. 获取用户输入的值
var name = $("#name").val();
var hobby = $("#hobby").val();
// 2. 隐藏模态框，清空输入框
hideModal();
// 3. 创建一个tr标签，把数据塞进去
var trEle = document.createElement("tr");
$(trEle).append('<td><input type="checkbox"></td>');
$(trEle).append('<td>' + name + '</td>');
var tdTmp = document.createElement('td');
tdTmp.innerText = hobby;
$(trEle).append(tdTmp);
$(trEle).append('<td><button class="fire">开除</button></td>')
// 4. 把上一步的tr追加到表格的tbody后面
$('tbody').append(trEle);
});
//先用下面这种方式写，你会发现一些问题，我们新添加的每一行数据里面的那个button标签点击删除的时候没有效果
// // 点击modal中的submit按钮
// $("#submit").on('click', function () { #这个和直接$('submit').click(function ...)是一样的
// // 1. 获取用户输入的值
// var name = $("#name").val();
// var hobby = $("#hobby").val();
// // 2. 隐藏模态框，清空输入框
// hideModal();
// // 3. 创建一个tr标签，把数据塞进去
// var trEle = document.createElement("tr");
// $(trEle).append('<td><input type="checkbox"></td>');
// $(trEle).append('<td>' + name + '</td>');
// var tdTmp = document.createElement('td');
// tdTmp.innerText = hobby;
// $(trEle).append(tdTmp);
// $(trEle).append('<td><button class="fire">开除</button></td>')
// // 4. 把上一步的tr追加到表格的tbody后面
// $('tbody').append(trEle);
// })
</script>
</body>
</html>
和自己的区别就是, 自己的直接点击就出来一行,然后自行输入数据
官方的就是 先输入数据,点击确定 数据才添加一行