JQuery操作属性
jQuery属性操作(不传参数是获取,传递参数是设置)。
html():设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
text():设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
val():设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样。val 方法同时设置多个表单项的选中状态。
<script type="text/javascript">
$(function() {
// 批量操作单选 $(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态 $(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态 $("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态 $("#single").val(["sin2"]); */
$("#multiple,#single,:radio,:checkbox").val(["radio2", "checkbox1", "checkbox3", "mul1", "mul4", "sin3"]);
});
</script>
attr():可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等。attr()方法还可以操作非标准的属性。比如自定义属性:abc、bbj。
prop():可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等。
案例:全选,全不选,反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//给全选绑定单击事件
$("#checkedAllBtn").click(function(){
$(":checkbox").prop("checked",true);
});
//给全不选绑定单击事件
$("#checkedNoBtn").click(function(){
$(":checkbox").prop("checked",false);
});
//给全反选绑定单击事件
$("#checkedRevBtn").click(function(){
//查询所有的球类复选框
$(":checkbox[name='items']").each(function(){
this.checked = !this.checked;
});
//检查是否满选
//获取全部球类的个数
var allCount = $(":checkbox[name='items']").length;
//获取选中球类的个数
var checkedCount = $(":checkbox[name='items']:checked").length;
/*
if(allCount == checkedCount){
$("#checkedAllBox").prop('checked',true);
}else{
$("#checkedAllBox").prop('checked',false);
}*/
$("#checkedAllBox").prop('checked',allCount == checkedCount);
});
//提交
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
//全选/全不选
$("#checkedAllBox").click(function(){
//在事件的function函数中,有一个this对象,这个this对象是当前正在响应事件的dom对象
//alert(this.checked);
$(":checkbox[name='items']").prop("checked",this.checked);
});
//给全部球类绑定单击事件
$(":checkbox[name='items']").click(function(){
//检查是否满选
//获取全部球类的个数
var allCount = $(":checkbox[name='items']").length;
//获取选中球类的个数
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop('checked',allCount == checkedCount);
});
});
</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>
DOM 的增删改
内部插入:
-
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 标签里的内容。
案例:从左到右,从右到左
<!DOCTYPE html>
<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="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//选中添加到右边
$("button:eq(0)").click(function(){
$("select[name=sel01] :selected").each(function(){
//alert(this);
$(this).appendTo("select[name=sel02]");
});
});
//全部添加到右边
$("button:eq(1)").click(function(){
$("select[name=sel01] option").each(function(){
//alert(this);
$(this).appendTo("select[name=sel02]");
});
});
//选中删除到左边
$("button:eq(2)").click(function(){
$("select[name=sel02] :selected").each(function(){
//alert(this);
$(this).appendTo("select[name=sel01]");
});
});
//全部删除到左边
$("button:eq(3)").click(function(){
$("select[name=sel02] option").each(function(){
//alert(this);
$(this).appendTo("select[name=sel01]");
});
});
});
</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>
案例:动态添加、删除表格记录
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态添加、删除表格记录</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//删除用户的方法
function delA(){
//获取要删除员工的名字
var name = $(this).parents("tr").find("td:eq(0)").text();
//弹出一个确认框
var flag = confirm("确认删除"+name+"吗?");
if(flag){
//删除当前a所在的tr
$(this).parents("tr").remove();
}
//取消默认行为
return false;
}
//删除用户
//$("a").click(delA);
$("a").live("click" , delA);
//添加员工
$("#addEmpButton").click(function(){
//获取用户填写的内容
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//创建tr
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">删除</a></td>
</tr>
*/
$("<tr></tr>").append("<td>"+name+"</td>")
.append("<td>"+email+"</td>")
.append("<td>"+salary+"</td>")
.append("<td><a href='#'>删除</a></td>")
.appendTo("#employeeTable");
});
});
</script>
</head>
<body>
<table id="employeeTable" border="1" cellpadding="1">
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="#">删除</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">姓名: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">邮箱: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">工资: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS 样式操作
-
addClass()
添加样式 -
removeClass()
删除样式 -
toggleClass()
有就删除,没有就添加样式。 -
offset()
获取和设置元素的坐标。
JQuery 动画
基本动画
-
show()
将隐藏的元素显示。 -
hide()
将可见的元素隐藏。 -
toggle()
可见就隐藏,不可见就显示。
以上动画方法都可以添加参数。 1、第一个参数是动画执行的时长,以毫秒为单位 2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
-
fadeIn()
淡入(慢慢可见)。 -
fadeOut()
淡出(慢慢消失)。 -
fadeTo()
在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明。 -
fadeToggle()
淡入/淡出 切换。
JQuery 事件操作
$( function(){} );
和window.onload = function(){}
的区别
触发时间
-
JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
-
原生 js 的页面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象,还要等标签显示时需要的内容加载完成。
触发顺序
-
JQuery页面加载完成之后先执行
-
原生JS的页面加载完成之后
执行次数
-
原生JS的页面加载完成之后,只会执行最后一次的赋值函数。
-
JQuery的页面加载完成之后是全部把注册的 function 函数,依次顺序全部执行。
jQuery中其他的事件处理方法
-
click()
它可以绑定单击事件,以及触发单击事件 -
mouseover()
鼠标移入事件 -
mouseout()
鼠标移出事件 -
bind()
可以给元素一次性绑定一个或多个事件。 -
one()
使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。 -
unbind()
跟 bind 方法相反的操作,解除事件的绑定。 -
live()
也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效。
事件的冒泡
事件的冒泡:父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。
阻止事件冒泡:在子元素事件函数体内,return false;
可以阻止事件的冒泡传递。
JavaScript事件对象
事件对象,是封装有触发的事件信息的一个JavaScript对象。 我们重点关心的是怎么拿到这个 JavaScript的事件对象。以及使用。
获取JavaScript事件对象:
在给元素绑定事件的时候,在事件的function( event )
参数列表中添加一个参数,这个参数名,我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。
1、原生JavaScript获取事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
2、JQuery 代码获取事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
3、使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
评论区