jQuery文本 样式以及属性操作
文本操作
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
$(..).val()
$(..).val('文本')
样式操作
addClass
removeClass
toggleClass
属性操作：
专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')
专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
$().index()获取索引位置
文档处理：
append()
prepend()
after()
before()
remove()
empty()
clone()
实例 增加 删除 复制元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="content">
<button id="add">添加</button>
<button id="del">删除</button>
<button id="copy">复制</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#add').click(function () {
$('ul').append('<li>'+$('#content').val()+'</li>');
$('#content').val('');
});
$('#del').click(function () {
$('ul li').eq($('#content').val()).remove();
$('#content').val('');
});
$('#copy').click(function () {
$('ul').append($('ul li').eq($('#content').val()).clone());
$('#content').val('');
})
</script>
</body>
</html>
css处理
$('t1').css('样式名称', '样式值')
实例 点赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
addFavor(this);
});
function addFavor(self) {
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize);
tag.style.right = top+'px';
tag.style.top = right+'px';
tag.style.opacity = opacity;
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right -10;
opacity = opacity - 0.1;
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
},50);
};
</script>
</body>
</html>
位置
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
事件
$('.c1').click()
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
对jquery动态创建的标签绑定事件（delegate在点击时绑定事件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
</script>
</body>
</html>
阻止事件发生
return false
当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
<a href="http://www.baidu.com" id="i1">search</a>
<script type="text/javascript" src='query-1.12.4.js'></script>
<script type="text/javascript">
$('#i1').click(function () {
alert($('#i1').text());
return false;
})
</script>
实例 登陆框验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="http://www.baidu.com">
<div><input name="用户名" type="text"></div>
<div><input name="密码" type="password"></div>
<div><input name="确认密码" type="password"></div>
<div><input name="邮箱" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find(':text,:password').each(function () {
if($(this).val().length<=0){
var tag = document.createElement('span');
tag.innerText = '必填';
tag.className = 'error';
$(this).after(tag);
flag = false;
return false;
}
})
return flag;
})
</script>
</body>
</html>
