JQuery学习
一、JQuery 介绍：
什么是JQuery ?
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
JQuery核心思想！！！
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
JQuery流行程度
jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
JQuery好处！！！
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
二、Jquery 核心函数 $()
$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时：$(function(){})
它的功能就是window.onload也就是页面加载完成之后。
$( function(){
在这个函数体内实现你要写的功能。
} );
2、传入参数为 [ HTML 字符串 ] 时： $("<span>12</span>");
$( “<span>12123</span>” );
相当于原生的js中的以下代码
var spanObj = document.createElement(“span”); //创建一个标签对象 <span></span>
spanObj.innerHTML = “12123”; //<span>12123</span>
3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)
4、传入参数为 [ DOM对象 ] 时： $(dom)
注意获取数据和获取对象的定义区别：
获取的是数值所以不用$
var name = $("#empName").val();
注意对比： $ var name = $("#empName");
三、 jQuery选择器
基本选择器（****重点）
#ID 选择器：根据id查找标签对象
.class 选择器：根据class查找标签对象
element 选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回
层级选择器（****重点）
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
过滤选择器（具体看手册）
过滤选择器一般前面会带冒号“：”
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
。。。。。。
四、JQuery 元素筛选
eq() 获取指定索引的元素 功能相当于:eq()
first() 获取第一个元素 功能相当于:first
last() 获取最后一个元素 功能相当于:last
filter(exp) 留下匹配给定exp选择器的元素
is() 判断jquery对象中是否匹配给定的表达式，其中只要有一个匹配，就返回true
has(exp) 保留后面中有匹配给定exp选择器的元素的元素 功能跟:has();相同
not(exp) 去掉，或者删除掉那些匹配exp选择器的元素。 功能跟:not()相同
children(exp) 从子元素中匹配给定的exp子元素 parent>child
find() 查找后代元素 ancestor descendant后代选择器
next() 查找当前元素的下一个兄弟元素
nextAll() 查找当前元素后面的所有兄弟元素
nextUntil(selector) 查找当前元素后面的所有兄弟元素，到给定的selector选择器为止
parent() 返回jquery对象的父元素
prev(exp) 查找当前元素的前面一个紧连的兄弟元素
prevAll() 查找当前元素的前面所有兄弟元素
prevUnit(exp) 查找当前元素前面的所有兄弟元素。直到匹配exp选择器为止
siblings(exp) 查找当前元素所有兄弟元素
add() 把后面选择器匹配到的结果添加到jquery对象中
五、JQUery 的属性操作（****重点）
html() 功能相当于innerHTML可以设置获取起始标签和结束标签中的内容 (包含标签)
text() 功能相当于innerText ，可能获取起始标签和结束标签中的文本
val() val方法主要是操作form表单中的标签项的value属性。
$(function() { $("a.deleteItemClass").click(function() { var name = $(this).parent().parent().find("td:first").html(); return confirm("你确认要删除商品【"+ name+"】吗？"); }); });
var name = $(this).parent().parent().find("td:first").html();
获取a标签class为deleteItemClass的标签后，向上查找两个父节点【parent（）JQuery 元素筛选】【find() 查找后代元素 】，
find("td:first")---：first为过滤器，获取td标签的第一个元素，
html()----获取该标签间的内容
attr() attr可以获取属性值，也可以设置属性值。
prop() prop同样可以获取属性值，和设置属性值。prop推荐操作那些值。true和false的属性
attr可以操作所有的属性。但是像那些checked。selected，disabled这些属性推荐使用porp设置和获取因为prop得到的结果会更佳的友好。
attr可以给标签添加一些非标准的属性。就可以在html页面端保存一些临时的数据。
var id = $("input").attr("data");
HTML表格学习
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table> 标签定义 HTML 表格。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
动态添加、删除表格记录
<!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> <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() { //1.添加记录 //第一步，先给submit按钮绑定单击事件 $("#addEmpButton").click(function() { //第二步获取三个文本框name、email、salary的输入信息 var name = $("#empName").val(); var email = $("#email").val(); var salary = $("#salary").val(); //第三步，创建一个tr标签对象，然后把name和email和。salary添加到td里 var $trObj = $("<tr><td>" +name+"</td><td>" +email+"</td><td>" +salary+"</td><td><a href='deleteEmp?id=001'>Delete</a></td></tr>"); //第四步，把创建好的tr标签对象，追加到table中 $("#employeeTable").append($trObj); //2、删除记录 //1.从新创建的tr标签中，查找出a标签。给它绑定单击事件 $trObj.find("a").click( aDeleteFun ); }); //2.做删除的操作 var aDeleteFun = function(){ //3.通过点击的a标签找到所在行 var $trObj = $(this).parent().parent(); //当我们需要删除数据之前，我们应该给用户一些友好的提示 // confirm这是js中的确认框 // 这个函数接收的参数是提示框提示的文本内容 // 当用户点击确定就返回true,当用户点击取消，就返回false // 从tr标签对象中，获取第一个td标签对象，然后从中获取到删除行的name的值 var name1 = $trObj.find("td").first().html(); var result = confirm("你确定删除"+name1+"一行吗"); if (result) { //4.调用remove(); $trObj.remove(); } //如何取消a标签的跳转 //在单击事件中，直接return false.可以阻止元素的默认行为 return false; }; $("a").click( aDeleteFun ); }); </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>
parent() find(）
调用函数，必须定义在前，调用在后。
$("a").click( aDeleteFun );
//2.做删除的操作
var aDeleteFun = function(){
//3.通过点击的a标签找到所在行
var $trObj = $(this).parent().parent();
//当我们需要删除数据之前，我们应该给用户一些友好的提示
// confirm这是js中的确认框
// 这个函数接收的参数是提示框提示的文本内容
// 当用户点击确定就返回true,当用户点击取消，就返回false
// 从tr标签对象中，获取第一个td标签对象，然后从中获取到删除行的name的值
var name1 = $trObj.find("td").first().html();
alert(name1);
var result = confirm("你确定删除一行吗");
if (result) {
//4.调用remove();
$trObj.remove();
}
//如何取消a标签的跳转
//在单击事件中，直接return false.可以阻止元素的默认行为
return false;
};
$("a").click( aDeleteFun );
