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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
html中两种获取标签内的值的方法
Jun 16 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
Zerg建筑一览
2020/03/14 星际争霸
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
Python基于select实现的socket服务器
2016/04/13 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python格式化输出%s和%d
2018/05/07 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python类及获取对象属性方法解析
2020/06/15 Python
用python批量移动文件
2021/01/14 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
大学生通用个人的自我评价
2014/02/10 职场文书
家长会学生演讲稿
2014/04/26 职场文书
合作协议书模板
2014/10/10 职场文书
大学教师个人总结
2015/02/10 职场文书
2015年女工委工作总结
2015/07/27 职场文书
开学随笔
2015/08/15 职场文书