前言
学习是不断思考不断记录的过程,下面是我学习jQuery的一些知识记录,如有错误欢迎大家能够指正。
一、jQuery 属性操作
Column 1 | Column 2 |
---|---|
html() | 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。 |
text() | 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。 |
val() | 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样 |
attr() | 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等等attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj |
prop() | 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $items = $(":checkbox[name=items]");
var items = $("[name='items']");
//全选按钮
$("#checkedAllBtn").click(function(){
items.attr("checked",true);
$("#checkedAllBox").attr("checked",true);
});
//全不选按钮
$("#checkedNoBtn").click(function(){
items.attr("checked",false);
$("#checkedAllBox").attr("checked",false);
});
//反选按钮
$("#checkedRevBtn").click(function(){
items.each(function(){
this.checked = !this.checked;
});
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});
//提交按钮
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
//全选/全不选复选框
$("#checkedAllBox").click(function(){
items.attr("checked",this.checked);
});
//全选/全不选复选框与items状态同步
$("[name='items']").click(function(){
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
二、对象的增删改
方法 | 作用 |
---|---|
内部插入 | |
appendTo() | a.appendTo(b)把 a 插入到 b 子元素末尾,成为最后一个子元素 |
prependTo() | a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素 |
外部插入 | |
insertAfter() | a.insertAfter(b) 得到 ba |
insertBefore() | a.insertBefore(b) 得到 ab |
替换 | |
replaceWith() | a.replaceWith(b) 用 b 替换掉 a |
replaceAll() | a.replaceAll(b) 用 a 替换掉所有 b |
删除 | |
remove() | a.remove(); 删除 a 标签 |
empty() | a.empty(); 清空 a 标签里的内容 |
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//选中添加到右边
$("button:eq(0)").click(function(){
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
//全部添加到右边
$("button:eq(1)").click(function () {
$("select:eq(0) option").appendTo($("select:eq(1)"));
})
//选中删除到左边
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
})
//全部删除到左边
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
})
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
三、CSS 样式操作及jQuery 动画
方法 | 用途 |
---|---|
css样式操作 | |
addClass() | 添加样式 |
removeClass() | 删除样式 |
toggleClass() | 有就删除,没有就添加样式。 |
offset() | 获取和设置元素的坐标。 |
基本动画 | |
show() | 将隐藏的元素显示 |
hide() | 将可见的元素隐藏。 |
toggle() | 可见就隐藏,不可见就显示。 |
淡入淡出动画 | |
fadeIn() | 淡入(慢慢可见) |
fadeOut() | 淡出(慢慢消失) |
fadeTo() | 在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明 |
fadeToggle() | 淡入/淡出 切换 |
四、jQuery 事件操作
方法 | 作用 |
---|---|
click() | 它可以绑定单击事件,以及触发单击事件 |
mouseover() | 鼠标移入事件 |
mouseout() | 鼠标移出事件 |
bind() | 可以给元素一次性绑定一个或多个事件。 |
one() | 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。 |
unbind() | 跟 bind 方法相反的操作,解除事件的绑定 |
live() | 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效 |
eg:
jQuery 代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
使用 bind 同时对多个事件绑定同一个函数。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});