本文介绍了jQuery的基本用法，包括如何引入jQuery、核心函数的使用，详细阐述了jQuery的选择器，如基本选择器、层级选择器、过滤器等，并讲解了DOM操作，如插入、删除、替换和事件绑定，强调了事件操作中的区别和特殊用法。
1、jQuery基本用法
常用的js框架
1、dojo面向对象的js框架
2、extjs学习成本比较高，它提供大量的丰富组件，它效果展示非常好
3、prototype早期比较流行的js框架
4、angularJS他是一个mvc js框架，它提供双向数据的绑定；
jQuery 它的插件机制特别丰富，在开发中可以选择非常多的相关插件，例如：表单验证的插件
步骤：
1、创建html文件导入 js文件 2、引入js的文件3、使用完成jQuery完成操作。
2、jQuery的核心函数
核心：把页面的标签转换为jQuery 对象，然后调用jQuery中的相关函数和属性进行操作标签
3、jQuery(callback) 他是(document).ready()的简写 （jQuery就是相当于 $）
jQuery(callback) == $(函数)
就是当页面加载后要执行的callback的函数
4、jQuery(html,[ownerDocument]) ===$ （html 代码的字符串格式）把html元素代码转换为jquery对象
第一个参数是html的参数 用于动态创建DOM元素的HTML标记字符串
第二个参数是可选的，他用于设置dom的相关属性。
3、jQuery([selector,[context]]) ===$(html选择器的字符串格式) 这个函数根据选择器表示是的元素标签jQuery对象
第一个参数：就是CSS选择器，jquery的选择器有9种。
第二个参数。就是context指定的dom元素集、文档或
4、关于jquery对象装换为dom对象
补充：1、获取页面标签对应的jQuery对象 ===>$(html\选择器的字符串格式)
2、使用jQuery 对象调用函数和属性完成功能。
jquery对象.get(0) 或者 jquery对象[0] 表达式：jquery对象.get(0).innerHTML
dom对象装换为jquery对象
$(dom对象) 表达式为：$(dom对象).html
2、jQuery的选择器（9类选择器）
1、基本选择器
根据ID：ID选择器 #d1
根据Element：元素选择器
根据类名：.class
根据通配符：或者 * 匹配所有的元素
Select1,selector2…将每一个选择器匹配到元素合并后一起返回
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//1. 得到id=d1的元素中的内容显示出
//alert($("#d1").html()); // 返回的结果是<h3>小明</h3>
//alert($("#d1").text()); // 返回的结果是小明
//2. 将class=d元素中的内容后面添加欢迎你
$(".d").each(function (i){ //遍历多个class中的内容
// this是dom对象，我们需要的是jqury的方法，所以就需要将它装换
$(this).html($(this).html()+"欢迎") // $(this).html()里面有参数就是给他赋值
});
//3. 得到id=d1这个div在整个页面上是第几个.
// 首先我们需要得到<div>的个数
alert($("div").index($("#d1"))); //返回的是2
//4. 得到class=d的元素有几个
alert($(".d").size()); //返回的是2
//5. 将所有的class=d或id=d1元素中的内容设
alert($("#d1,.d").html("java")); //前面三个 都设置成了java
});
</script>
</head>
<body>
<div class ="d">小红</div>
<div class= "d">小蓝</div>
<div id ="d1"><h3>小明</h3></div>
<div>黄河</div>
<div>金州勇士</div>
</body>
</html>
总结： a. html ()方法，无参数代表获取元素中的html代码，如果有参数代表设置元素的html信息
b. text()方法，无参数代表获取元素中的文本信息，如果有参数代表设置元素的文本信息
c. each()方法，它的使用可以帮助我们遍历元素，可以传递一个函数 each(function(n)),n就代表的是每一个 元素的序号，在函数中可以通过this来获取其dom对象 。
d. size()方法，获取相同元素的个数
e. index()方法，它可以判断元素的序号
2、层级选择器
根据元素的关系获取
1、空格 得到元素下的所有子元素(包含直接子元素与间接子元素)
2、大于号> 只获取直接的子元素
3、加号 + 只获取直接的一个兄弟元素
4、波浪线~ 所有的后边的兄弟元素
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 1. 获取id=d的所有<a>子元素个数
alert($("#d a").size());
// 2. 获取id=d 的直接<a>子元素个数
alert($("#d>a").size());
// 3. 获取id=d第一个<p>兄弟元素
alert($("#d+ p").html());
// 4. 获取id=d的所有<p>兄弟元素
alert($("#d~p").html());
// 5. 将id=d下的所有子元素<a>的文字颜色设置成红色
//css()方法，它可以设置元素的样式,如果只有一个值 css(name,value),如果有多个值,css({name:value,name:value})
$("#d a").css({"color":"red"});
})
</script>
</head>
<body>
<div id ="d">
<a>阿里巴巴</a>
<p>
<a>阿里妈妈</a>
</p>
</div>
<p>JAVA</p>
<p>WEB</p>
</body>
</html>
3、过滤器
过滤器它是在选择器与层次选择器获取得到一批元素后，在进行过滤操作，使用过滤选择器基本都是“：”开头，除了属性过滤选择器。
3.1基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 将第一行设置为红色
$("tr:first").css("color","red");
// 设置表格除了第一行以，其他的显示为蓝色
//$("tr:not(tr:first)").css("color","blue")
$("tr:gt(0)").css("color","green");
// 偶数行设置为红色，奇数行设置为黄色 odd 和even的索引都是从0开始的
$("tr:odd").css("color","yellow"); //查找表格的2、4、6行（即索引值1、3、5...）
$("tr:even").css("color","red"); // 查找表格的1、3、5...行（即索引值0、2、4...）
// 将头设置为灰色
$(":header").css("color","gray")
});
</script>
</head>
<body>
<h1>商品信息</h1>
<table border="1">
<tr><td>商品编号</td><td>商品名称</td><td>价格</td><td>数量</td></tr>
<tr><td>001</td><td>电视机</td><td>2190</td><td>100</td></tr>
<tr><td>002</td><td>洗衣机</td><td>3190</td><td>100</td></tr>
<tr><td>003</td><td>冰箱</td><td>4500</td><td>100</td></tr>
<tr><td>004</td><td>空调</td><td>5190</td><td>100</td></tr>
</table>
</body>
</html>
3.2内容过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.divColor {
color: yellow;
};
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// 设置含有文本内容深圳的DIV字体颜色为红色
$("div:contains('深圳')").css("color", "red");
// 设置没有子元素的div内容为"这是一个空的DIV"
$("div:empty").html("这是一个空的DIV");
// 包含<a>元素的div字体颜色为黄色；
$("div:has(a)").addClass("divColor"); //divColor是css中的修饰标签
// 设置所有含有子元素的span字体为蓝色 字体变大
$("span:parent").css({"color" : "green","font-size" : "100px"});
});
</script>
</head>
<body>
<div>篮球</div>
<div>排球</div>
<div></div>
<div><a>深圳</a>欢迎你</div>
<div>世界第一语言<a>JAVA</a></div>
<div><span>今天天气真的很好</span></div>
</body>
</html>
3.3可见过滤选择器
主要的（：hidden 和 ：visible）
可见性过滤选择器它匹配display:none或表单中input hidden这样的元素.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 1.获取表单中隐藏的值
var value =$("input:hidden").val(); //第一种方式
alert(value);
alert($("form :hidden").val()); // 和层级选择器一起使用
// 2.设置table中所有可见tr背景色为蓝色
$("tr:visible").css("color","blue");
// 3.获取table中所有隐藏tr文本的值，并将隐藏tr显示出来，原来显示的tr隐藏起来
var val =$("tr:hidden").text(); // 获取值
alert(val);
//$("tr:hidden").show(); // 显示出来
$("tr:visible").hide();
});
val() // 获取元素当前的值
show() // 让元素显示出来
hide() // 让元素隐藏起来
</script>
</head>
<body>
<form>
<input type="text" name="email"/><br>
<input type="hidden" name="id" value="10"/>
</form>
<table>
<tr style="display:none">
<td>value1</td></tr>
<tr><td>value2</td></tr>
<tr><td>value3</td></tr>
</table>
</body>
</html>
3.4属性过滤选择器
根据元素的属性来过滤
^=匹配开始 $=匹配结尾 *=匹配包含
attr() 方法设置或返回被选元素的属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 设置所有含有id属性的div，字体颜色红色
$("div[id]").css("color","red");
// 获取name=username的value的值
alert($("[name='username']").val());
// 设置所有的多选框被选中
$("input[type='checkbox']").attr("checked",true);
// 设置class中包含itcast的多选框被选中
$("input[type='checkbox'][class*='itcast1']").attr("checked",true)
// 获取class=itcast2的多选框的name属性的值
alert($("input[class='itcast2']").val()); // 只返回 牛奶
alert($("input[class='itcast2']").attr("name"));
alert($("input[type='checkbox'][class='itcast2']").attr("name")); //两个返回来的都是food
// 获取name中的每个信息
// var names=$("input[class='itcast2']").attr("name");
// $.each(names,function(){
// alert($(this)text("));
// });
});
</script>
</head>
<body>
<div id="d">这是一个DIV</div>
<form>
<input type="text" name="username" value="tom"/><br/>
<input type="checkbox" class="itcast1" name="food" value="米饭"/>米饭
<input type="checkbox" class="itcast2" name="food" value="牛奶"/>牛奶
<input type="checkbox" class="itcast3" name="food" value="羊肉"/>羊肉
<hr>
<input type="checkbox" class="itcast1" name="hobby" value="篮球"/>篮球
<input type="checkbox" class="itcast2" name="hobby" value="足球"/>足球
<input type="checkbox" class="itcast3" name="hobby" value="排球"/>排球
</form>
<span id="s">这是一个SPAN</span>
</body>
</html>
3.5子元素对象过滤选择器
nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置 。也可以根据也可以通过倍数来设置
first-child 获取第一个
last-child 获取最后一个
only-child 获取只有一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 子元素过滤器
//nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置
// 设置列表中的第二个li字号为30
$("ul li:nth-child(2)").css("font-size",30);
// 设置列表中第一行字体为红色
$("ul li:first-child").css("color","red");
// 设置列表中最后一行字体为蓝色
$("ul li:last-child").css("color","blue");
// 获取ul下只有一个li的信息
alert($("ul li:only-child").html());
});
</script>
</head>
<body>
<ul><li>JAVA</li><li>IOS</li><li>PHP</li><li>MYSQL</li><li>C++</li></ul>
<ul><li>张曼玉</li><li>王祖贤</li><li>林青霞</li></ul>
<ul><li>NodeJs</li></ul>
</body>
</html>
3.6表单过滤选择器
用于选取表单中的元素
// 这里使用了表单提交的属性。使用了失焦事件 .blur(function(){})
点击事件 .click(function(){})
提交事件 .submit()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
// 当usernam与password失去焦点后，判断录入的数据不能为空
$(":text,:password").blur(function(){
var value =$(this).val();
if(value.trim()==""){
alert($(this).attr("name")+"不可以为空");
}
});
// 对button添加点击事件，提交表单
$(":button").click(function(){
$("form").submit();
});
});
</script>
</head>
<body>
<form>
username:<input type="text" name="username"/><br/>
password:<input type="password" name="password"/><br/>
<input type="button" value="提交"/>
</form>
</body>
</html>
3.7表单过滤对象选择器
// 1、checked它是用于radio,checkbox 判断选中
2、selected它是用于select下拉框选中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
// 点击按钮提交 radio checkbox select中的选中的
$(":button").click(function(){
// 1、获取选中的性别
alert($(":radio:checked").val());
// 2 获取多选框
$(":checkbox:checked").each(function(){
alert($(this).val());
});
// 3.得到下拉框中选中
alert($("select option:selected").val());
});
});
</script>
</head>
<body>
<form>
性别：<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<hr>
<input type="checkbox" name="hobby" class="itcast1" value="baseketball"/>篮球
<input type="checkbox" name="hobby" class="itcast2" value="football"/>足球
<input type="checkbox" name="hobby" class="itcast3" value="volliball"/>网球
<input type="checkbox" name="hobby" class="itcast4" value="swimming"/>游泳
<hr>
城市
<select>
<option value ="">--请选择城市--</option>
<option value ="shanghai">上海</option>
<option value ="beijing">北京</option>
<option value ="shenzhen">深圳</option>
</select>
<br>
<input type="button" value ="提交"/>
</form>
</body>
</html>
4、我们在开发中，使用比较多的选择器有:
1.基本选择器 class id element
2.层次选择器 父子关系 兄弟关系
3.过滤选择器 属性过滤 基本过滤 内容过滤
3、jQuery的DOM操作
1、文档处理
1、插入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 插入操作
$(function(){
// 内部插入 演示了内部插入的四个方法
// 在select中开始添加一项<option value="学前班">学前班</option>
// $("#edu").prepend($("<option value='学前班'>学前班</option>"));
// $("<option value='学前班'>学前班</option>").prependTo($("#edu"));
// 在select中的最后插入一项<option value="研究生">研究生</option>
// $("#edu").append($("<option value='研究生'>研究生</option>"));
// $("<option value='研究生'>研究生</option>").appendTo($("#edu"));
// 外部插入 演示了外部插入的四个方法
// 在第一个option的前面插入<option value="学前班">学前班</option>
$("#edu option:first").before($("<option value='学前班'>学前班</option>"));
$("<option value='学前班'>学前班</option>").insertBefore($("#edu option:first"))
// 在最后一个option后面插入<option value="研究生">研究生</option>
$("#edu option:last").after($("<option value='研究生'>研究生</option>"));
$("<option value='研究生'>研究生</option>").insertAfter($("#edu option:last"));
});
</script>
</head>
<body>
<select id="edu">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
</select>
</body>
</html>
2、删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 演示删除中的方法
$(function(){
// empty()把所有段落的子元素（包括文本节点）删除
//$("#d1").empty();
// remove()从DOM中删除所有匹配的元素。
//$("#d1 p").remove();
// detach()从DOM中删除所有匹配的元素。
$("#d2").detach();
//这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
// 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
})
</script>
</head>
<body>
<div id="d1"><p>11111</p><span>ssdad</span></div>
<div id="d2">mmmmm</div>
</body>
</html>
重点：detach与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3、替换与克隆
结论：1、clone的第一个参数为true，代表他的事件也会被克隆，如果为false不会被克隆
2、clone 第二个参数为true 代表子元素的事件也被克隆。为false，代表子元素的事件不会被克隆（注意：父类元素的事件需要为true）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 克隆操作 clone[Even[,deepEven]] 将id=d1 的第一个p的内容取代
$("#d1 p:first").click(function(){alert("9999999")});
$("a").mouseover(function(){alert("66666")});
var cp =$("#d1 p:first").clone(true,false);
// 替换操作 replaceAll 和replaceWith
$("#d2 span:last").replaceWith(cp)
//cp.replaceAll($("#d2 span:last"));
//$("<p>取代</p>").replaceAll($("#d2 span:first"));
});
</script>
</head>
<body>
<div id ="d1"><p><a>p1</a></p><p>p2</p></div>
<div id ="d2"><span>span1</span><span>span2</span></div>
</body>
</html>
综合练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 给按键添加点击事件
$(":button").click(function(){
// 添加一个tr
var tr =$("<tr></tr>");
// 创建四个td 向里面添加内容
var td1= $("<td></td>");
td1.append($(username).val());
var td2= $("<td></td>");
td2.append($(phone).val());
var td3= $("<td></td>");
td3.append($(password).val());
var td4= $("<td></td>");
var a=$("<a href='#'>删除</a>")
td4.append(a);
// 在删除栏创建一个点击事件，点击创建就删除本行
a.click(function(){
// parents取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$(this).parents("tr").remove();
});
// 将td添加到tr中
tr.append(td1).append(td2).append(td3).append(td4);
// 将行添加到列表中
$("table").append(tr);
});
});
</script>
</head>
<body>
<div align ="center">
<table id="tab" border="1">
<tr><td>姓名</td><td>电话</td><td>密码</td><td>删除</td></tr>
</table>
<hr><!-- 分隔线 -->
姓名：<input type="text" id="username"/>
电话：<input type="text" id="phone"/>
密码：<input type="test" id="password"/>
<input type="button" value="添加"/>
</div>
</body>
</html>
2、筛选
1、过滤
过滤操作它相当于是我们在jquery中使用的过滤选择器。
例如 eq可以根据序号来获取元素 first与last来获取第一个元素与最后一个元素。
2、查找
是通过当前元素，获取祖先元素，父元素子元素等。
find（）方法，它可以直接来查找指定的元素
4、jQuery的事件操作
1、Java和jQuery事件的区别：
JAVA中的事件只能绑定一个函数，jquery中一个事件可以绑定多个事件。
2、绑定事件
直接调用事件函数
按钮：<input type="button" value = "按钮" id="btn" />
----------------------------------------------------------
// 直接调用事件的
windown.onload=function(){
document.getElementById("btn").onclick=function(){
}
}
bind用于绑定事件和unbind解除绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// jquery提供了一种简化操作
// $("#btn").click(function(){
// alert("hello");
// });
//bind 用于绑定事件
$("#btn").bind("click",function(){
alert("hello,bind");
});
// unbind用于解除事件
$("#btn").unbind("click");
});
</script>
</head>
<body>
按钮：<input type="button" value = "按钮" id="btn" />
</body>
</html>
live进行绑定事件 和die解除绑定操作
// 使用live进行绑定事件
$("#btn").live("click",function(){
alert("hello,world");
});
// 使用die解除live 的绑定事件
$("#btn").die("click");
live与bind的区别：bind只能为存在的元素进行事件的绑定，而live它可以为没有存在，后续通过代码新添加的元素绑定事件。
3、一次性事件和自动触发
一次性事件 one（） 作用： 在表单提交的时候使用一次性函数防止表单重复提交
$(function(){
// one() 一次性事件 只会执行一次
$("#btn").one("click",function(){
alert("hello,one");
});
});
事件触发trigger()
// trigger()事件触发事件
$("#btn").click(function(){
alert("hello,word");
});
// 当我们鼠标悬停在按键上就触发点击事件
$("#btn").bind("mouseover",function(){
$(this).trigger("click"); //trigger（）事件触发
});
4、事件切换
hover(): 这个操作它可以绑定两个函数，当触发mouseover时第一函数执行，当触发mouseout时触发第一个函数
// hover（） 用于鼠标的移入和移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 使用hover函数 当触发第一个函数时显示div的内容 当触发第二个函数时隐藏
$("#d").hover(function(){
// 鼠标移入就隐藏文字
$("#d").hide();
},function(){
// 鼠标移除就显示文字
$("#d").show();
})
});
</script>
</head>
<body>
<div id="d">
成年人的生活中，就没有容易两个字！
</div>
</body>
</html>
toggle() 切换(点击第一下就执行一个函数)
// 用于点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// toggle 用于鼠标的点击事件
$("#btn").toggle(function(){
alert("点击了第一下");
},function(){
alert("点击了第二下");
},function(){
alert("点击了第三下");
});
});
</script>
</head>
<body>
按钮：<input type="button" value = "按钮" id="btn" />
</body>
</html>
扫一扫
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
