在<script>元素中,可以使用( A )属性指定引用jQuery脚本的路径。
A、src
B、link
C、location
D、js
在jQuery程序中,( D )是jQuery的缩写。
A、jq()
B、#()
C、&()
D、$()
在jQuery程序中,( C )是一个jQuery对象,表示当前引用的HTML元素对象。
A、self
B、$(self)
C、$(this)
D、this
jquery中$(this).get(0)的写法和( B )是等价的。
A、this[0]
B、$(this)[0]
C、$("this")[0]
D、$("this").get(0)
使用( B )方法可以将HTML元素从显示状态切换为隐藏状态。
A、show()
B、hide()
C、toggle()
D、change()
使用( C )方法可以直接调节HTML元素的透明度。
A、fadeln()
B、fadeOut()
C、fadeTo()
D、fadeToggle()
使用( A )方法可以让HTML元素向下滑动。
A、slideDown()
B、slideUp()
C、slideToggle()
D、slide()
调用下面( B )方法不能获取和设置HTML元素的内容。
A、html()
B、content()
C、text()
D、val()
使用( A )方法可以向HTML元素的后面插入内容。
A、after()
B、insert()
C、append()
D、add()
使用( D )方法可以删除HTML元素的内容和所有子元素。
A、delete()
B、detach()
C、remove()
D、empty()
使用( B )方法可以删除DOM中匹配的元素,并不会把匹配的元素从jQuery对象中删除,所匹配的元素上绑定的事件或附加的数据都会保留下来,在将来仍然可以使用这些匹配的元素。
A、delete()
B、detach()
C、remove()
D、empty()
页面有一个<input type="text" id="name" name="name" value=""/>元素,动态设置该元素的值。正确的选项是( A )。
A、$("#name").val("动态设值");
B、$("#name").text("动态设值");
C、$("#name").html("动态设值");
D、$("#name").value("动态设值");
在jquery中,如果想要从DOM中删除所有匹配的元素,下面哪一个是正确的( C )。
A、delete()
B、empty()
C、remove()
D、removeAll()
在页面中有一个ul元素,代码如下:
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>,下面对节点的操作哪一个说法不正确。( D )
A、var $li=$("<li title='香蕉'>香蕉</li>");是创建节点。
B、$("ul").append($("<li title='香蕉'>香蕉</li>"));是给ul追加节点。
C、$("ul li:eq(1)").remove();是删除ul下“橘子"那个节点
D、以上说法都不对
获取<div id="content">内容...</div>标签里的文本内容。( BC )
A、$("#content").val();
B、$("#content").html();
C、$("#content").text();
D、$("#content").innerHTML();
案例代码如下
<body>
<form>
用户名: <input type="text" id="username" name="username" />
密码: <input type="password" id="pwd" name="pwd" />
</form>
</body>
请用jquery获取username文本框输入值的内容。( ABCD)
A、$("#username").val();
B、$("input")[0].value;
C、$("input[name=username]").val();
D、$(":input[name=username]").val();
下面哪一个是用来追加到指定元素的末尾的?( BC )
A、insertAfter()
B、append()
C、appendTo()
D、after()
使用( C )可以选取ID为id的HTML元素。
A、id
B、$("id")
C、$("#id")
D、$(id)
使用( B )可以选取网页中所有应用了CSS类(类名ClassName)的HTML元素。
A、$("ClassName")
B、$(".ClassName")
C、$("#ClassName")
D、$( .ClassName)
使用( A )可以选择表单中的所有input元素。
A、$("form input")
B、$("form+input")
C、$("input")
D、$("form~input")
使用( B )可以选择所有紧接在label元素后面的input元素。
A、$("lable input")
B、$("lable+input")
C、$("lable<input")
D、$("label~input")
在jquery中想要找到所有元素的同辈元素,下面哪一个是可以实现的?( C )
A、eq(index)
B、find(expr)\
C、siblings([expr])
D、next()
使用jquery检查<input type="hidden" id="id" name="id" />元素在网页上是否存在。( B )
A、if($("#id")) { //do someing... }
B、if($("#id").length > 0) { //do someing... }
C、if($("#id").length()>0) { //do someing... }
D、if($("#id").size>0) { //do someing... }
下面选项中哪一个是和$("#foo")等价的写法。( D )
A、$("foo#")
B、$(#"foo")
C、$("foo")
D、jQuery("#foo")
HTML代码:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
jQuery代码:$("div>p");结果:( A )
A、<p>two</p>
B、<p>one</p>
C、<p>three</p>
D、<div><p>two</p></div>
HTML代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery代码:$("*")结果:( D )
A、<div>DIV</div>
B、<span>SPAN</span>
C、<p>P</p>
D、<div>DIV</div>,<span>SPAN</span>,<p>P</p>
HTML代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery代码:$(".myClass") ;结果:( D )
A、<div class="notMe">div class="notMe"</div>
B、<div class="myClass">div class="myClass"</div>
C、<span class="myClass">span class="myClass"</span>
D、<div class=”myClass”>div class=”myClass”</div>,
<span class="myClass">span class="myClass"</span>
HTML代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery代码:$("div");结果:( C )
A、<div>DIV1</div>
B、<div>DIV2</div>
C、<div>DIV1</div>,<div>DIV2</div>
D、没有获取到任何元素
HTML代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery代码:$("#myDiv");结果:( A )
A、<div id="myDiv">id="myDiv"</div>
B、<p>id="notMe"</p>
C、<div id="notMe"><p>id="notMe"</p></div>
D、<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
HTML代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuey代码:$("div,span,p.myClass")结果:( C )
A、<p class="myClass">p class="myClass"</p>
B、<p class="notMyClass">p class="notMyClass"</p>
C、<div>div</div>,<p class="myClass">
p class="myClass"</p>,<span>span<>/span>
D、<div>div</div>
HTML代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码:$("form input"结果:( B )
A、<input name="name" />
B、<input name="name" />,<input name="newsletter" />
C、<input name="newsletter" />
D、没有获取到任何元素
HTML代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码:$("form>input")结果:( A )
A、<input name="name" />
B、<input name="newsletter" />
C、<input name="none" />
D、<label>Newsletter:</label>
HTML代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuey代码:$("label+input")结果:( C )
A、<input name="newsletter" />
B、<input name="name" />
C、<input name="name" />,<input name="newsletter" />
D、<label>Newsletter:</label>
HTML代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuey代码:$("form~input")结果:( D )
A、<label>Newsletter:</label>
B、<input name="newsletter" />
C、<input name="name" />
D、<input name="none" />
案例代码如下:
<body>
<form>
<div class="big">大字体</div>
<div class="small">小字体</div>
</form>
</body>
请选取文本是"大字体"的div对象。( ACD )
A、$("div.big");
B、$("div .big");
C、$("div:contains('大字体')");
D、$("form > div.big");
在<form>标签中,指定处理表单提交数据的脚本文件的属性为( C )。
A、Id
B、name
C、action
D、method
解析:
action 属性规定当提交表单时,向何处发送表单数据。
HTML 4.01 与 HTML5之间的差异
在 HTML5 中,action 属性不再是必需的。
http://www.runoob.com/tags/tag-form.html
http://www.runoob.com/tags/att-form-action.html
语法
<form action="URL">
在<input>标签中将type属性设置为 ( B ) 即可定义单选按钮。
A."check"
B."radio"
C."select"
D."text"
解析:
type 属性规定要显示的 <input> 元素的类型。
默认类型是:text。
radio 定义单选按钮。
使用:input选择器可以匹配表单中所有的( D )元素。
A、input
B、select
C、button
D、以上都可以
解析:
input 选择器选取表单元素。
该选择器同样适用于 button 元素。
使用( B )方法清空下拉菜单。
A.clear()
B.empty()
C.delete()
D.remove()
解析:
可以使用empty()方法清空下拉列表。如:
$("select").empty();
HTML 代码:
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
jQuery 代码: $("input:enabled") 结果:( B )
A、[<input name="email" disabled="disabled" />]
B、[ <input name="id" /> ]
C、[<input name="email" disabled="disabled" /><input name="id" />]
D、没有选取到任何元素
解析:
:enabled 选择器选取所有启用的表单元素。
当一个文本框中的内容被选中时,想要执行指定的方法时,可以使用下面哪个事件来实现?( C )
A、click(fn)
B、change(fn)
C、select(fn)
D、bind(fn)
解析:
当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件。
select() 方法触发 select 事件,或规定当发生 select 事件时运行的函数。
语法
触发被选元素的 select 事件:
$(selector).select()
添加函数到 select 事件:
$(selector).select(function)
下面哪几种是jquery中表单的对象属性?( ABCD )
A、:checked
B、: enabled
C、:selected
D、: disabled
解析:
表单选择器
:checked、: enabled 、:selected、: disabled
页面中有一个select标签,代码如下:
<select id="sel">
<option value="0">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
</select>,要使“选项四”选中的正确写法是( B )。
A、$("#sel").val("选项四");
B、$("#sel").val("4");
C、$("#sel > option:eq(4)").checked;
D、$("#sel option:eq(4)").attr("selected");
解析:
页面中有一组性别单选按钮,HTML代码如下:
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
请设置“男”为选中状态。jQuery代码正确的是( D )。
A、$("sex[0]").attr("checked",true);
B、$("#sex[0]").attr("checked",true);
C、$("[name=sex]:radio").attr("checked",true);
D、$(":radio[name=sex]:eq(0)").attr("checked",true);
页面有一个<input type="text" id="name" name="name" value=""/>元素,动态设置该元素的值,正确的代码是( A )。
A、$("#name").val("动态设值");
B、$("#name").text("动态设值");
C、$("#name").html("动态设值");
D、$("#name").value("动态设值");
解析:
动态设置文本框的值用.val()方法。
下面说法不正确的是( D )。
A、$("input:checked")选取所有被选中的<input>元素
B、$("#form:disabled")选取id为form的表单内的所有不可用元素
C、$("#name").is(":visible")是判断id为name的元素的可见性
D、$("div ").addClass("background","url(img/up.gif) ")是设置样式的
案例代码如下
<body>
<form>
用户名:<input type="text" id="username" name="username" />
密码:<input type="password" id="pwd" name=" pwd "/>
</form>
</body>
请用jquery获取username文本框输入值的内容:( ABCD )
A、$("#username").val();
B、$("input")[0].value;
C、$("input[name=username]").val();
D、$(":input[name=username]").val();
假设页面有查看按钮,要控制查看按钮的可见性:<input type="button" id="query" value="查看"/>,设置按钮不可见,代码为( CD ).
A、$("#query").show();
B、$("#query").css("display","block");
C、$("#query").hide();
D、$("#query").css("display","none");
解析:
设置元素的可见性可以使用:
-.hide() 不可见
-.show() 可见
-.css("display","none") 不可见
-.css("display","block") 可见
在一个表单中,如果想要给输入框添加一个输入验证,可以用( D )事件实现。
A、hover(over_fn ,out_fn)
B、keypress(fn)
C、select(fn)
D、change(fn)
解析:
jQuery change() 方法
当元素的值改变时发生 change 事件(仅适用于表单字段)。
change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。
注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。
语法
触发被选元素的 change 事件:
$(selector).change()
添加函数到 change 事件:
$(selector).change(function)
当一个文本框中的内容被选中时,想要执行指定程序时,可以使用( C )事件来实现。
A、click(fn)
B、change(fn)
C、select(fn)
D、focus(fn)
解析:jQuery select() 方法
当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件。
select() 方法触发 select 事件,或规定当发生 select 事件时运行的函数。
语法
触发被选元素的 select 事件:
$(selector).select()
添加函数到 select 事件:
$(selector).select(function)
下列正则表达式量词符号与含义不匹配的是( B )。
A、{n,}:至少出现n次
B、{n,m}:出现m-n次
C、?:出现0-1次
D、*:出现任意次
解析:
量词
量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。
n* 匹配任何包含零个或多个 n 的字符串。
例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。
n? 匹配任何包含零个或一个 n 的字符串。
例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。
n{X} 匹配包含 X 个 n 的序列的字符串。
例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的两个 "a",且匹配 "caaandy." 中的前两个 "a"。
n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。
例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。
例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"
下列与表达式/^[0-9]+$/相符的是( A )。
A、123
B、a123
C、123a
D、A
解析:
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
[0-9] 查找任何从 0 至 9 的数字。
+ 匹配前项1次或多次。
下面那个方法能判断字符串中是否存在和指定正则表达式匹配的字符串;是则返回true,否则返回false。( A )
A、RegExp对象的test()方法
B、RegExp对象的exec()方法
C、String对象的search()方法
D、String对象的match()方法
解析:
RegExp 对象方法
方法 描述
compile 在 1.5 版本中已废弃。 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值,并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
toString 返回正则表达式的字符串。
支持正则表达式的 String 对象的方法
方法 描述 FF IE
search 检索与正则表达式相匹配的值。 1 4
match 找到一个或多个正则表达式的匹配。 1 4
replace 替换与正则表达式匹配的子串。 1 4
split 把字符串分割为字符串数组。 1 4
以下代码片段使用正则表达式检测邮箱地址是否正确。请选择合适的选项填补空缺的代码。
//表单验证-第1题(共3题)( B )。
function checkEmail(){
var email=$("#email").val;
var $email_prompt=$("#email_prompt");
$email_prompt.html("");
//表单验证-第1题
if ( //表单验证-第2题 ){
$(email_prompt).html("电子邮件格式不正确,请重新输入。");
//表单验证-第3题 //email文本框全选
return false;
}
return true;
}
A、var reg=/[a-zA-z]+://[^\s]*$/;
B、var reg=/^\w+@+(\.[a-zA-Z]{2,3}){1,2}$/;
C、var reg=/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?$/;
D、var reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
解析:
function checkEmail(){
var email=$("#email").val;
var $email_prompt=$("#email_prompt");
$email_prompt.html("");
var reg=/^\w+@+(\.[a-zA-Z]{2,3}){1,2}$/;
if (reg.test(email)==false){
$(email_prompt).html("电子邮件格式不正确,请重新输入。");
$("#email").select();
return false;
}
return true;
}
以下代码片段使用正则表达式检测邮箱地址是否正确。请选择合适的选项填补空缺的代码。
//表单验证-第2题(共3题)( C )
function checkEmail(){
var email=$("#email").val;
var $email_prompt=$("#email_prompt");
$email_prompt.html("");
//表单验证-第1题
if ( //表单验证-第2题 ){
$(email_prompt).html("电子邮件格式不正确,请重新输入。");
//表单验证-第3题 //email文本框全选
return false;
}
return true;
}
A、email.test(reg)==false
B、email.test(reg)==true
C、reg.test(email)==false
D、reg.test(email)==true
解析:
function checkEmail(){
var email=$("#email").val;
var $email_prompt=$("#email_prompt");
$email_prompt.html("");
var reg=/^\w+@+(\.[a-zA-Z]{2,3}){1,2}$/;
if (reg.test(email)==false){
$(email_prompt).html("电子邮件格式不正确,请重新输入。");
$("#email").select();
return false;
}
return true;
}
以下代码片段使用正则表达式检测邮箱地址是否正确。请选择合适的选项填补空缺的代码。
//表单验证-第3题(共3题)( D )
function checkEmail(){
var email=$("#email").val;
var $email_prompt=$("#email_prompt");
$email_prompt.html("");
//表单验证-第1题
if ( //表单验证-第2题 ){
$(email_prompt).html("电子邮件格式不正确,请重新输入。");
//表单验证-第3题 //email文本框全选
return false;
}
return true;
}
A、$("#email").attr("checked",true);
B、$("#email").attr("selected",true);
C、$("#email").select;
D、$("#email").select();
解析:
function checkEmail(){
var email=$("#email").val;
var $email_prompt=$("#email_prompt");
$email_prompt.html("");
var reg=/^\w+@+(\.[a-zA-Z]{2,3}){1,2}$/;
if (reg.test(email)==false){
$(email_prompt).html("电子邮件格式不正确,请重新输入。");
$("#email").select();
return false;
}
return true;
}
选择合适选项补全以下代码片段。( A B C D )
HTML代码:
<form>
<h3 align="center">选择你喜欢的运动</h3>
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="篮球">篮球<br/><br/>
<input type="button" id="checkAll" value="全选">
</form>
jQuery代码:
$(function(){
$("#checkAll").click(function(){
//请补全此处代码
});
});
A、$(":checkbox[name='hobby']").attr("checked",true);
B、$(":input[name='hobby']").attr("checked","checked");
C、$(":input[name='hobby']").each(function(){
this.checked=true;
});
D、$(":input[name='hobby']").attr("checked",1);
选择合适选项补全以下代码片段。( ABD )
HTML代码:
<form>
<h3 align="center">选择你喜欢的运动</h3>
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="篮球">篮球<br/><br/>
<input type="button" id="subBtn" value="提交">
</form>
jQuery代码:
$(function(){
$("#subBtn").click(function(){
var msg="你喜欢的运动是:\r\n";
//请补全此处代码 .each(function(){
msg+=$(this).val()+"\r\n";
});
alert(msg);
});
});
});
A、$("[name='hobby']:checked")
B、$(":checkbox:checked")
C、$("input :checked")
D、$("input:checked")
解析:
$("#subBtn").click(function(){
var msg="你喜欢的运动是:\r\n";
//遍历获取选中项的值,拼接为字符串(配合转义字符)
$("[name='hobby']:checked").each(function(){
msg+=$(this).val()+"\r\n";
});
//显示输出
alert(msg);
});
使用( C )可以选取ID为Id的HTML元素。
A、Id
B、$("Id")
C、$("#Id")
D、$(Id)
解析:
$("#id名")
使用( B )可以选取网页中所有应用了CSS类(类名为ClassName)的HTML元素。
A、$("ClassName")
B、$(".ClassName")
C、$("#ClassName")
D、$(.ClassName)
解析:
$(".类名")
使用( A )可以选择表单中的所有input元素。
A、$("form input")
B、$("form+input")
C、$("input")
D、$("form~input")
解析:
$("祖先选择器 后代选择器")
使用( B )可以选择所有紧接在label元素后面的input元素。
A、$("label input")
B、$("label+input")
C、$("label<input")
D、$("label~input")
解析:
$("前+后")
在jquery中想要找到所有元素的同辈元素,下面哪一个是可以实现的?( C )
A、eq(index)
B、find(expr)
C、siblings([expr])
D、next()
解析:
同辈选择器 $(前~兄弟)
或siblings()
或nextAll()
使用jquery检查<input type="hidden" id="id" name="id" />元素在网页上是否存在。( B )
A、if($("#id")) { //do someing... }
B、if($("#id").length > 0) { //do someing... }
C、if($("#id").length() > 0) { //do someing... }
D、if($("#id").size > 0) { //do someing... }
解析:
通过判断jQuery对象的length属性可以检查网面上是否存在该元素。
下面选项中哪一个是和$("#foo")等价的写法。( D )
A、$("foo#")
B、$(#"foo")
C、$ ("foo")
D、jQuery("#foo")
解析:
id选择器 $("#id")或jQuery("#id")
HTML 代码:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
jQuery 代码: $("div > p"); 结果:( A )
A、<p>two</p>
B、<p>one</p>
C、<p>three</p>
D、<div><p>two</p></div>
解析:
父子选择器选取的为子元素。
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码: $("*") 结果:( D )
A、<div>DIV</div>
B、<span>SPAN</span>
C、<p>P</p>
D、<div>DIV</div>, <span>SPAN</span>, <p>P</p>
解析:
全局选择器选取的为全部元素。
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码: $(".myClass"); 结果:( D )
A、<div class="notMe">div class="notMe"</div>
B、<div class="myClass">div class="myClass"</div>
C、<span class="myClass">span class="myClass"</span>
D、<div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span>
解析:
类选择器
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码: $("div"); 结果:( C )
A、<div>DIV1</div>
B、<div>DIV2</div>
C、<div>DIV1</div>, <div>DIV2</div>
D、没有获取到任何元素
解析:
标签选择器
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码: $("#myDiv"); 结果:( A )
A、<div id="myDiv">id="myDiv"</div>
B、<p>id="notMe"</p>
C、<div id="notMe"><p>id="notMe"</p></div>
D、<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id="myDiv"</div>
解析:
ID选择器
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码: $("div,span,p.myClass") 结果:( C )
A、<p class="myClass">p class="myClass"</p>
B、<p class="notMyClass">p class="notMyClass"</p>
C、<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>
D、<div>div</div>
解析:
并集选择器
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:$("form input") 结果:( B )
A、<input name="name" />
B、<input name="name" />, <input name="newsletter" />
C、<input name="newsletter" />
D、没有获取到任何元素
解析:
前后选择器、祖先后代选择器
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form > input") 结果:( A )
A、<input name="name" />
B、<input name="newsletter" />
C、<input name="none" />
D、<label>Newsletter:</label>
解析:
父子选择器选取的为子元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("label + input") 结果:( C )
A、<input name="newsletter" />
B、<input name="name" />
C、<input name="name" />, <input name="newsletter" />
D、<label>Newsletter:</label>
解析:
相邻选择器
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form ~ input") 结果:( D )
A、<label>Newsletter:</label>
B、<input name="newsletter" />
C、<input name="name" />
D、<input name="none" />
解析:
同辈选择器
案例代码如下:
<body>
<form>
<div class="big">大字体</div>
<div class="small">小字体</div>
</form>
</body>
请选取文本是"大字体"的div对象。( ACD )
A、$("div.big");
B、$("div .big");
C、$("div:contains('大字体')");
D、$("form > div.big");
请看下列html代码:
<ul id="u_item">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
使用jQuery计算<li>的个数,下列代码正确的是( B ).
A、var $obj = $('ul li');
alert($obj.length());
B、var $obj = $('li');
alert($obj.length);
C、var $obj = $('#li');
alert($obj.length());
D、var $obj = $('#li');
alert($obj.length);
解析:
标签选择器<标签名>,层次选择器<祖先选择器 后代选择器>,length属性
有这样一个表单元素,想要找到这个hidden元素,下面哪个是正确的( B )。
A、:visible
B、:hidden
C、visible()
D、hidden()
解析:
:visible 表单中可见的元素
:hidden 表单中不可见的元素
如果想要找到一个表格的指定行数的元素,用下面( C )方法可以快速找到指定元素。
A、text()
B、get()
C、eq()
D、contents()
使用( C )可以选取ID为Id的HTML元素。
A、Id
B、$("Id")
C、$("#Id")
D、$(Id)
解析:
$("#id名")
使用( B )可以选取网页中所有应用了CSS类(类名为ClassName)的HTML元素。
A、$("ClassName")
B、$(".ClassName")
C、$("#ClassName")
D、$(.ClassName)
解析:
$(".类名")
使用( A )可以选择表单中的所有input元素。
A、$("form input")
B、$("form+input")
C、$("input")
D、$("form~input")
解析:
$("祖先选择器 后代选择器")
使用( B )可以选择所有紧接在label元素后面的input元素。
A、$("label input")
B、$("label+input")
C、$("label<input")
D、$("label~input")
解析:
$("前+后")
在jquery中想要找到所有元素的同辈元素,下面哪一个是可以实现的?( C )
A、eq(index)
B、find(expr)
C、siblings([expr])
D、next()
同辈选择器 $(前~兄弟)
或siblings()
或nextAll()
使用jquery检查<input type="hidden" id="id" name="id" />元素在网页上是否存在。( B )
A、if($("#id")) { //do someing... }
B、if($("#id").length > 0) { //do someing... }
C、if($("#id").length() > 0) { //do someing... }
D、if($("#id").size > 0) { //do someing... }
解析:
通过判断jQuery对象的length属性可以检查网面上是否存在该元素。
下面选项中哪一个是和$("#foo")等价的写法。( D )
A、$("foo#")
B、$(#"foo")
C、$ ("foo")
D、jQuery("#foo")
解析:
id选择器 $("#id")或jQuery("#id")
HTML 代码:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
jQuery 代码: $("div > p"); 结果:( A )
A、<p>two</p>
B、<p>one</p>
C、<p>three</p>
D、<div><p>two</p></div>
解析:
父子选择器选取的为子元素。
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码: $("*") 结果:( D )
A、<div>DIV</div>
B、<span>SPAN</span>
C、<p>P</p>
D、<div>DIV</div>, <span>SPAN</span>, <p>P</p>
解析:
全局选择器选取的为全部元素。
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码: $(".myClass"); 结果:( D )
A、<div class="notMe">div class="notMe"</div>
B、<div class="myClass">div class="myClass"</div>
C、<span class="myClass">span class="myClass"</span>
D、<div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span>
解析:
类选择器
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码: $("div"); 结果:( C )
A、<div>DIV1</div>
B、<div>DIV2</div>
C、<div>DIV1</div>, <div>DIV2</div>
D、没有获取到任何元素
解析:
标签选择器
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码: $("#myDiv"); 结果:( A )
A、<div id="myDiv">id="myDiv"</div>
B、<p>id="notMe"</p>
C、<div id="notMe"><p>id="notMe"</p></div>
D、<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id="myDiv"</div>
解析:
ID选择器
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码: $("div,span,p.myClass") 结果:( C )
A、<p class="myClass">p class="myClass"</p>
B、<p class="notMyClass">p class="notMyClass"</p>
C、<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>
D、<div>div</div>
解析:
并集选择器
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:$("form input") 结果:( B )
A、<input name="name" />
B、<input name="name" />, <input name="newsletter" />
C、<input name="newsletter" />
D、没有获取到任何元素
解析:
前后选择器、祖先后代选择器
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form > input") 结果:( A )
A、<input name="name" />
B、<input name="newsletter" />
C、<input name="none" />
D、<label>Newsletter:</label>
解析:
父子选择器选取的为子元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("label + input") 结果:( C )
A、<input name="newsletter" />
B、<input name="name" />
C、<input name="name" />, <input name="newsletter" />
D、<label>Newsletter:</label>
解析:
相邻选择器
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form ~ input") 结果:( D )
A.<label>Newsletter:</label>
B.<input name="newsletter" />
C.<input name="name" />
D.<input name="none" />
解析:
同辈选择器
案例代码如下:
<body>
<form>
<div class="big">大字体</div>
<div class="small">小字体</div>
</form>
</body>
请选取文本是"大字体"的div对象。( ACD )
A、$("div.big");
B、$("div .big");
C、$("div:contains('大字体')");
D、$("form > div.big");
解析:
交集选择器,内容过滤器,父子选择器
请看下列html代码:
<ul id="u_item">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
使用jQuery计算<li>的个数,下列代码正确的是( B ).
A、var $obj = $('ul li');
alert($obj.length());
B、var $obj = $('li');
alert($obj.length);
C、var $obj = $('#li');
alert($obj.length());
D、var $obj = $('#li');
alert($obj.length);
解析:
标签选择器<标签名>,层次选择器<祖先选择器 后代选择器>,length属性
有这样一个表单元素,想要找到这个hidden元素,下面哪个是正确的( B )。
A、:visible
B、:hidden
C、visible()
D、hidden()
解析:
:visible 表单中可见的元素
:hidden 表单中不可见的元素
如果想要找到一个表格的指定行数的元素,用下面( C )方法可以快速找到指定元素。
A、text()
B、get()
C、eq()
D、contents()
可以使用( C )方法遍历jQuery选择器所有匹配的元素,并对每个元素执行指定的回调函数。
A、every()
B、for()
C、each()
D、get()
解析:
each() 方法为每个匹配元素规定要运行的函数。
提示:返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))
参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置。
element - 当前的元素(也可使用 "this" 选择器)。
实例
输出每个 <li> 元素的文本:
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
使用( B )方法可以删除HTML元素的属性。
A、deleteAttr()
B、removeAttr()
C、delete()
D、remove()
解析:
removeAttr() 方法从被选元素移除一个或多个属性。
语法
$(selector).removeAttr(attribute)
参数 描述
attribute 必需。规定要移除的一个或多个属性。如需移除若干个属性,请使用空格分隔属性名称。
实例
从所有的 <p> 元素移除样式属性:
$("button").click(function(){
$("p").removeAttr("style");
});
DOM操作分为哪几类?( ABC )
A、DOM Core
B、HTML-DOM
C、CSS-DOM
D、XML-DOM
解析:
通常DOM操作分为3类-DOM Core(核心)、HTML-DOM和CSS-DOM。
请看下列html代码:
<p class="s1">hello</p>
能使文本“hello”字体大小变成40px的jQuery代码是( B )。
A、$('div.s1').css('font-size','40px');
B、$('p.s1').css('font-size','40px');
C、$('#s1').css('font-size','40px');
D、$('p#s1').css('font-size','40px');
请看下列html代码:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
给第二个<li>设置字体颜色正确的是( D )。
A、$('ul li:eq(2)').cssStyle('color','red');
B、$('ul li:eq(1)').cssStyle('color','red');
C、$('ul li:eq(2)').css('color','red');
D、$('ul li:eq(1)').css('color','red');
请看下列html,css和jQuery代码片段:
html代码如下:
<div class="s1"></div>
css代码如下:
<style>
.s1{
width:100px;
height:100px;
background-color:red;
}
.s2{
background-color:yellow;
}
</style>
jQuery代码如下:
$(function(){
$('div').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
});
以上代码在浏览器上显示的效果是( D )。
A、连续点击div上以后,div背景显示为红色
B、连续点击div上以后,div背景显示为黄色
C、鼠标悬停在div上以后,div背景显示为红色
D、鼠标悬停在div上以后,div背景显示为黄色
如果需要匹配包含文本的元素,用下面哪种来实现( B )。
A、text()
B、contains()
C、input()
D、attr(name)
在jquery中指定一个类,如果存在就执行删除功能,如果不存在就执行添加功能,下面哪一个是可以直接完成该功能的。( C )
A、removeClass()
B、deleteClass()
C、toggleClass(class)
D、addClass()
//DOM填写代码 -第1题(共3题)( AC )
以下代码段实现为下拉列表动态添加选项,请选择合适的代码填空。
HTML代码:
<div class="second">
<select multiple name="other" id="other" class="sel"></select>
<div class="sd">
<button id="add">添加</button><br/><br/>
</div>
</div>
jQuery代码:
$(function(){
$("#add").click(function(){
var JSONOption=[
{"value":"五星","text":"非常好"},
{"value":"四星","text":"良好"},
{"value":"三星","text":"一般"},
{"value":"二星","text":"还行"},
{"value":"一星","text":"不好"},
];
// DOM -第1题 请填入合适的代码
var myOption= // DOM - 第2题 请填入合适的代码
// DOM - 第3题 请填入合适的代码
}
});
});
A、for (var i=0;i<JSONOption.length;i++){
B、for (var i=0;i<JSONOption.length();i++){
C、for (i in JSONOption){
D、for (i in option){
//DOM填写代码 -第2题(共3题)( B )
以下代码段实现为下拉列表动态添加选项,请选择合适的代码填空。
HTML代码:
<div class="second">
<select multiple name="other" id="other" class="sel"></select>
<div class="sd">
<button id="add">添加</button><br/><br/>
</div>
</div>
jQuery代码:
$(function(){
$("#add").click(function(){
var JSONOption=[
{"value":"五星","text":"非常好"},
{"value":"四星","text":"良好"},
{"value":"三星","text":"一般"},
{"value":"二星","text":"还行"},
{"value":"一星","text":"不好"},
];
// DOM -第1题 请填入合适的代码
var myOption= // DOM - 第2题 请填入合适的代码
// DOM - 第3题 请填入合适的代码
}
});
});
A、"<option value="+JSONOption.value+">"
+JSONOption.text+"</option>";
B、"<option value="+JSONOption[i].value+">"
+JSONOption[i].text+"</option>";
C、"<option value="+JSONOption[i].val()+">"
+JSONOption[i].text()+"</option>";
D、"<option value="+JSONOption(i).value+">"
+JSONOption(i).text+"</option>";
解析:
$(function(){
$("#add").click(function(){
/*var arrayOption=["1","2","3"];
for (var i=0;i<arrayOption.length;i++){
var myOption="<option value="+arrayOption[i]+">"
+arrayOption[i]+"</option>";
$("#other").append(myOption);
}*/
//JSON方式动态为下拉列表添加选项
var JSONOption=[
{"value":"五星","text":"非常好"},
{"value":"四星","text":"良
//DOM填写代码 -第3题(共3题)( BC )
以下代码段实现为下拉列表动态添加选项,请选择合适的代码填空。
HTML代码:
<div class="second">
<select multiple name="other" id="other" class="sel"></select>
<div class="sd">
<button id="add">添加</button><br/><br/>
</div>
</div>
jQuery代码:
$(function(){
$("#add").click(function(){
var JSONOption=[
{"value":"五星","text":"非常好"},
{"value":"四星","text":"良好"},
{"value":"三星","text":"一般"},
{"value":"二星","text":"还行"},
{"value":"一星","text":"不好"},
];
// DOM -第1题 请填入合适的代码
var myOption= // DOM - 第2题 请填入合适的代码
// DOM - 第3题 请填入合适的代码
}
});
});
A、$(myOption).append($("#other"));
B、$("#other").append(myOption);
C、$(myOption).appendTo("#other");
D、myOption.appendTo("#other");
解析:
$(function(){
$("#add").click(function(){
/*var arrayOption=["1","2","3"];
for (var i=0;i<arrayOption.length;i++){
var myOption="<option value="+arrayOption[i]+">"
+arrayOption[i]+"</option>";
$("#other").append(myOption);
}*/
//JSON方式动态为下拉列表添加选项
var JSONOption=[
{"value":"五星","text":"非常好"},
{"value":"四星","text":"良
调用下面( B )方法不能获取和设置HTML元素的内容。
A、html()
B、content()
C、text()
D、val()
解析:
html(),text(),val()方法可以获取或设置HTML元素的内容。
使用( A )方法可以向HTML元素的后面插入内容。
A、after()
B、insert()
C、append()
D、add()
解析:
jQuery对象.after(插入内容)
使用( D )方法可以删除HTML元素的内容和所有子元素。
A、delete()
B、detach()
C、remove()
D、empty()
解析:
jQuery对象.empty()
使用( B )方法可以删除DOM中匹配的元素,并不会把匹配的元素从jQuery对象中删除,所匹配的元素上绑定的事件或附加的数据都会保留下来,在将来仍然可以使用这些匹配的元素。
A、delete()
B、detach()
C、remove()
D、empty()
解析:
jQuery对象.detach()
页面有一个<input type="text" id="name" name="name" value=""/>元素,动态设置该元素的值。正确的选项是( A )。
A、$("#name").val("动态设值");
B、$("#name").text("动态设值");
C、$("#name").html("动态设值");
D、$("#name").value("动态设值");
解析:
jQuery对象.val([设置值])
在jquey中,如果想要从DOM中删除所有匹配的元素,下面哪一个是正确的( C )。
A、delete()
B、empty()
C、remove()
D、removeAll()
解析:
DOM中删除元素:jQuery对象.remove([jQuery对象])
在页面中有一个ul元素,代码如下:
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>,下面对节点的操作哪一个说法不正确。( D )
A、var $li = $("<li title='香蕉'>香蕉</ii>"); 是创建节点。
B、$("ul").append($("<li title='香蕉'>香蕉</ii>")); 是给ul追加节点。
C、$("ul li:eq(1)").remove();是删除ul下“橘子“那个节点。
D、以上说法都不对
解析:
生成节点 $(对象名)=$(节点内容);
追加节点 jQuery对象.append(节点内容),或(节点内容).appendTo(jQuery对象)
删除节点 jQuery对象.remove([jQuery对象])、jQuery对象.detach([jQuery对象])
获取<div id="content">内容…</div>标签里的文本内容。( BC )
A、$("#content").val();
B、$("#content").html();
C、$("#content").text();
D、$("#content").innerHTML();
解析:
html()和text()方法可以获取元素的文本内容。
Val()方法用于获取元素的取值,尤其是表单中输入框的取值。
案例代码如下
<body>
<form>
用户名:<input type="text" id="username" name="username" />
密码:<input type="password" id="pwd" name=" pwd "/>
</form>
</body>
请用jquery获取username文本框输入值的内容。( ABCD )
A、$("#username").val();
B、$("input")[0].value;
C、$("input[name=username]").val();
D、$(":input[name=username]").val();
解析:
注意区别jQuery对象和DOM对象获取input标签中取值的不同方式 。
下面哪一个是用来追加到指定元素的末尾的?( BC )
A、insertAfter()
B、append()
C、appendTo()
D、after()
解析:
jQuery对象.append(追加内容),(追加内容).appendTo(jQuery对象)
下列代码的功能是( D )。
<html>
<head>
<title>event </title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
alert('helloworld');
});
});
</script>
</head>
<body>
<a href="#">test1<a><br>
<a href="#">test2<a><br>
<a href="#">test3<a><br>
<a href="#">test4<a><br>
</body>
</html>
A、给第一个超链接附加单击事件
B、给第二个超链接附加单击事件
C、给最后一个超链接附加单击事件
D、给每一个超链接附加单击事件
有如下html代码:
<input type="button" value="事件绑订" id="b1"/>
现需要使用jQuery给该按钮绑订点击事件,下列选项正确的是( A B D )。
A、$(function(){
$('#b1').click(function(){
alert('绑订成功');
});
});
B、$(function(){
$('#b1').bind('click',function(){
alert('绑订成功');
});
});
C、$(function(){
$('#b1').onclick(function(){
alert('绑订成功');
});
});
D、$(function(){
$('#b1').on('click',function(){
alert('绑订成功');
});
});
以下代码片段实现让图片先向右移动,再向下移动,最后返回原点。( A B )
请补全代码。
HTML代码如下:
<style>
<style>
#fish{
position:relative;
}
</style>
</style>
<body>
<div id="fish"><img src="images/fish.jpg" /></div>
</body>
jQuery代码如下:
$(document).ready(function(){
//请填入合适的代码
});
A、$("#fish").animate({left:300},1000)
.animate({top:200},1000)
.animate({left:0},200)
.animate({top:0},200);
B、$("#fish").animate({left:300},1000)
.animate({top:200},1000)
.animate({left:0,top:0},200);
C、$("#fish").animate({right:300},1000)
.animate({bottom:200},1000)
.animate({left:0},200)
.animate({top:0},200);
D、$("#fish").animate({top:300},1000)
.animate({left:200},1000)
.animate({left:0},200)
.animate({top:0},200);
//动画-第1题(共4题)( B )
以下代码段实现伸缩式导航菜单,首先隐藏全部子菜单;单击主菜单项时,若其子菜单为隐藏时,则滑动显示子菜单;否则滑动隐藏子菜单。
HTML代码:
<body>
<div id="top"></div>
<dl>
<dt>员工管理</dt>
<dd>
<div class="item">添加员工信息</div>
<div class="item">管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div class="item">浏览应聘信息</div>
<div class="item">添加应聘信息</div>
<div class="item">浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div class="item">薪酬登记</div>
<div class="item">薪酬调整</div>
<div class="item">薪酬查询</div>
</dd>
<dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
jQuery代码:
$(document).ready(function(){
// 动画-第1题 请选择合适的代码填空
// 动画-第2题 请选择合适的代码填空 .click(function(){
if( // 动画-第3题 请选择合适的代码填空 ){
$(this).css("backgroundImage","url(images/title_hide.gif)");
// 动画-第4题-1 请选择合适的代码填空
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
// 动画-第4题-2 请选择合适的代码填空
}
});
});
A、$("dd").show();
B、$("dd").hide();
C、$("dt").show();
D、$("dt").hide();
解析:
$(document).ready(function(){
$("dd").hide(); //隐藏全部子菜单
$("dt[class!='title']").click(function(){
if($(this).next().is(":hidden")){
// slideDown:通过高度变化(向下增长)来动态地显示所有匹配的元素
$(this).css("backgroundImage","url(images/title_hide.gif)"); //改变主菜单的背景
$(this).next().slideDown("slow");
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
$(this).next().slideUp("slow");
}
});
});
//动画-第2题(共4题)( A )
以下代码段实现伸缩式导航菜单,首先隐藏全部子菜单;单击主菜单项时,若其子菜单为隐藏时,则滑动显示子菜单;否则滑动隐藏子菜单。
HTML代码:
<HTML>
<body>
<div id="top"></div>
<dl>
<dt>员工管理</dt>
<dd>
<div class="item">添加员工信息</div>
<div class="item">管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div class="item">浏览应聘信息</div>
<div class="item">添加应聘信息</div>
<div class="item">浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div class="item">薪酬登记</div>
<div class="item">薪酬调整</div>
<div class="item">薪酬查询</div>
</dd>
<dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
</HTML>
jQuery代码:
$(document).ready(function(){
// 动画-第1题 请选择合适的代码填空
// 动画-第2题 请选择合适的代码填空 .click(function(){
if( // 动画-第3题 请选择合适的代码填空 ){
$(this).css("backgroundImage","url(images/title_hide.gif)");
// 动画-第4题-1 请选择合适的代码填空
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
// 动画-第4题-2 请选择合适的代码填空
}
});
});
A、$("dt[class!='title']")
B、$("dt[class='title']")
C、$("dd div[class!='item']")
D、$("dd div[class='item']")
解析:
$(document).ready(function(){
$("dd").hide(); //隐藏全部子菜单
$("dt[class!='title']").click(function(){
if($(this).next().is(":hidden")){
// slideDown:通过高度变化(向下增长)来动态地显示所有匹配的元素
$(this).css("backgroundImage","url(images/title_hide.gif)"); //改变主菜单的背景
$(this).next().slideDown("slow");
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
$(this).next().slideUp("slow");
}
});
});
//动画-第3题(共4题)( D )
以下代码段实现伸缩式导航菜单,首先隐藏全部子菜单;单击主菜单项时,若其子菜单为隐藏时,则滑动显示子菜单;否则滑动隐藏子菜单。
HTML代码:
<body>
<div id="top"></div>
<dl>
<dt>员工管理</dt>
<dd>
<div class="item">添加员工信息</div>
<div class="item">管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div class="item">浏览应聘信息</div>
<div class="item">添加应聘信息</div>
<div class="item">浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div class="item">薪酬登记</div>
<div class="item">薪酬调整</div>
<div class="item">薪酬查询</div>
</dd>
<dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
jQuery代码:
$(document).ready(function(){
// 动画-第1题 请选择合适的代码填空
// 动画-第2题 请选择合适的代码填空 .click(function(){
if( // 动画-第3题 请选择合适的代码填空 ){
$(this).css("backgroundImage","url(images/title_hide.gif)");
// 动画-第4题-1 请选择合适的代码填空
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
// 动画-第4题-2 请选择合适的代码填空
}
});
});
A、$(this).is(":visible")
B、$(this).is(":hidden")
C、$(this).next().is(":visible")
D、$(this).next().is(":hidden")
解析:
$(document).ready(function(){
$("dd").hide(); //隐藏全部子菜单
$("dt[class!='title']").click(function(){
if($(this).next().is(":hidden")){
// slideDown:通过高度变化(向下增长)来动态地显示所有匹配的元素
$(this).css("backgroundImage","url(images/title_hide.gif)"); //改变主菜单的背景
$(this).next().slideDown("slow");
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
$(this).next().slideUp("slow");
}
});
});
//动画-第4题(共4题)( AC )
以下代码段实现伸缩式导航菜单,首先隐藏全部子菜单;单击主菜单项时,若其子菜单为隐藏时,则滑动显示子菜单;否则滑动隐藏子菜单。
HTML代码:
<body>
<div id="top"></div>
<dl>
<dt>员工管理</dt>
<dd>
<div class="item">添加员工信息</div>
<div class="item">管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div class="item">浏览应聘信息</div>
<div class="item">添加应聘信息</div>
<div class="item">浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div class="item">薪酬登记</div>
<div class="item">薪酬调整</div>
<div class="item">薪酬查询</div>
</dd>
<dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
jQuery代码:
$(document).ready(function(){
// 动画-第1题 请选择合适的代码填空
// 动画-第2题 请选择合适的代码填空 .click(function(){
if( // 动画-第3题 请选择合适的代码填空 ){
$(this).css("backgroundImage","url(images/title_hide.gif)");
// 动画-第4题-1 请选择合适的代码填空
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
// 动画-第4题-2 请选择合适的代码填空
}
});
});
A、$(this).next().slideToggle("slow");
$(this).next().slideToggle("slow");
B、$(this).slideDown("slow");
$(this).slideUp("slow");
C、$(this).next().slideDown("slow");
$(this).next().slideUp("slow");
D、$(this).next().slideUp("slow");
$(this).next().slideDown("slow");
解析:
$(document).ready(function(){
$("dd").hide(); //隐藏全部子菜单
$("dt[class!='title']").click(function(){
if($(this).next().is(":hidden")){
// slideDown:通过高度变化(向下增长)来动态地显示所有匹配的元素
$(this).css("backgroundImage","url(images/title_hide.gif)"); //改变主菜单的背景
$(this).next().slideDown("slow");
}else{
$(this).css("backgroundImage","url(images/title_show.gif)"); //改变主菜单的背景
$(this).next().slideUp("slow");
}
});
});
以下代码实现在页面载入完成就执行按钮的单击事件,但是并不需要用户自己操作。( B )
弹框内需正常显示信息如“欢迎访问武汉职业技术学院”
HTML代码:
<body>
<input type="button" name="button" id="button" value="普通按钮" />
</body>
jQuery代码:
$(document).ready(function() {
$("input:button").bind("click",function(event,msg1,msg2){
alert(msg1+msg2);
}) //选择合适的代码填空
});
A、.trigger("click");
B、.trigger("click",["欢迎访问","武汉职业技术学院"]);
C、.trigger("click",["欢迎访问武汉职业技术学院"]);
D、.trigger("click","欢迎访问","武汉职业技术学院");
解析:
$(document).ready(function() {
$("input:button").bind("click",function(event,msg1,msg2){
alert(msg1+msg2); //弹出提示对话框
}).trigger("click",["欢迎访问","明日科技"]); //页面加载触发单击事件
});
使用( B )方法可以将HTML元素从显示状态切换为隐藏状态。
A、show()
B、hide()
C、toggle()
D、change()
使用( C )方法可以直接调节HTML元素的透明度。
A、fadeIn()
B、fadeOut()
C、fadeTo()
D、fadeToggle()
使用( A )方法可以让HTML元素向下滑动
A、slideDown()
B、slideUp()
C、slideToggle()
D、slide()
AJAX的英文全称是( B )。
A、Asp JavaScript and XML
B、Asynchronous JavaScript and XML
C、Asynchronous Java and XML
D、Asynchronous JavaScript and XHTML
解析:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
在微软的IE 5浏览器中使用( A )方法创建XMLHttpRequest对象。
A、xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
B、xmlhttp=new XMLHttpRequest
C、A和B都可以
D、A和B都不可以
解析:
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 。
在XMLhttpRequest对象发送HTTP请求之前,需要调用( B )方法初始化HTTP请求的参数。
A、req()
B、open()
C、$.post()
D、http()
解析:
AJAX - 向服务器发送请求请求
XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
在微软的IE 7及以上相当版本的浏览器中使用( B )方法创建XMLHttpRequest对象。
A、xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
B、xmlhttp=new XMLHttpRequest
C、A和B都可以
D、A和B都不可以
解析:
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 。
调用jQuery中( D )方法可以动态地从服务器加载数据,并填充调用它的HTML元素的内容。
A、$.get()
B、$.post()
C、MakeDatabase
D、load()
解析:
jQuery - AJAX load() 方法
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件("demo_test.txt")的内容:
<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
实例
$("#div1").load("demo_test.txt");
发起Ajax请求最先触发的事件为( C )。
A、beforeSend
B、ajaxSend
C、ajaxStart
D、success
解析:
调用$.ajax()、$.get()、$.load()、$.getJSON()等方法时都会触发Ajax事件。
成功的ajax请求事件流如下:
ajaxStart ->beforeSend ->ajaxSend ->success ->ajaxSuccess ->complete ->ajaxComplete ->ajaxStop
失败的ajax请求事件流如下:
ajaxStart ->beforeSend ->ajaxSend ->error ->ajaxError ->complete ->ajaxComplete ->ajaxStop
以下选项不是Ajax技术基础的是( B )。
A、XML
B、DHTML
C、CSS
D、DOM
解析:
JavaScript和XML是AJAX中重要的技术元素,但是AJAX技术远不止这两项内容,它还包括CSS样式表、XMLHttpRequest数据交换对象和DOM文档对象等技术。
下列关于AJAX的描述,错误的是( D )。
A、AJAX使用XHTML和CSS的基于标准的表示技术。
B、AJAX使用DOM进行动态显示和交互 。
C、AJAX使用XML和XSLT进行数据交换和处理。
D、AJAX 是一个新技术。
解析:
AJAX并不是一种全新的技术,而是整合了几种现有的技术:JavaScript、XML、HTML、DOM和CSS。
关于XMLHttpRequest对象readyState属性的几种状态,下列说法正确的是( D )。
A、1表示新创建
B、2表示初始化
C、3表示发送数据完毕
D、4表示接收结果完毕
解析:
XMLHttpRequest对象readyState属性存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
下列属于 AJAX中 XMLHttpRequest对象属性的是( C )。
A、length属性
B、style属性
C、status属性
D、width属性
解析:
XMLHttpRequest 对象的三个重要的属性:
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收 3: 请求处理中
4: 请求已完成,且响应已就绪
status 200: "OK"
404: 未找到页面
下列关于JSON描述错误的是( D )。
A、JSON是一种轻量级的数据交换格式。
B、JSON基于JavaScript语言模型实现的,且又完全完全独立于语言本身。
C、JSON易于人阅读和编写,同时也易于机器解析和生成。
D、JSON的创建和验证跟XML相比会比较容易。
解析:
什么是 JSON ?
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式,是存储和交换文本信息的语法。类似 XML。
JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
JSON 具有自我描述性,更易理解。
JSON 比 XML 更小、更快,更易解析。
onreadystatechange事件在( B )值改变时被触发。
A、state
B、readyState
C、status
D、readyStatus
解析:
AJAX - onreadystatechange 事件
当请求被发送到服务器时,服务器需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
可以用XMLHttpRequest对象的( A )属性来获取返回的文本。
A、responseText
B、responseHTML
C、responseContent
D、responseXML
解析:
AJAX - 服务器响应
如需获得来自服务器的响应,可使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
下列代码片断(AJAX第1-4题)是一个简单的AJAX应用,在客户端异步请求服务器端的Try.txt文件,并显示内容,请将其补充完整。( D )
//Ajax代码填空 - 第1题
function LoadText()
{
var XMLHttp;
if (window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest;
}else{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//Ajax代码填空 - 第1题
XMLHttp.send();
//Ajax代码填空 - 第2题 =function(){
if( Ajax代码填空 - 第3题 )
document.getElementById("myDiv").innerHTML= Ajax代码填空 - 第4题 ;
}
}
}
window.οnlοad=function(){
document.getElementById("btn").οnclick=function(){
LoadText();
}
A、XMLHttp.onreadystatechange
B、XMLHttp.responseText
C、XMLHttp.readyState==4 && XMLHttp.status==200
D、XMLHttp.open("GET","Try.txt?t=" + Math.random(),true);
解析:
function LoadText()
{
//创建XMLHttpRequest对象
var XMLHttp;
if (window.XMLHttpRequest){
//IE 7以上浏览器
XMLHttp=new XMLHttpRequest;
}else{
//IE 6、5浏览器
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttp.open("GET","AjaxTry.txt",true);
XMLHttp.send();
XMLHttp.onreadystatechange=function(){
//检测XMLHttpRequest对象的执行状态
if(XMLHttp.readyState==4 && XMLHttp.status==200){
//将请求到的数据显示到页面
document.getElementById("myDiv").innerHTML=XMLHttp.responseText;
}
下列代码片断(AJAX第1-4题)是一个简单的AJAX应用,在客户端异步请求服务器端的Try.txt文件,并显示内容,请将其补充完整。( A )
//Ajax代码填空 - 第2题
function LoadText()
{
var XMLHttp;
if (window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest;
}else{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//Ajax代码填空 - 第1题
XMLHttp.send();
//Ajax代码填空 - 第2题 =function(){
if( Ajax代码填空 - 第3题 )
document.getElementById("myDiv").innerHTML= Ajax代码填空 - 第4题 ;
}
}
}
window.οnlοad=function(){
document.getElementById("btn").οnclick=function(){
LoadText();
}
A、XMLHttp.onreadystatechange
B、XMLHttp.responseText
C、XMLHttp.readyState==4 && XMLHttp.status==200
D、XMLHttp.open("GET","Try.txt?t=" + Math.random(),true);
解析:
function LoadText()
{
//创建XMLHttpRequest对象
var XMLHttp;
if (window.XMLHttpRequest){
//IE 7以上浏览器
XMLHttp=new XMLHttpRequest;
}else{
//IE 6、6浏览器
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttopen("GET","AjaxTry.txt",true);
XMLHttp.send();
XMLHttp.onreadystatechange=function(){
//检测XMLHttpRequest对象的执行状态
if(XMLHttp.readyState==4 && XMLHttp.status==200){
//将请求到的数据显示到页面
document.getElementById("myDiv").innerHTML=XMLHttp.responseText;
}
&
下列代码片断(AJAX第1-4题)是一个简单的AJAX应用,在客户端异步请求服务器端的Try.txt文件,并显示内容,请将其补充完整。( C )
//Ajax代码填空 - 第3题
function LoadText()
{
var XMLHttp;
if (window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest;
}else{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//Ajax代码填空 - 第1题
XMLHttp.send();
//Ajax代码填空 - 第2题 =function(){
if( Ajax代码填空 - 第3题 )
document.getElementById("myDiv").innerHTML= Ajax代码填空 - 第4题 ;
}
}
}
window.οnlοad=function(){
document.getElementById("btn").οnclick=function(){
LoadText();
}
A、XMLHttp.onreadystatechange
B、XMLHttp.responseText
C、XMLHttp.readyState==4 && XMLHttp.status==200
D、XMLHttp.open("GET","Try.txt?t=" + Math.random(),true);
解析:
function LoadText()
{
//创建XMLHttpRequest对象
var XMLHttp;
if (window.XMLHttpRequest){
//IE 7以上浏览器
XMLHttp=new XMLHttpRequest;
}else{
//IE 6、7浏览器
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHtten("GET","AjaxTry.txt",true);
XMLHttp.send();
XMLHttp.onreadystatechange=function(){
//检测XMLHttpRequest对象的执行状态
if(XMLHttp.readyState==4 && XMLHttp.status==200){
//将请求到的数据显示到页面
document.getElementById("myDiv").innerHTML=XMLHttp.responseText;
}
&nb
下列代码片断(AJAX第1-4题)是一个简单的AJAX应用,在客户端异步请求服务器端的Try.txt文件,并显示内容,请将其补充完整。( B )
//Ajax代码填空 - 第4题
function LoadText()
{
var XMLHttp;
if (window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest;
}else{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//Ajax代码填空 - 第1题
XMLHttp.send();
//Ajax代码填空 - 第2题 =function(){
if( Ajax代码填空 - 第3题 )
document.getElementById("myDiv").innerHTML= Ajax代码填空 - 第4题 ;
}
}
}
window.οnlοad=function(){
document.getElementById("btn").οnclick=function(){
LoadText();
}
A、XMLHttp.onreadystatechange
B、XMLHttp.responseText
C、XMLHttp.readyState==4 && XMLHttp.status==200
D、XMLHttp.open("GET","Try.txt?t=" + Math.random(),true);
解析:
function LoadText()
{
//创建XMLHttpRequest对象
var XMLHttp;
if (window.XMLHttpRequest){
//IE 7以上浏览器
XMLHttp=new XMLHttpRequest;
}else{
//IE 6、8浏览器
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHtt("GET","AjaxTry.txt",true);
XMLHttp.send();
XMLHttp.onreadystatechange=function(){
//检测XMLHttpRequest对象的执行状态
if(XMLHttp.readyState==4 && XMLHttp.status==200){
//将请求到的数据显示到页面
document.getElementById("myDiv").innerHTML=XMLHttp.responseText;
}
下列代码片断是一个简单的AJAX应用,在客户端异步请求服务器端的load_text.txt文件,并显示内容,请将其补充完整。( D )
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
$(function(){
$("#btn").click(function(){
//使用load()方法来执行Ajax,并将文件内容显示到DIV中(ID:myDiv)
// Ajax代码填空
});
});
</head>
<body>
<div id="myDiv"></div></br>
<button id="btn">修改内容</button>
</body>
</html>
A、$.load("load_text.txt" #myDiv);
B、$.load("load_text.txt",#myDiv);
C、$("#myDiv").load("load_text");
D、$("#myDiv").load("load_text.txt");
解析:
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
- 必需的 URL 参数规定您希望加载的 URL。
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件("demo_test.txt")的内容:
<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
实例
$("#div1").load("demo_test.txt");
// getJSON代码填空 - 第1题 (共2题)( A )
下列代码片断是一个简单的AJAX应用,在客户端异步请求服务器端的test.json文件,并加载相应内容,请将其补充完整。
test.json文件如下:
[
{
"name":"轻鸿",
"sex":"女",
},
{
"name":"无语",
"sex":"男",
}
]
html文件内容如下:
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
$(function(){
//使用getJSON()方法来执行Ajax,并将json文件的内容显示到DIV中(ID:json)
// getJSON代码填空 - 第1题
var htmlStr = "";
$.each(data,function(index,info){
htmlStr+="姓名:"+ // getJSON代码填空 - 第2题 -(1) +"<br/>";
htmlStr+="性别:"+ // getJSON代码填空 - 第2题 -(2) +"<br/><br/>";
})
$("#json").html(htmlStr);
})
});
</head>
<body>
<div id="json"></div>
</body>
</html>
A、$.getJSON("test.json",function(data){
B、$.getJSON("test.js",function(data){
C、$.getJSON("test.json",function(result){
D、$.getJSON("test.js",function(result){
解析:
jQuery getJSON()方法
getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
语法:
$(selector).getJSON(url,data,success(data,status,xhr))
参数 描述
url 必需。规定将请求发送到哪个 URL。
data 可选。规定发送到服务器的数据。
success(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数:
data - 包含从服务器返回的数据
status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
// getJSON代码填空 - 第2题 (共2题)( C )
下列代码片断是一个简单的AJAX应用,在客户端异步请求服务器端的test.json文件,并加载相应内容,请将其补充完整。
test.json文件如下:
[
{
"name":"轻鸿",
"sex":"女",
},
{
"name":"无语",
"sex":"男",
}
]
html文件内容如下:
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
$(function(){
//使用getJSON()方法来执行Ajax,并将json文件的内容显示到DIV中(ID:json)
// getJSON代码填空 - 第1题
var htmlStr = "";
$.each(data,function(index,info){
htmlStr+="姓名:"+ // getJSON代码填空 - 第2题 -(1) +"<br/>";
htmlStr+="性别:"+ // getJSON代码填空 - 第2题 -(2) +"<br/><br/>";
})
$("#json").html(htmlStr);
})
});
</head>
<body>
<div id="json"></div>
</body>
</html>
A、data['name'],data['sex']
B、data[name],data[sex]
C、info['name'],info['sex']
D、info[name],info[sex]
解析:
jQuery getJSON()方法
getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
语法:
$(selector).getJSON(url,data,success(data,status,xhr))
参数 描述
url 必需。规定将请求发送到哪个 URL。
data 可选。规定发送到服务器的数据。
success(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数:
data - 包含从服务器返回的数据
status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
// .ajax()方法 代码填空 - 第1题 (共3题)( D )
下列代码片断是一个简单的AJAX应用,在客户端异步请求服务器端的runner.xml文件,并加载相应内容,请将其补充完整。
runner.xml文件如下:
<?xml version="1.0" encoding="utf-8"?>
<runners>
<runner>
<name>John</name>
<gender>m</gender>
<time>25:31</time>
</runner>
<runner>
<name>Mary</name>
<gender>f</gender>
<time>26:01 </time>
</runner>
</runners>
html文件内容如下:
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
$(function(){
//使用ajax()方法来执行Ajax,并将XML文件的内容显示到DIV中(ID:myDiv)
//请求类型为GET,服务器响应的数据类型为XML,返回的数据为result
// ajax方法代码填空 - 第1题
$("#myDiv").empty();
// ajax方法代码填空 - 第2题 .find("runner").each(function(){
var inf="<li>name: "+ // ajax方法代码填空 - 第3题 +"</li>"
$("#myDiv").append(inf);
});
}
});
});
</head>
<body>
<div id="json"></div>
</body>
</html>
A、$.ajax({type:"POST",
url:"runner.xml",
dataType:"xml",
success:function(result){
B、$.ajax({type:"POST",
url:"runner.xml",
dataType:"json",
success:function(result){
C、$.ajax({type:"GET",
url:"runner.xml",
dataType:"xml",
success:function(xml){
D、$.ajax({type:"GET",
url:"runner.xml",
dataType:"xml",
success:function(result){
解析:
jQuery ajax() 方法
http://www.runoob.com/jquery/ajax-ajax.html
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。
// .ajax()方法 代码填空 - 第2题 (共3题)( C )
下列代码片断是一个简单的AJAX应用,在客户端异步请求服务器端的runner.xml文件,并加载相应内容,请将其补充完整。
runner.xml文件如下:
<?xml version="1.0" encoding="utf-8"?>
<runners>
<runner>
<name>John</name>
<gender>m</gender>
<time>25:31</time>
</runner>
<runner>
<name>Mary</name>
<gender>f</gender>
<time>26:01 </time>
</runner>
</runners>
html文件内容如下:
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
$(function(){
//使用ajax()方法来执行Ajax,并将XML文件的内容显示到DIV中(ID:myDiv)
//请求类型为GET,服务器响应的数据类型为XML,返回的数据为result
// ajax方法代码填空 - 第1题
$("#myDiv").empty();
// ajax方法代码填空 - 第2题 .find("runner").each(function(){
var inf="<li>name: "+ // ajax方法代码填空 - 第3题 +"</li>"
$("#myDiv").append(inf);
});
}
});
});
</head>
<body>
<div id="json"></div>
</body>
</html>
A、result
B、$result
C、$(result)
D、$("result")
解析:
jQuery ajax() 方法
http://www.runoob.com/jquery/ajax-ajax.html
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。
// .ajax()方法 代码填空 - 第3题 (共3题)( B )
下列代码片断是一个简单的AJAX应用,在客户端异步请求服务器端的runner.xml文件,并加载相应内容,请将其补充完整。
runner.xml文件如下:
<?xml version="1.0" encoding="utf-8"?>
<runners>
<runner>
<name>John</name>
<gender>m</gender>
<time>25:31</time>
</runner>
<runner>
<name>Mary</name>
<gender>f</gender>
<time>26:01 </time>
</runner>
</runners>
html文件内容如下:
<html lang="en">
<head>
<script src="jquery-3.1.1.min.js"></script>
$(function(){
//使用ajax()方法来执行Ajax,并将XML文件的内容显示到DIV中(ID:myDiv)
//请求类型为GET,服务器响应的数据类型为XML,返回的数据为result
// ajax方法代码填空 - 第1题
$("#myDiv").empty();
// ajax方法代码填空 - 第2题 .find("runner").each(function(){
var inf="<li>name: "+ // ajax方法代码填空 - 第3题 +"</li>"
$("#myDiv").append(inf);
});
}
});
});
</head>
<body>
<div id="json"></div>
</body>
</html>
A、$(this).find("name")
B、$(this).find("name").text()
C、$this.name
D、$this.find("name").text()
解析:
jQuery ajax() 方法
http://www.runoob.com/jquery/ajax-ajax.html
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。
下列代码片断使用AJAX技术实现异步提交表单,并显示内容,请将其补充完整。( ABCD )
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
//提示:序列化表单内容并显示在div中
// 序列化表单代码填空
});
});
</script>
</head>
<body>
<form id="nameForm" action="">
第一个名称: <input type="text" name="FirstName" value="Mickey" /><br>
最后一个名称: <input type="text" name="LastName" value="Mouse" /><br>
</form>
<button>序列化表单值</button>
<div></div>
</body>
</html>
A、$("div").text($("form").serialize());
B、$("div").html($("form").serialize());
C、$("div").html($("#nameForm").serialize());
D、$("div").append($("#nameForm").serialize());
解析:
jQuery serialize() 方法
serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
你可以选择一个或多个表单元素(如输入和/或文本区),或表单元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法
$(selector).serialize()