利用jQuery对标签的属性增添删减
$('#i1').click(function(){
$('.c1').toggleClass('hide'); //对于标签添加class属性
$('#i1').attr('type','text'); //用于做自定义属性，或修改属性
$('#i1').removeAttr('value'); //删除某种属性
})
$('#i2').prop('checked',true); //专用于checkbox，rudio的默认
自选，以及不选
$(’…’)attr()只是获取属性的值，并无设值操作；
$(’…’)attr(’…’,’…’)给相应属性设置值；
文本切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.xuan {
height: 40;
border-right: 1px solid #eee;
width: 80px;
background-color: #355455;
float: left;
}
.text {
width: 240px;
height: 80px;
border:1px solid #ccc;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="xuan" a="1">选项一</div>
<div class="xuan" a="2">选项二</div>
<div class="xuan" a="3">选项三</div>
</div>
<div class="text">
<div class="" b="1">内容一</div>
<div class=" hide" b="2">内容二</div>
<div class=" hide" b="3">内容三</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
$('.xuan').hover(function(){
var target = $(this).attr('a');
$('.text').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
可以给标签自定义属性，然后让需要转换的两个标签有相连，再通过寻找标签保证对应的便签切换，这个案例里面我们要注意字符串的拼接：.children("[b='"+target+"']")target是指的所搜寻到的a标签属性值，属于字符串，所有我们要将它拼接进去。
添加文本框
$('#ul').append(temp); //往后加
$('#ul').prepend(temp); //往前加
$('#ul').after(temp); //往父级元素后加
$('#ul').before(temp); //往父级元素前加
----触发事件补充----
当有时利用jQuery绑定事件时，只能是对原有事件进行绑定，对于新加入的标签无作用，下面列出了四种绑定方式，只有最后一种绑定方法才可以对于新后添加的标签都具有绑定效果。
$('ul li').click(function(){ //基础普通点击触发事件
var target = $(this).text();
alert(target);
})
$('ul li').bind('click',function(){ //基础普通点击触发事件(注意括号里面是逗号)
var target = $(this).text();
alert(target);
})
$('ul li').on('click',function(){ //基础普通点击触发事件(注意括号里面是逗号)
var target = $(this).text();
alert(target);
})
$('ul').delegate('li','click',function(){ //可对于新添加元素绑定追加(必须是关键词delegate)
var target = $(this).text();
alert(target);
})
阻止事件触发
对于a标签来说，显而易见是点击后触发了事件，经过测试，我们会发现当我们为a标签绑定click后，他会先执行我们的事件，再跳转，这时会有一个return 的概念，当事件函数return false表示后续事件不再执行，turn则反之。
<body>
<form id="f1" action="表单验证.html">
<div><input type="text" name="n1"></div>
<div><input type="password" name="n2"></div>
<div><input type="text" name="n3"></div>
<div><input type="text" name="n4"></div>
<div><input type="text" name="n5"></div>
<div><input type="text" name="n6"></div>
<div><input type="text" name="n7"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-3.4.1.js"></script>
<script>
$(':submit').click(function(){
var flag = true;
$('.error').remove();
$('#f1').find('input[type="text"],input[type="password"]').each(function(){
var v = $(this).val();
if(v.length<=0){
flag=false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML="必填";
$(this).after(tag);
}
});
return flag;
})
</script>
</body>
通过一个表单测试即可得出试验结论。
----补充----
1.当我们在许多页面会见到类似于点击返回顶部的操作。我们可以利用jQuery完成一操作，但是首先要搞清进行的滚轮操作的目标对象是盒子，还是整个页面。
<script>
$(window).scrollTop(0);
$('#i2').scrollTop(50);
</script>
这里的window就代表的是整个页面的滚轮操作，而#i2就代表的盒子滚轮操作。
2.三种测试盒子高度的操作
console.log($('#i1').innerHeight())获取标签高度 纯高度+内边距
console.log($('#i1').outerHeight())获取标签高度 纯高度+加边框
console.log($('#i1').outerHeight(ture))获取标签高度 纯高度+加边框
3.自行添加jQuery事件
// $.extend({
// 'jwl':function(){
// return 'nb';
// }
// });
// var v=$.jwl();
// alert(v);
扫一扫
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
