标签：checked attr val 标签 第四十九 height c1
相对路径引入方式
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>
和自己的区别就是, 自己的直接点击就出来一行,然后自行输入数据
官方的就是 先输入数据,点击确定 数据才添加一行
标签：checked,attr,val,标签,第四十九,height,c1 来源： https://www.cnblogs.com/xueba/p/12786220.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。