Web前端JQuery面试题(二)

1.请写出jquery的语法?

<script type="text/javascript">
 $(document).ready(function(){
  // 程序段
 })
</script>

window.onload=function(){
 // 程序段
}

前者效率高
$(function(){
 // 程序段
})

2.请问什么是DOM对象?

DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。

var txt = document.getElementById("text").value;

3.请问什么是jquery对象?

通过jquery自身的方法获取页面元素的对象,就是jquery对象。

var txt = $("#text").val();
$("#text").toggleClass("txtClick").html("点击后切换样式");

4.jquery选择器有哪些?

jquery选择器有:基本选择器,层次选择器,过滤选择器,表单选择器四大类。

过滤选择器分6种:简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象属性过滤选择器。

基本选择器:

#id 根据给定的id进行匹配一个元素
element 根据给定的元素名进行匹配所有元素
.class 根据给定的类匹配该类的所有元素
* 匹配所有元素
selector1,selector2 匹配给定的元素,合并一起

层次选择器:

ancestor descendant 根据祖先元素匹配所有后代的元素
祖先和后代的关系
parent > child 根据父元素匹配所有的子元素
父子的关系
prev + next 根据prev元素匹配后面的所有相邻元素
于.next()相同,prev元素后的下一个元素
prev ~ siblings 匹配prev元素后的所有兄弟元素
于.nextAll()相同,prev元素后的所有相邻元素,获取元素后面的全部相邻元素
.siblings()方法,获取前后所有相邻的元素

简单过滤选择器器:

:animated 获取执行正在动画效果的元素
:header 获取所有标题类型的元素
:lt(index) 获取小于给定索引值的元素
:gt(index) 获取大于给定索引值的元素
:eq(index) 获取给定的索引值的元素,从0开始
:odd 获取奇数的元素
:even 获取偶数的元素
:not(selector) 获取除给定选择器外的所有元素
first() 或 :first 获取第一个元素
last() 或 :last 获取最后一个元素

内容过滤选择器:

:contains(text) 获取包含给定文本的元素
:empty 获取所有不包含子元素或文本的空元素
如:<div></div>
:has(selector) 获取含所选择器的所有元素
:parent 获取含有子元素或文本的元素
如:<div>dashu</div>, <div><p></p></div>

可见性过滤选择器:

:hidden 获取所有不可见元素
:visible 获取所有的可见元素

属性过滤选择器:

[attribute]
获取给定属性的元素
[attribute = value]
匹配给定的属性是某个特定值的元素
[attribute != value]
匹配所有不含有特定的属性
[attribute ^= value]
匹配给定的属性以某值开始的元素
[attribute $= value]
匹配给定的属性以某值结尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同时满足多个条件使用

子元素过滤选择器:

:nth-child
从1开始的,匹配每个父元素下第n个元素
$("ul li:nth-child(2)"); 获取2 3 4。。

:first-child
匹配每个父元素下的第一个子元素

:last-child
匹配每个父元素下的最后一个子元素

:only-child
匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配

表单对象属性过滤选择器:

:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中元素
:selected
匹配所有选中option元素

表单选择器:

:input
会获取所有input,textarea,select,button
:text
匹配所有单行文本元框
:password
匹配所有密码框
:radio
匹配所有单选按钮
:checkbox
匹配所有复选框
:submit
匹配所有提交按钮
:image
匹配所有图像
:reset
匹配所有重置按钮
:button
匹配所有按钮
:file
匹配所有文本域

5.请问你能写出dom结构吗?

html下head,body
head下title,style
body下table,div,p,ul
table下tr
div下span
ul下li

6.给定属性操作,描述作用

attr(): 可以获取元素的属性和属性值

attr(key,value):可以设置元素的属性

removeAttr():可以删除指定的属性

html(): 获取Html内容
html(val): 设置Html内容

text(): 获取元素的文本内容
text(val): 设置元素的文本内容

val():
获取元素的值
val(val):
为元素设置值
val().join(","):
获取选中的多个选项值,用于获取select中多个选项值

设置元素样式
css(name,value); name 样式名称,value样式值

添加样式
addClass(class) 和 addClass(class0 class1 ...)

切换样式
toggleClass(class) 如果有该类class就删除,如果没有就添加
进行方法间的切换效果

删除类
removeClass(class);

创建节点元素,动态创建页面元素: $(html)

var $p = $("<p>dashucoding</p>");

内部插入

append(content) : 向所选择的元素内部插入内容
$("body").append($div);
append(function (index,html)) 同上

appendTo: 把选择的元素追加到另一个指定的元素中

appendTo(content)将一个元素插入另一个指定的元素中
前部分的内容插入其后部分的内容

$("span").appentTo($("div"));

prepend(coontent): 向每个所选择的的元素内部前置内容
prepend(function(index,html))
prependTo(content)

外部插入

after(content): 向所选择的元素外部后面插入内容
after(function)

before(content): 向所选择的元素外部前面插入内容
before(function)

insertAfter(content) 选择的元素插入另一个元素外部后面
insertBefore(content) 选择元素插入另一个元素外部前面

复制节点

clone()复制元素本身和clone(true)复制元素和所有功能

$(this).clone().appendTo("span"); 和 $(this).clone(true).apendTo("span");

替换节点

replaceWith(content)
将选择的元素替换成指定内容

$("span").replaceWith("<p>dashu</p>");

replaceAll(selector)
将选择的元素替换成指定的selector的元素

$("<p>dashu</p>").replaceAll("#text");

包裹节点

wrap(html): 将所有选择的元素用其他字符串代码包裹起来
wrap(elem): 将所有选择的元素用其他Dom元素包裹起来

wrap(fn)
unwrap() 移除所选元素的父元素或包裹的标记

wrapAll(html),wrapAll(elem)

wrapInner(html),wrapInner(elem)

wrapInner(fn)

wrap(html), wrapInner(html);

包裹外部元素
包裹元素内部的文本

<p><span>da</span></p>

$("p").wrap("<b></b>");
<b><p><span>da</span></p></b>

$("span").wrapInner("<i></i>");
<p><span><i>da</i></span></p>

遍历元素

each()方法进行元素的遍历

删除元素

remove()删除该元素和empty()清空全部节点或所有后代元素

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

原文地址:https://www.cnblogs.com/dashucoding/p/10414907.html

时间: 2024-11-03 20:56:41

Web前端JQuery面试题(二)的相关文章

Web前端JQuery面试题(三)

1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面中全部元素加载到浏览器中才执行,如果页面中存在大量图片,要等这些内容加载完毕. ready()方法只要页面的dom模型加载完毕即可,就会触发ready(). 3.请写出 ready()相同方法? $(document).ready(function(){}); $(function(){}); jQuery(document).rea

web前端整套面试题(二)--今日头条面试题

12道单选,7道不定项选择,2道编程题 一.单选(12题) 1.[单选题]在HTML中,( )可以在网页上通过链接直接打开邮件客户端发送邮件. A.<a href=”telnet:[email protected]”>发送邮件</a> B.<a href=”mail:[email protected]”>发送邮件</a> C.<a href=”mailto:[email protected]”>发送邮件</a> D.<a hre

Web前端JQuery面试题(一)

一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一个元素,用于搜索,通过id的属性给定值. 案例:查找id为da3的元素 html代码: <div id="da1"></div> <div id="da2"></div> <div id="da3"></div>

web前端工程师 面试题

今天刚结束一场面试(含笔试),对自己的表现不太满意,感觉没有发挥好应有的水平,也只能怪自己平时没有及时积累和整理知识,准备也不充分. 就不扯那么多了,下面是我面试时,没能答上或者觉自己回答的不够好的题目. 1.position 属性规定元素的定位类型 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom&

web前端常见笔试题总结

一.常见javascript笔试题 1.  var a = 1; delete a; console.log( typeof a); //number 显示生命的全局变量不能被删除 如果是 a = 1;   delete a; console.log(typeof a) //undefined; 隐式声明的全局变量可以删除 2.用一行代码实现字符串翻转 如: str="abcdefg",翻转后str="gfedcba"; var a = str.split('').

web前端工程师面试题

[HTML && CSS]--来自百度文库 1. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? Doctype 声明位于文档中的最前面的位置,处于标签之前.此标签可告知浏览器文档使用哪种 HTML 或XHTML 规范. 该标签可声明三种DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性.为了实现这一点,他们创 建了两种呈现模式:标准模式和混杂模式(quirks mode)

Web前端面试笔试题总结

最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面希望看到本文的伙伴能自己去找答案,毕竟,技术只有自己真正理解了才是自己的东西,共勉. 小白第一次发文,恭请指点. Web前端面试笔试题 Html+css 1.对WEB标准以及w3c的理解与认识. 2.Xhtml和html有什么区别. 3.css的引入方式有哪些?link和@import的区别是? 4

Python之Web前端jQuery扩展

Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 以下表单验证使用两种方式简单实现: (一). 使用DOM表单验证 (二). 使用jQuery表单验证 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证DOM<

web前端开发面试题

转自:http://segmentfault.com/a/1190000000465431 问题 此部分用于自测.如有疑惑,可参看后文的答案部分. HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 介绍一下CSS的盒子模型? link 和@import 的区别是? CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 如何居中div?如何居中一个浮动元素? 浏览器的内核分别是