1.jQery简介
- jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John
Resig发布。jQuery设计的宗旨是“write Less，Do
More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 - jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2.jQuery的核心函数
$ = = jQuery, $()= =jQuery()
作用
核心函数中加入函数：function()时，类似window.onload的作用
核心函数中加入选择器字符串，根据这个字符串查找元素节点对象
核心函数中加入HTML字符串，根据这个字符串创建元素节点对象。
核心函数中加入DOM对象，作用为：将DOM对象转换为jQuery对象
$(function(){
//1
var $li = $("<li>深圳</li>");//3
$("ul").append($li);//2
var bj = document.getElementById("bj");
var $bj = $(bj);//4
alert(bj);
});
3.DOM对象与jQuery对象的转换问题
DOM->jQuery
$(DOM对象)
JQuery函数：
text()、html()、val()、attr();
通常不带参数或一个参数时表示获得相应的元素
两个参数是表示设置相应的参数。
如：
//表示设置相应的元素为选中状态
$(":checkbox").val(["check2","check4"]);
//表示设置相应的属性为false
$(":checkbox").attr("checked",false);
jQuery->DOM
1、$ div[0]
2、$ div.get(0)
<script type="text/javascript">
$(function(){
//分别使用DOM对象和jQuery对象获取div中的文本
/*
* jQuery操作文本
text() innerText
html() innerHTML
val() value
* DOM->jQuery:$(dom对象)
* jQuery->DOM:将jQuery看作为数组|集合
* $div[0] | $div.get(0)
*/
//使用DOM对象调用DOM方法
$("#dom2dom").click(function(){
var div = document.getElementById("testDiv");
alert(div.innerText);
});
//使用jQuery对象调用jQuery方法
$("#jQuery2jQuery").click(function(){
var $div = $("#testDiv");
alert($div.text());
});
//使用DOM对象调用jQuery方法
$("#dom2jQuery").click(function(){
var div = document.getElementById("testDiv");
var $div = $(div);
alert($div.text());
});
//使用jQuery对象调用DOM方法
$("#jQuery2dom").click(function(){
var $div = $("#testDiv");
// alert($div[0].innerText);
alert($div.get(0).innerText);
});
});
</script>
4.选择器
style属性设置为none表示隐藏该元素。
style="display:none;
基本选择器
标签选择器：$ (“p”)
类选择器:$ (“.class名”)
ID选择器$ (“#id名”)
全局选择器：$ (“*”)
并集选择器：$ (“#id名,.class名，p”)
$(function(){
//1.选择 id 为 one 的元素
$("#btn1").click(function(){
$("#one").css("background-color","#bbffaa")
})
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css("background-color","#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function(){
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
层次选择器
后代选择器：$ (“E F”)
子代选择器：$ (“E>F”)
相邻选择器：$ (“E+F”)
同辈选择器：$ (“E~F”)
<script type="text/javascript">
$(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
过滤选择器
基本过滤选择器
$(“:first”)
$(“:last”)
$(“:eq()”)
$(“:gt()”)
$(“:lt()”)
$(“:not()”)：去除所有与给定选择器匹配的元素
$(“:odd”)
$(“:even”)
$(“:header”)
$(“:animated”)
$(“:focus”)
$(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择class不为 one 的所有 div 元素
$("#btn2").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//3.选择索引值为等于 3 的 div 元素
$("#btn3").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//4.选择当前正在执行动画的所有元素
$("#btn4").click(function(){
$("div:animated").css("background", "#bbffaa");
});
内容过滤选择器
$(“:parent”)：查找所有含有子元素或者文本的元素
$(“:empty”)：匹配所有不包含子元素或者文本的空元素
//5.选择含有子元素的div元素
$("#btn5").click(function(){
$("div:parent").css("background", "#bbffaa");
});
可见性过滤选择器
$(“:hidden”)：查找隐藏的元素
$(“:visible”)：查找所有可见的元素
注意：show(“normal”)用于将style属性从none变成normal
//6.选择所有不可见的 div 元素
$("#btn6").click(function(){
$("div:hidden").show("normal").css("background", "#bbffaa");
});
属性过滤选择器
$ (“[属性名]”)
$ (“[属性名!^$*=属性值][属性2]”)
//7.选取 属性title值等于'test'的div元素
$("#btn7").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
子元素过滤选择器
$(“：first-child”):匹配第一个子元素
‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
//8.选取每个class为one的div父元素下的第一个子元素
$("#btn8").click(function(){
$("div.one>:first-child").css("background","#bbffaa");
});
});
表单过滤选择器
$(“:input”)：匹配所有 input, textarea, select 和 button 元素
$(“:text|password|radio|checkbox|reset|submit|button|file|hidden”)：匹配type为对应类型的元素
表单对象属性过滤选择器
$(“:enabled”)：匹配所有可用元素
$(“:disabled”)：匹配所有不可用元素（属性disabled=“disabled”）
$(“:checked”)：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
$(“:selected”)：匹配所有选中的option元素
<script type="text/javascript">
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
$("input:enabled").val("New Value");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$("input:disabled").val("New Value Too");
});
//3.获取多选框选中的个数
$("#btn3").click(function(){
var $cc = $(":checkbox:checked");
alert($cc.length);
});
//4.获取多选框选中的内容
$("#btn4").click(function(){
var $cc = $(":checkbox:checked");
//使用$.each()迭代数组
$cc.each(function(){
alert($(this).val());
// alert(this.value);
});
// for(var i=0;i<$cc.length;i++){
// alert($cc[i].value);
// }
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
var $ss = $("select option:selected");
$ss.each(function(){
//DOM对象：this jQuery对象：$(this)
alert(this.value);
});
});
})
</script>
DOM操作：
DOM查询：
DOM查询可以将其中的元素节点抽象出来，然后调用不同的方法进行查询；这是DOM查询相较于选择器查询的优点。
eq()：获取第N个元素
first()：选择第一个元素
last()：选择最后一个元素
filter()：筛选出与指定表达式匹配的元素集合。（这个方法用于缩小匹配的范围。用逗号分隔多个表达式）
has()：保留包含特定后代的元素，去掉那些不含有指定后代的元素。
children()：获得匹配的元素集合中每一个元素的所有子元素的元素集合。（获得所有子元素）
find()：获得匹配的元素集合中每一个元素的所有后代元素的元素集合。（获得所有后代元素）
next()：获得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。（获得相邻的同辈元素）
parent()：获得匹配的元素集合中唯一父元素的元素集合（获得父类）
parents()：获得匹配的元素集合中祖先元素的元素集合（获得祖先元素）
add()：用于连接分别与两个表达式匹配的元素结果集。
重点记忆：
children()
find()
has()
filter()
next()
parent()
parents()
var $div = $("div");
var $body = $("body");
//(1)eq()选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$div.eq(3).css("background-color","#fba");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
$div.first().css("background-color","#fba");
});
//(3)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
$div.filter(":even").css("background-color","#fba");
});
//(4)has()选择div中包含.mini的
$("#btn6").click(function(){
$div.has(".mini").css("background-color","#fba");
});
//(5)children()在body中选择所有class为one的div子元素:$("body>div.one")
$("#btn8").click(function(){
$body.children("div.one").css("background-color","#fba");
});
//(6)find()在body中选择所有class为mini的div后代元素
$("#btn9").click(function(){
$body.find("div.mini").css("background-color","#fba");
});
//(7)next() #one的下一个div
$("#btn10").click(function(){
$("#one").next("div").css("background-color","#fba");
});
//(8)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#fba");
});
//(9)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
$("span").add("#two").css("background-color","#fba");
});
DOM操作，增删改
增
内后
append()
appendTo()
内前
prepend()
prependTo()
外后
after()
外前
before()
删
empty():掏空（所有的子节点）
remove():删除（从DOM中删除所有匹配的元素，连结构一起删除）
改
replaceWith()
$(function(){
var $li = $("<li>广州</li>");
$("#btn01").click(function(){
//在#city中添加广州节点 [append()]
$("#city").prepend($li);
//$li.appendTo($("#city"));
//$("#city").append($li);
});
$("#btn02").click(function(){
//创建一个"广州"节点,添加到#city下[appendTo()]
});
$("#btn03").click(function(){
//在#city中添加广州节点[prepend()]
$("city").prepend($li);
});
$("#btn04").click(function(){
//创建一个"广州"节点,添加到#city下[prependTo()]
});
$("#btn05").click(function(){
//在#bj前面插入"广州"节点[before()]
$("#bj").before($li);
});
$("#btn06").click(function(){
//将"广州"节点插入到#bj前面[insertBefore()]
$li.insertBefore($("#bj"));
});
$("#btn07").click(function(){
//在#bj后面插入"广州"节点[after()]
$("#bj").after($li);
});
$("#btn08").click(function(){
//将"广州"节点插入到#bj后面[insertAfter()]
});
$("#btn09").click(function(){
//使用"广州"节点替换#bj节点[replaceWith()]
$("#bj").replaceWith($li);
});
$("#btn10").click(function(){
//使用"广州"节点替换#bj节点[replaceAll()]
$li.replaceAll($("#bj"));
});
$("#btn11").click(function(){
//删除#rl节点[remove()]
$("#rl").remove();
});
$("#btn12").click(function(){
//掏空#rl节点[empty()]
$("#rl").empty();
});
$("#btn13").click(function(){
//读取#city内的HTML代码
var htmlText = $("#city").html();
alert(htmlText);
});
$("#btn14").click(function(){
//设置#bj内的HTML代码
$("#bj").html("abcde");
/*
innerHTML html() <div>dsf</div><p>sdf</p>
innerText text()
value val() <input value="" />
*/
});
});
事件
取消默认事件：在使用的方法中 return false；
默认事件：比如超链接自动跳转页面。点击事件的继承等。（后面有说）
文档加载
window.onload与$(function(){})区别
1、前者当前文档完全加载后执行，后者是当前文档绘制成功后执行。（JQuery中函数先执行，onload后的函数后执行）
2、前者只能书写一次，后者可以书写多次。
3、前者语法只有一种，后者有两种语法。
4、$(function(){}):当前文档绘制成功后执行。
window.onload:当前文档完全加载后执行。
window.onload = function(){
alert("onload1");
}
window.onload = function(){
alert("onload2");
}
$(function(){
alert("jquery1");
});
$(function(){
alert("jquery2");
});
$(document),ready(function(){
alert("完整的语法");
})
事件冒泡
可以理解为事件具有继承性；（如下：点击span的同时也点击了div。这是一种默认行为）
取消默认行为使用：在当前的方法中 return false;
$(function(){
/*
* change事件：当元素失去焦点且文本改变时触发。
*/
$("#content").click(function(){
alert("div");
});
$("span").click(function(){
alert("span");
//取消默认行为
return false;
});
});
$(function(){
/*
* change事件：当元素失去焦点且文本改变时触发。
*/
$("#content").click(function(){
alert("div");
});
$("span").click(function(){
alert("span");
//取消默认行为
return false;
});
});
change事件：当元素失去焦点且文本改变时触发。
< span>< /span>此标签的作用是画出一块区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form空白</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//输入用户名后，验证用户名是否存在(zhangsan)
$("#username").change(function(){
var uname = $(this).val();
if("zhangsan" == uname){
//用户名已存在，请重新输入
// alert("用户名已存在，请重新输入");
$("#unameMsg").text("用户名已存在，请重新输入").css("color","red");
}else{
//用户名可用
// alert("用户名可用");
$("#unameMsg").text("用户名可用").css("color","green");
}
});
});
</script>
</head>
<body>
<h1>注册</h1>
<form action="regist_success.html">
用户名:<input type="text" name="username" id="username">
<span id="unameMsg"></span>
<br>
密 码:<input type="password" name="pwd"><br>
<input type="reset">
<input type="submit" value="注册">
</form>
<a href="../index.html">回首页</a>
</body>
</html>
事件委派
live(type,fn)：Query 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
delegate(selector,[type],[data],fn)：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。（selector选择器，type事件类型，data传递到函数的额外数据，fn函数）
行为
$(function(){
//实现删除功能
方法二：
$("#employeeTable").delegate("a","click",function(){
$(this).parents("tr").remove();
// $(this).parent().parent().remove();
//取消默认行为
return false;
});
方法一：
如果不使用live进行事件委派，则后来添加的元素无法进行相应的操作。
//$("a").live("click",function(){
//$(this).parents("tr").remove();
// //$(this).parent().parent().remove();
//取消默认行为
// return false;
// });
//实现添加员工信息
$("#addEmpButton").click(function(){
//取值
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//将值拼接到$tr
var $tr = $("<tr>"
+ "<td>"+name+"</td>"
+ "<td>"+email+"</td>"
+ "<td>"+salary+"</td>"
+ "<td><a href='deleteEmp?id=001'>Delete</a></td>"
+ "</tr>");
//为a标签绑定click事件
//将$tr追加到table的内后
$("#employeeTable").append($tr);
});
});
结构
<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>