吴宇航_习题11_jquery1
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.配置好jquery完成页面加载完以后打印hello world这个程序
答：
<script type="text/javascript"src="../jquery-1.8.0.min.js"></script> <script src="test.js"></script>
$(init);
function init(){
alert("Hello world!");
}
2.什么jquery对象，什么是DOM对象。
写一个文本输入框，使用jquery对象和DOM对
象的转换方法来转换这两个对象
答：
（1）Dom对象即是我们用传统的方法（javaScript）获取的对象;jQuery对象即是用jQuery 类库的选择器获取对象;
（2）
测试文本框1:<input type="text"id="id1"name="id1"readonly="readonly" value="我是文本框"/><br>
<button onclick="t8()">jq转js测试</button>
<button onclick="t9()">js转jq测试</button>
function t8(){//jq转js
var jq=$("#id1");
var js=jq[0];
alert(js.value);
}
function t9(){//js转jq
var v= document.getElementById("id1");
var f=$(v);
alert(f.val());
}
3.基本选择器:写一个按钮，再写三个输入框分别用id 的方法和.class方法来找到这个输入
框并改他们的背景颜色。
答：
(1)jQuery脚本代码：
function t1(){
$("#id1").addClass("blue");
$("#id2").addClass("red");
$("#id3").addClass("yellow");
}
(2)页面前台代码：
<body>
<button onclick="t1();">添加背景颜色</button><br>
测试文本框1:<input type="text"id="id1"name="id1"value=""/><br>测试文本框2:<input type="text"id="id2"name="id2"value=""/><br>测试文本框3:<input type="text"id="id3"name="id3"value=""/><br> </body>
（3）css样式的style
<style type="text/css">
.blue{
background-color: blue;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.gray{
background-color:gray;
}
</style>
4.写一个table第一行用蓝色，最后一行用红色，然后中间每隔一行用灰色。
答：
（1）jQuery脚本代码：
function t2(){
$("tr:first-child").addClass("blue");
$("tr:last-child").addClass("red");
var trs=$("tr");
for (var i = 1; i < trs.length-1; i++) {
if(i%2==0){
var a=$(trs[i]);
a.css("background-color","gray");
// a.addClass("gray");
}
}
})
（2）css样式的style
<style type="text/css">
.blue{
background-color: blue;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.gray{
background-color:gray;
}
</style>
5.写一个程序，给一个按钮，点了这个按钮以后，所有的多选框变成选中，所有的单选框
第一个选中，所有的输入框变背景，所有隐藏的div显示出来。
答：
(1)页面前台代码：
<table border="1"style="width: 200px;height:
200px;text-align:center ">
<tr>
<td><input type="checkbox"/></td>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>6-1</td>
<td>6-2</td>
<td>6-3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>7-1</td>
<td>7-2</td>
<td>7-3</td>
</tr>
<tr>
<td><input type="radio"name="ra1"/></td>
<td>8-1</td>
<td><input type="radio"name="ra1"/></td>
<td>8-3</td>
</tr>
<tr>
<td><input type="radio"name="ra2"/></td>
<td>9-1</td>
<td><input type="radio"name="ra2"/></td>
<td>9-3</td>
</tr>
<tr>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td colspan="4"><input type="text"></td>
</tr>
<tr><td colspan="4">
<h3>泉州尚创</h3>
<div class="div"id="div"hidden="hidden">
<button class="hide"type="button">隐藏</button> <p>44班：吴宇航<br/>
二楼<br/>
宿舍716</p>
</div></td>
</tr>
</table>
<button onclick="t3()"type="button">选择</button>
<button onclick="t7()"type="button"id="btn1">反选</button>
（2）jQuery脚本代码：
function t3() {
var ck = $("tr td input:checkbox");
ck.attr("checked", !ck.attr("checked"));
var ra1 = $("[name=ra1]:first");
ra1.attr('checked', !ra1.attr("checked"));
var ra2 = $("[name=ra2]:first");
ra2.attr('checked', !ra2.attr("checked"));
$("tr td input:text").css("background-color", "#cccc00");
$("div").removeAttr("hidden");
}
$(document).ready(function() {
$(".hide").click(function() {
// $("p").toggle();//反复开关
$(this).parents(".div").hide("slow");//slow隐藏一次
});
});
6.给一个按钮，点了他一后，页面中的一个select框下面加入一个选项，点另一个按钮就
删除最后一个加入的选项。
答：
（1）jQuery脚本代码：
var tt=0;
function t4(){
tt++;
var sele=$("#sele");
sele.append("<option value='n+1'>新增的第"+tt+"项</option>");
}
function t5(){
$("#sele option:last").remove();
}
(2)页面前台代码：
<fieldset>
<legend>select框</legend>
<select id="sele">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<button onclick="t4()">添加</button>
<button onclick="t5()">删除</button>
</fieldset>
7.给一个按钮，点了他就在页面了复制出一个他的幅本。
答：
（1）前台页面代码：
<fieldset id="fis">
<legend>创建副本</legend>
<button onclick="t6()"id="btnclick">点我</button> </fieldset>
（2）jquery脚本代码：
function t6(){
$("#btnclick").clone().appendTo("#fis");
}
8.给一个按钮，点了它，页面中所有选中的checkbox或radio都变成反选中，
答：
function t7() {
$("tr td input:checkbox").each(function() {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", "true");
}
});
var ras=$("tr td input:radio");
ras.each(function(){
$(this).attr('checked',!$(this).attr("checked"));
});
}。