DOM操作
DOM查询（元素节点）
过滤
eq(index|-index) 选出索引为index 的元素（0开始） ,负号表示可以倒着选（-1开）
first() 选出第一个元素
last() 选出最后一个元素
hasClass(class) 是否含有class值
filter(expr|obj|ele|fn) 按照表达式过滤
is(expr|obj|ele|fn)1.6* 是否满足表达式
has(expr|ele) 是否含有表达式的元素
not(expr|ele|fn) 判断一个元素是不是符合表达式
slice(start,[end]) 表示从start开始选择直到end,只传递一个start表示从start开始直至结束
查找
children([expr]) 查找所有子元素，传入表达式，表示满足表达式的子元素
closest(expr,[con]|obj|ele)1.6* 表示查找和当前元素最接近的元素
find(expr|obj|ele) 表示查找元素，查找的是后代元素
next([expr]) 查找下一个元素
nextall([expr]) 查找下面所有的元素
nextUntil([exp|ele][,fil])1.6* 查找相邻元素一直到结束
offsetParent() 返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
parent([expr]) 返回父元素
parents([expr]) 返回所有祖先元素
parentsUntil([exp|ele][,fil])1.6* 返回所有祖先元素直到满足表达式为止
prev([expr]) 返回之前的那个元素
prevall([expr]) 返回之前所有的兄弟元素
prevUntil([exp|ele][,fil])1.6* 返回之前所有兄弟元素直到满足表达式为止
siblings([expr]) 返回满足表达式的同辈元素
串联
add(expr|ele|html|obj[,con]) 并联关系。选择当前的元素和add条件中的元素，返回的是这些元素的集合
DOM增删改（元素节点）
增：
内后
append(): a.append(b):将b追加到a中的内后
appendTo() a.appendTo(b):将a追加到b中的内后
内前
prepend()
prependTo()
外后
after()
insertAfter()
外前
before()
insertBefore()
删
empty():掏空
remove():删除
改
replaceWith()
replaceAll()
DOM操作属性
attr("arg1"):取arg1属性值
attr("arg1","arg2"):赋arg1属性值，值为arg2.
a.removeAttr("src"):移除a中的src属性
prop():1.6+，attr解决不了的问题，使用prop();用法一致。
DOM操作文本
html():类似.innerHTML
html():取html值
html("<h2></h2>"):赋html值
text():类似.innerText
val():类似.value
DOM操作样式
css("arg1"):取arg1样式值
css("arg1","arg2"):赋arg1的样式值，值为arg2.
addClass():为元素添加类样式
removeClass():为元素移除类样式
jQuery中的事件
ready(fn) //加载后执行，这里的加载是在DOM树加载完成后就进行加载，在资源加载前进行
click(fn) //点击事件，fn是function（）{....}函数，点击事件的处理函数
live("事件名",fn)//事件委托，大致意思就是，把js动态写入的标签绑定上相应的事件
delegate("触发事件对象名（选择器）","事件名",fn)//这个跟上面的一样，但是1.11.3的jq将live抛弃了，但是还是可以使用的。这里delegate（）更加的方便
change():失去焦点且文本改变
blur()//失去焦点
mouseover()//光标移入
mouseout() //光标移出
PS：这两个里面都有ready(fn)都有，就是他 $(function(){});
chance（）事件：
<!DOCTYPE html>
<html>
<head>
<meta 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(){
//给文本框绑定change事件
//假设数据库只有一个用户，名为zhangsan
$("#username").change(function(){
//取值username
var uname = $(this).val();
if(uname == "zhangsan"){
// alert("用户名已存在，请重新输入");
$("#msg").html("用户名已存在，请重新输入!").css("color","#ff0000");
}else{
// alert("用户名可用！");
$("#msg").html("用户名可用!").css("color","#FFB6C1");
}
});
});
</script>
</head>
<body>
<form action="">
用户名：<input type="text" name="username" id="username">
<span id="msg"></span>
<br>
密码：<input type="password" name="pwd"><br>
<input type="submit">
</form>
</body>
</html>delegate()事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
/* $("#employeeTable a").click(function(){
$(this).parent().parent().remove();
return false;
}); */
/* $("#employeeTable a").live("click",function(){
$(this).parent().parent().remove();
return false;
}); */
//指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("#employeeTable").delegate("a","click",function(){
$(this).parent().parent().remove();
return false;
});
$("#addEmpButton").click(function(){
var empName=$("#empName").val();
var email=$("#email").val();
var salary=$("#salary").val();
var $tr=$("<tr>"+
"<td>"+empName+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='deleteEmp'>Delete</a></td>"+
"</tr>");
$("#employeeTable").append($tr);
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
事件冒泡问题：
意思就是在一个span标签在div标签中，他们两个都有点击事件，当点击span时会触发span的点击事件，同时也会触发div的点击事件，这就是事件的冒泡。
冒泡问题的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#content").click(function(){
alert("div");
});
$("span").click(function(){
alert("span");
//取消（事件冒泡的）默认行为
return false;
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
