jQuery常见面试题之DOM操作详析


Posted in jQuery onJuly 05, 2017

前言

关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。

面试题一:JQ中html()、text()和val()区别?

面试题二:JQ中find()、has()和filter()区别?

面试题三: closet()和parents()区别?

答案请在文中查找...

DOM操作有三类:DOM-core、HTML-DOM 、CSS-DOM

一、插入节点

我们用的最多的就是append和apendTo,其实共有8种方法。

jQuery常见面试题之DOM操作详析
插入节点

二、删除节点

remove() :删除节点,并删除元素节点绑定的事件。

empty() :清空节点元素的内容,类似$().html(' ')

三、克隆(复制)节点

$().clone() ,只复制节点,不复制方法和事件。

添加clone(true) ,不仅复制节点,也复制方法,也叫深度克隆。

四、替换节点

$('new').replaceWith('old')  ,返回new元素。

$('old').replaceAll('new') ,返回old元素。

如果在替换之前,已为元素绑定事件,替换后原有绑定事件将会被替换的元素一起消失,需要在新元素上重新绑定事件。

五、包裹节点

$('span').wrapAll('<div>') :将所有元素用一个元素包裹。

wrap() :将所有元素单独包裹。

wrapInner:包裹元素内容。

unwrap() :删除包裹,删除父元素,不包含body。

六、遍历节点

children() :只考虑子元素,不考虑后代元素。

next() :同辈紧邻后面一个元素。

nextAll() :同辈紧邻后面所有兄弟元素。

prev() :同辈紧邻前一个兄弟元素。

prevAll() :同辈紧邻前所有兄弟元素。

siblings() :同辈所有兄弟元素。

find('span') :返回被选元素的后代元素,括号内必填写,如果查找所有后代使用 "*",起查找作用。

filter('div') :指定选择器的xx元素,括号内必填写,符合条件的同级元素,非后代元素,起过滤作用。

has(‘div') :符合条件的后代元素,不包含自身,括号内必填写,起过滤作用。

parents() :获取所有祖先元素,参数为筛选条件。

closest(‘.new') :用来取得最近的匹配元素,包括自身。首选检查自身是否符合,如果符合返回元素本身;如果不匹配,向上查找父元素,逐级向上直到匹配到选择器的元素。如果什么没找到,返回一个空的jq对象。必须填写筛选条件,且只能找到一个元素。

parentsUntil() :截止到xx位置的祖先节点。

七、属性及样式操作

$().css() :修改css样式。设置后,显示为内联样式。

$().attr('title') :获取title属性。

$().removeAttr(title') :删除title属性。

$().addClass(‘new') :添加class的名字,不是选择器,故不是“.new”。

$().removeClass(‘new') :与上相反。

$().toggle()

$().toggleClass()

$().hasClass() :判断某元素是否有某个class。

八、内容操作

$().html() :获取内容,含html标签,可以用于XHTML,但不能用于XML。

$().text() :获取文本内容,不含标签。可以用于XHTML和XML,支持所有浏览器,原生innerText火狐不支持。

$().val() :获取表单元素的内容。

下面说说三者的异同点:

jQuery常见面试题之DOM操作详析
异同点

九、其它节点操作

$('div').slice(1,4) ,获取满足条件的div。

$('div').add('p').css() ,自由组合添加样式,给div和p都添加公有的样式。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
jquery拖动改变div大小
Jul 04 #jQuery
You might like
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python中的句柄操作的方法示例
2019/06/20 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
中学门卫岗位职责
2013/12/26 职场文书
校三好学生主要事迹
2014/01/11 职场文书
烹饪自我鉴定
2014/03/01 职场文书
车辆年审委托书范本
2014/09/18 职场文书