1.JQuery与JavaScript有什么联系?jQuery技术有什么特点?
联系：
jQuery，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
特点：
1.JQuery是一个轻量级的Javascript框架。
2.兼容当前主流的浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+
3.丰富的DOM选择器。
4.事件、样式、动画支持。
5.Ajax操作支持。
6.可扩展性强，有丰富的插件，如EasyUI等。
2.【上机】查看jQuery的源码文件，根据课堂讲解知识，使用函数匿名自调用及闭
包原理实现同名函数的调用，分别打印出“我是匿名函数”，“我是自定义函数”
两句话
答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//匿名函数自调用
(function(window,undifined){
alert("我是匿名函数");
var bjsxt="sxt";
window.bjsxt=bjsxt;
})(window);//此处“()”为执行符,window为实参
</script>
<script type="text/javascript">
function test(){
alert(bjsxt);//测试是否能获取匿名函数中的变量值
alert(window.bjsxt);
}
function testBb() {
var aaa = 3000;//testBb的局部变量
function testBb() {//函数中声明函数
alert("我是自定义函数");
alert(aaa);//调用外部变量
var bbb =10000;//当前testBb的局部变量
return bbb;//将值返回给调用者，继续保持值能被有效使用
}
//调用函数得到返回值，让原本已经销毁的testBb局部变量值得到继续使用
var ccc = testBb();
alert(ccc);
}
</script>
</head>
<body>
<input type="button" value="测试匿名函数自调用" onclick="test();" />
<input type="button" value="测试闭包" onclick="testBb();" />
</body>
</html>
3.【上机】使用jQuery技术在div中显示“this is my first jQuery”
jQuery中的美元符有什么作用？（让浏览器知道这是jQuery代码）
$其实就是Jquery的一个别名，$==jQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
//方式一
//$("div").html("this is my first jquery");
//方式二
$("div").text("this is my first jquery");
});
</script>
</head>
<body>
<div >
</div>
</body>
</html>
4.jQuery中的元素选择器有哪些？
ID选择器
类选择器
元素选择器
组合选择器
子选择器
层次选择器
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function testSelector(){
//ID选择器
//alert($("#uname").val());
//类选择器
//alert($(".girl").val());
//元素选择器
//alert( $("input").length);
//组合选择器 --》id class elment进行组合
//alert($("#uname,.girl,input").length);
//子选择器 “>:直接父元素 子元素”
//alert($("form>input").val());
//层次选择器 "中间用空格隔开"
//alert($("form input").length);
//属性选择器
alert($("div[name='div1']").text());
}
</script>
</head>
<body>
<h1>Jquery常用选择器</h1>
<input type="button" value="jq常用的选择器" onclick="testSelector();"/>
<hr />
<input type="text" id="uname" name="uname" value="momo" />
<input type="password" class="girl" id="pwd" name="pwd" value="lulu" />
<hr />
<form>
<label>Name:</label>
<input name="name" type="text" value="tantan" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<div name="div1">1111111</div>
<div name="div2">2222222</div>
</body>
</html>
5.文字说明下面代码是否正确？如果错误，指出错误并写出正确的代码
<html>
<head>
<script type=”text/javascript”>
function test(){
alert($(“#inp”).value)
}
test();
</script>
</head>
<body>
<input type=’text’ name=’inp’ id=’inp’ value=’zhangsan’>
<body>
</html>
答案
错误1：此处没有导入JQuery库，不能用JQuery技术。
错误2：JQuery对象不能用JS对象的属性value，得改用val()。
错误3：页面加载是按从上到下的顺序加载的，想要让页面在加载的时候就能得到input元素的value值，得将script代码块挪到input元素之后。
错误4：单引号不能是中文的，得改为英文，默认值value的地方多了一个“=”号。
<html>
<head>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" ></script>
</head>
<body>
<input type='text' name='inp' id='inp' value='zhangsan'>
<body>
<script type="text/Javascript">
function test(){
alert($("#inp").val());
}
test();
</script>
</html>
6.使用jQuery操作元素的属性attr()方法和val()有什么区别?
attr()：
1.获取值用attr(name)，取得第一个匹配元素的name属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined。对于文本框来说，只能获取默认的value值，无法获取到value改变后的值
2.设置值用attr(key,name),为所有匹配的元素设置一个属性值。
val():
3.用val()获得第一个匹配元素的当前值，多用来获取表单中元素的值且能获取到改变后value值，例如input， select 或者textarea。
4.多用val(“值”)来设置文本框的value值。
7.【上机】使用jQuery技术补全下面代码
<html>
<head>
<script type=”text/javascript”>
function test(){
//打印出input的所有属性值
//修改input的value值为lisi
}
function test2(){
//在页面上修改输入框的值，并打印
}
</script>
</head>
<body>
<input type=’botton’ value=’测试test’ onclick=””>
<input type=’botton’ value=’ 测试test1’ onclick=””>
<div>
<input type=’text’ name=’inp’ value=’zhangsan’>
</div>
<body>
</html>
答案：
<html>
<head>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/Javascript">
function test(){
//打印出input的所有属性值
alert($("input[type=text]").attr("type")+"--"+$("input[type=text]").attr("name")+"--"+$("input[type=text]").val());
//修改input的value值为lisi
$("input[type=text]").val("lisi");
}
function test2(){
//在页面上修改输入框的值，并打印
alert($("input[type=text]").val());
}
</script>
</head>
<body>
<input type='button' value='测试test' onclick="test();">
<input type='button' value='测试test1' onclick="test2();">
<div>
<input type='text' name='inp' value='zhangsan'>
</div>
<body>
</html>
8.【上机】使用jQuery代码演示如何操作HTML元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function operHtml() {
//获取文本html():能获取到匹配元素内的值（包含html元素标签）
//alert($("#testDiv").html());
//设置文本html():参数中html标签不会当作普通文本处理
//$("#testDiv").html(3333333);
//$("#testDiv").html("<h2>333333333</h2>");
//获取文本text():能获取到匹配元素内的值（不包含html元素标签）
//alert($("#testDiv").text());
//设置文本html():能将参数中html标签会当作普通文本处理
$("#testDiv").text("<b>Some</b> new text.");
}
function testDom() {
//内部添加元素
//$("#showDiv").html("<input type='text'>");
//append("");向每个匹配的元素内部追加内容。
//$("#showDiv").append("<input type='text'>");
//appendTo(content):把所有匹配的元素p追加到指定的元素div集合中
//$("p").appendTo("div");
//appendTo(content):把所有匹配的p元素追加到指定的一个#showDiv元素
//$("p").appendTo("#showDiv");
//prepend(content):向每个匹配的#showDiv元素内部前置内容p元素。
// $("#showDiv").prepend($("p"));
//外部添加元素
//after(""): 在每个匹配的div元素之后插入内容p元素
//$("div").after($("p"));
//before(""):在每个匹配的div元素之前插入内容p元素
//$("div").before($("p"));
//删除元素
//remove(""):
//$("div").remove();//遍历删除
//$("div").remove("div:last");//删除匹配div元素中最后一个div元素
}
</script>
</head>
<body>
<input type="button" value="测试文本" onclick="operHtml();" />
<input type="button" value="操作文档结构" onclick="testDom();" />
<div id="testDiv">
<h1>11111111111111</h1>
</div>
<hr />
<div id="showDiv">111111111</div>
<p>I would like to say:</p>
<div>222222222222</div>
<div>333333333333</div>
</body>
</html>
9.文字说明html()方法和text()方法的区别
1.获取匹配元素值
html():能获取到匹配元素内的值（包含html元素标签）
text():能获取到匹配元素内的值（不包含html元素标签）
2.设置匹配元素的值
html("<h2>333333333</h2>"):参数中html标签不会当作普通文本处理 text("<h2>333333333</h2>"):能将参数中html标签会当作普通文本处理
10.文字说明css()方法和addClass()方法的区别
1.css(name)：获取到第一个匹配元素的样式name属性值。
2.css(name,value): 在所有匹配的元素中，设置一个样式name属性的值。
3.addClass(name): 为每个匹配的元素添加指定的类名，达到添加样式的效果
11.【上机】使用jQuery技术将下面代码补全
<html>
<head>
<script type=”text/javascript”>
//打开页面显示宽300px,高300px,背景为紫色，字体为20号的div
</script>
</head>
<body>
<div>jQuery很简单方便</div>
<body>
</html>
答案：
<html>
<head>
<style type="text/css">
.test {
300px;
height: 300px;
background-color: purple;
font-size: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js">
</script>
<script type="text/javascript">
//打开页面显示宽300px,高300px,背景为紫色，字体为20号的div
$(function() {
$("div").addClass("test");
});
</script>
</head>
<body>
<div>jquery很简单方便</div>
<body>
</html>
<html>
<head>
<script type=”text/javascript”>
//使用jQuery将页面上的所有框线设置为宽为2px的虚线
</script>
</head>
<body>
<body>
</html>
答案：
<html>
<head>
<script type="text/javascript" src="js/jquery-3.1.1.js">
</script>
<style>
.test{
border: dashed 2px;
}
</style>
<script type="text/Javascript">
//使用jquery将页面上的所有框线设置为宽为2px的虚线
$(function(){
$("body").addClass("test");
});
</script>
</head>
<body>
<body>
</html>
12.使用文字列出jQuery操作文档结构的方法都是有哪些
1.内部添加元素
html()
append()
appendTo()
prepend()
2.外部添加元素
after()
before()
3.删除元素
remove()
13.【上机】补全下面代码
<html>
<head>
<script type=”text/javascript”>
//使用jQuery在div中追加一句话”越努力越幸运”
//使用jQuery将b标签移动到div中
</script>
</head>
<body>
<b>jQuery提供了多种多样的方式操作文档结构</b>
<div id=””>今天天气适合学习</div>
<body>
</html>
答案：
<html>
<head>
<script type="text/javascript" src="js/jquery-3.1.1.js">
</script>
<script type="text/Javascript">
//使用jquery在div中追加一句话”越努力越幸运”
$(function(){
$("div").append(" 越努力越幸运");
});
//使用jquery将b标签移动到div中
$(function(){
$("b").appendTo("div");
});
</script>
</head>
<body>
<b>jquery提供了多种多样的方式操作文档结构</b>
<div id="">今天天气适合学习</div>
<body>
</html>
14.JQuery中bind和unbind方法分别有什么作用？
1.bind:为每一个匹配元素一个或多个事件绑定事件处理器函数。
例如：
//获取要进行事件绑定的元素
var btn=$("#btn");
//事件绑定,一旦绑定完成，可以执行多次
btn.bind("click",function(){
//写你想写代码
alert("绑定完毕");
});
2.unbind: bind()的反向操作，从每一个匹配的元素中删除绑定的事件
例如：
//事件解绑
function testUnBind(){
//获取要进行事件解绑的元素
var btn=$("#btn");
btn.unbind("click");
}
15.JQuery中的one()方法有什么特点？使用代码说明
例如（部分代码）：
//事件绑定,一旦绑定完成，可以执行一次****
var btn=$("input");
btn.one("click",function(){
//写你想写代码
alert("绑定完毕");
});
16.jQuery中的ready()方法和body中的onload方法有什么区别？
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，会被覆盖，最后只会执行一个。
$(document).ready()可以同时编写多个，并且都可以得到执行。
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
17.【上机】使用jQuery中的ready()方法实现页面加载成功弹出“页面加载成功提
示框”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("页面加载成功提示框");
});
</script>
</head>
<body>
</body>
</html>
18.【上机】使用jQuery中的动画效果实现页面背景图片的淡入和淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//淡入淡出
$("div").fadeIn(5000);
$("div").fadeOut(5000);
});
</script>
</head>
<body>
<div style=" %99;height: 99%; display: none;">
<img src="img/pictrue.jpg" width="100%" height="100%" />
</div>
</body>
</html>
19.【上机】使用jQuery实现网页更换背景色的小功能，将下面代码补全
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JScript/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
//实现网页背景更换的功能
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="10%">
<tr>
<td style="background-color:Red">红色</td>
<td style="background-color:Blue">蓝色</td>
<td style="background-color:Green">绿色</td>
</tr>
</table>
</body>
</html>
答案：
<html>
<head>
<title></title>
<script src="js/jquery-3.1.1.js" type="text/javascript">
</script>
<script type="text/Javascript">
//实现网页背景更换的功能
$(function(){
$("td").click(function(){
var color = this.style.backgroundColor;
$("body").css("background-color",color);
});
});
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="10%">
<h5>点击下面颜色改变背景颜色</h5>
<tr>
<td style="background-color:Red">红色</td>
<td style="background-color:Blue">蓝色</td>
<td style="background-color:Green">绿色</td>
</tr>
</table>
</body>
</html>