jQuery面试题-2017年7月1日

一、jQuery的美元符号$是什么意思有什么作用？

$是jQuery的别名，就代表了jQuery对象
例如，$(“div”) 和 jQuery(“div”)是等价的。
jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$(“#main”)即选中id为main的元素。

二、body的onload( )函数和jQuery的document.ready( )有什么区别？

我们可以在页面中使用多个document.ready( ),但只能使用一次onload( )
document.ready( )在页面DOM元素加载完成后就会被调用，而onload( )则会在所有的关联资源（包括音频、图像）加载完成后会调用

三、jQuery中有哪几种类型的选择器？

基本选择器

1、 id选择器

例子：将id=”one”的元素背景色设置为黑色。（id选择器返单个元素）

    $(document).ready(function () {$('#one').css('background', '#000');});

2、 class选择器

例子：将class=”cube”的元素背景色设为黑色

    $(document).ready(function () {$('.cube').css('background', '#000');
});

3、 element（元素）选择器

例子：将p元素的文字大小设置为12px

    $(document).ready(function () {$('p').css('font-size', '12px');
});

4、 * 选择器（遍历所有元素）

例子：

    $(document).ready(function () {// 遍历form下的所有元素，将字体颜色设置为红色$('form *').css('color', '#FF0000');
});

5、并列选择器

例子：

    $(document).ready(function () {// 将p元素和div元素的margin设为0$('p, div').css('margin', '0');
});

层次选择器

1、 parent > child（直系子元素）

    $(document).ready(function () {// 选取div下的第一代span元素，将字体颜色设为红色$('div > span').css('color', '#FF0000');});

2、 prev + next（下一个兄弟元素，等同于next()方法）

    $(document).ready(function () {// 选取class为item的下一个div兄弟元素$('.item + div').css('color', '#FF0000');// 等价代码//$('.item').next('div').css('color', '#FF0000');
});//下面的代码，只有123和789会变色<p class="item"></p><div>123</div><div>456</div><span class="item"></span><div>789</div>

3、prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function () {// 选取class为inside之后的所有div兄弟元素$('.inside ~ div').css('color', '#FF0000');// 等价代码//$('.inside').nextAll('div').css('color', '#FF0000');
});// 下面的代码，G2和G4会变色<div class="inside">G1</div><div>G2</div><span>G3</span><div>G4</div>

过滤选择器——基本过滤选择器

1、 first和:last（取第一个元素或最后一个元素）

$(document).ready(function () {$('span:first').css('color', '#FF0000');$('span:last').css('color', '#FF0000');});下面的代码，G1（first元素）和G3（last元素）会变色<span>G1</span><span>G2</span><span>G3</span>

2、 not（取非元素）

    $(document).ready(function () {$('div:not(.wrap)').css('color', '#FF0000');});下面的代码，G1会变色<div>G1</div><div class="wrap">G2</div>但是，请注意下面的代码：<div>G1<div class="wrap">G2</div></div>当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

3、 even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

    $(document).ready(function () {$('tr:even').css('background', '#EEE'); // 偶数行颜色$('tr:odd').css('background', '#DADADA'); // 奇数行颜色});//A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA <table width="200" cellpadding="0" cellspacing="0"><tbody><tr><td>A</td></tr><tr><td>B</td></tr><tr><td>C</td></tr><tr><td>D</td></tr></tbody></table>

4、 eq(x)（取指定索引的元素）

    $(document).ready(function () {$('tr:eq(2)').css('background', '#FF0000');}); //更改第三行的背景色，在上面的代码中C的背景会变色。

5、 gt(x)和:lt(x) （取大于x索引或小于x索引的元素）

    $(document).ready(function () {$('ul li:gt(2)').css('color', '#FF0000');$('ul li:lt(2)').css('color', '#0000FF');});//  L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色<ul><li>L1</li><li>L2</li><li>L3</li><li>L4</li><li>L5</li></ul>

6、 header（取H1~H6标题元素）

    $(document).ready(function () {$(':header').css('background', '#EFEFEF');});// 下面的代码，H1~H6的背景色都会变<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6>

过滤选择器——内容过滤选择器

1、 contains(text)（取包含text文本的元素）

    $(document).ready(function () {// dd元素中包含"jQuery"文本的会变色$('dd:contains("jQuery")').css('color', '#FF0000');});//下面的代码，第一个dd会变色<dl><dt>技术</dt><dd>jQuery, .NET, CLR</dd><dt>SEO</dt><dd>关键字排名</dd><dt>其他</dt><dd></dd></dl>

2、 empty（取不包含子元素或文本为空的元素）

    $(document).ready(function () {$('dd:empty').html('没有内容');});//下面第三个dd会显示"没有内容"文本<dl><dt>技术</dt><dd>jQuery, .NET, CLR</dd><dt>SEO</dt><dd>关键字排名</dd><dt>其他</dt><dd></dd></dl>

3、 has(selector)（取选择器匹配的元素）

    $(document).ready(function () {// 为包含span元素的div添加边框$('div:has(span)').css('border', '1px solid #000');});// 即使span不是div的直系子元素，也会生效，即是B会有边框<div><h2>A<span>B</span></h2></div>

4、 parent（取包含子元素或文本的元素）

    $(document).ready(function () {$('ol li:parent').css('border', '1px solid #000');});// 下面的代码，A和D所在的li会有边框<ol><li></li><li>A</li><li></li><li>D</li></ol>

-过滤选择器—— 可见性过滤选择器

1、 hidden（取不可见的元素）

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
下面的代码，先弹出”hello”对话框，然后hid-1会显示，hid-2仍然是不可见的。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"><title></title><style type="text/css">div{margin: 10px;width: 200px;height: 40px;border: 1px solid #FF0000;display:block;}.hid-1{display: none;}.hid-2{visibility: hidden;}</style><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$('div:hidden').show(500);alert($('input:hidden').val());});</script>
</head>
<body><div class="hid-1">display: none</div><div class="hid-2">visibility: hidden</div><input type="hidden" value="hello"/>
</body>
</html>

2、 visible（取可见的元素）

    <script type="text/javascript">$(document).ready(function() {$('div:visible').css('background', '#EEADBB');});
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>jQuery选择器大全
</div>

过滤选择器——属性过滤选择器

1、 [attribute]（取拥有attribute属性的元素）

下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线

<script type="text/javascript">$(document).ready(function() {$('a[title]').css('text-decoration', 'none');});</script>       <ul><li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li><li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li><li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li><li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li><li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li><li><a href="#" class="item">其他</a></li></ul>

2、 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）

表单选择器

1、:input表单选择器

2、:text表单文本选择器

3、:password表单密码选择器

4、:radio单选按钮选择器

5、:checkbox复选框选择器

6、:submit提交按钮选择器

7、:image图像域选择器

8、:button表单按钮选择器

9、:checked选中状态选择器

10、:selected选中状态选择器

四、请使用jQuery将页面上的所有元素边框设置为红色2px宽的虚线？

<script language="javascript" type="text/javascript">$("*").css("border", "2px dotted red"); </script>

五、当CDN上的jQuery文件不可用时，该怎么办？

<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script><script type='text/javascript'>//<![CDATA[if (typeof jQuery == 'undefined') {document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));}//]]></script>

六、如何使用jQuery实现点击按钮弹出一个对话框？

HTML：<input id="inputField" type="text" size="12"/>jQuery：<script type="text/javascript"> $(document).ready(function () { alert($('#inputField').attr("value")); }); });</script>

七、jQuery中的Delegate()函数有什么作用？

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){$(this).hide();});

2、当元素在当前页面中不可用时，可以使用delegate()

八、怎样用jQuery编码和解码URL？

使用encodeURL()方法可以对字符串或URL进行URL编码，也可以decodeURL()方法进行解码，简单的代码如下：

<html><body><script type="text/javascript">document.write(encodeURI("https://www.baidu.com//My first/")+ "<br />")document.write(decodeURI("http://www.w3school.com.cn/My%20first/")+ "<br />")document.write(encodeURI(",/?:@&=+$#"))</script></body>
</html>

运行结果：

九、如何用jQuery禁用浏览器的前进后退按钮？

<script type="text/javascript" language="javascript">$(document).ready(function() {window.history.forward(1);//ORwindow.history.forward(-1);});</script>

十、你为什么要使用jQuery？你觉得jquery有哪些好处？

因为jQuery是轻量级的框架，大小不到30kb
它有强大的选择器，出色的DOM操作的封装
有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)
完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。)
出色的浏览器的兼容性
支持链式操作，隐式迭代
行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富

jQuery面试题-2017年7月1日相关推荐

数学分析高等代数考研试题荟萃[更新至2017年10月1日]
数学分析高等代数考研试题荟萃[更新至2017年10月1日], 需要的话见: http://www.followmath.com/forum.php?mod=viewthread&tid=469 ...
2017年12月6日学习笔记（JAVA面试题）
前段时间都在泡图书馆,看<java核心技术卷1>.感觉好多东西会用了,但是并不知道底层实现原理,还有好多没见过的知识点概念.觉得果然还是要多读书. 接下来准备边读书,边把各种面试题提及的知 ...
2017年2月12日GRE考试报名费用公布
2017年2月12日GRE考试费介绍:小编为大家带来2017年2月12日GRE考试报名各项费用介绍,及相关注意事项,希望对大家GRE备考有所帮助. 2017年2月12日GRE考试费介绍 GRE考生注意 ...
最新手机号段归属地数据库(2017年4月16日版)免费下载
2017年4月16日版 360569条记录最新手机号段数据库号码归属地数据库移动号段联通号段电信号段 14号段 170号段(虚拟运营商) 权威全面准确规范字段包括 ...
2017年10月31日结束Outlook 2007与Office 365的连接
2017 年10月31日 ,微软即将推出 Office 365中Exchange Online邮箱将需要Outlook for Windows的连接,即通过HTTP Over MAPI方式,传统使用R ...
2017年3月14日上午日志
2017年3月14日上午复习了高等数学,观看了张宇高等数学第七讲教学视频考研数学命题的新颖性第三种类型逻辑推理题型举反例的方法,积累了更多学习技巧,对线性代数部分的行列式概念有了初步了解,晚上看相应部 ...
京东发力金融AI，欲再招50位金融AI顶级科学家转载 2017年12月04日 00:00:00 42 12月1日，京东金融AI实验室在美国硅谷正式投入运营。亦在同一天，京东金融宣布，美国伊利诺伊大
京东发力金融AI,欲再招50位金融AI顶级科学家转载 2017年12月04日 00:00:00 42 12月1日,京东金融AI实验室在美国硅谷正式投入运营.亦在同一天,京东金融宣布,美国伊利诺伊大学 ...
python pandas dataframe 行列选择，切片操作原创 2017年02月15日 21:43:18 标签： python 30760 python pandas dataframe
python pandas dataframe 行列选择,切片操作原创 2017年02月15日 21:43:18 标签: python / 30760 编辑删除 python pandas dat ...
2017年度盘点：15个最流行的GitHub机器学习项目 By 机器之心2017年12月21日 15:23 在本文中，作者列出了 2017 年 GitHub 平台上最为热门的知识库，囊括了数据科学、机
2017年度盘点:15个最流行的GitHub机器学习项目 By 机器之心2017年12月21日 15:23 在本文中,作者列出了 2017 年 GitHub 平台上最为热门的知识库,囊括了数据科学.机 ...

jQuery面试题-2017年7月1日

jQuery面试题-2017年7月1日相关推荐

最新文章

热门文章