先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。
JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素
<div></div>
<div></div>
</div>
原生的JS获取ID为test的元素下的子元素。可以用:
var a = docuemnt.getElementById("test").getElementsByTagName("div"); 这样是没有问题的
此时a.length=2;
但是如果我们换另一种方法
var b =document.getElementById("test").childNodes;
此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。
所以,在此,我们就要做处理了,需遍历这些元素,把元素类型为空格而且是文本都删除。
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}
上述函数遍历子元素,当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型,/\s/是非空字符在JS里的正则表达式。前面加!,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是: RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
之后,在调用子,父,兄,这些属性之前,调用上面的函数把空格清理一下就可以了
<div></div>
<div></div>
</div>
<script>
function dom() {
var s= document.getElementById("test");
del_ff(s); //清理空格
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode; //得到s的父节点
var ns=s.nextSbiling; //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
var fc=s.firstChild; //获得s的第一个子节点
var lc=s.lastChile; //获得s的最后一个子节点
}
</script>
下面介绍JQUERY的父,子,兄弟节点查找方法
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个
jQuery对象返回,children()则只会返回节点
jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
jQuery.prevAll(),返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
jQuery.nextAll(),返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点,不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。的更多相关文章
- APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法
用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...
- js实现获取当前时间是本月第几周和年的第几周的方法
js实现获取当前时间是本月第几周和年的第几周的方法 获取本月第几周的方法: var getMonthWeek = function (a, b, c) { /** * a = d = 当前日期 * b ...
- 【转】分享前端开发中通过js设置/获取cookie的一组方法
在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...
- JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i & ...
- js实现获取当前时间是本月第几周的方法
这篇文章主要介绍了js实现获取当前时间是本月第几周的方法,涉及javascript针对日期及时间的相关操作技巧,非常简单实用,需要的朋友可以参考下. 本文实例讲述了js实现获取当前时间是本月第几周的方 ...
- JS实现获取汉字首字母拼音、全拼音及混拼音的方法
本文实例讲述了JS实现获取汉字首字母拼音.全拼音及混拼音的方法.分享给大家供大家参考,具体如下: 这里需要用到一个js获取汉字拼音的插件,可点击此处本站下载. 运行效果如下: 完整示例代码: ? 1 ...
- 使用JS准确获取URL网址中参数的几种方法
记录下使用JS准确获取URL网址中参数的方法: 参考链接1. https://blog.csdn.net/Zhihua_W/article/details/54845945?utm_source=bl ...
- JS简单获取当前日期时间的方法(yyyy-MM-dd hh:mm:ss)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- js中获取 table节点各tr及td的内容方法
js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...
随机推荐
- 编程之美 ---> 1.2中国象棋将帅问题
上图,将帅不能碰面,列出将帅不碰面的所有可能情况,要求:程序只能用一个只有8位的变量(#define这样的就不算了) 为了更加符合程序员的口味,给将帅位置编号如下: 0--1--2 | | ...
- javascript显示倒计时控制按钮
html: <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</s ...
- CentOS 6,7最小化安装后再安装图形界面
CentOS 6.2最小化安装后再安装图形界面 在安装CentOS 6.2时发现它没有提示我要怎么安装,而是“自作主张”地给我选择了最小化安装,结果装完之后只有终端界面,因为有时候不得不用图形界面,所 ...
- Shell根据年月日创建文件夹
#!/bin/sh dir_path="/vol/project/log/test/" ..} do #echo "$year" cd $dir_path mk ...
- 用JS写的放大镜
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- 用JS写的简单轮播特效
效果如下 功能分析 1.每隔1秒换一张图片 2.鼠标移入停止切换.鼠标离开继续切换 3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色 4.鼠标离开数字,从该 ...
- cxgrid footer summary value by a column
var AIndex: integer; AValue: variant; begin with cxGrid1DBTableView1.DataController.Summary do begin ...
- 1028. List Sorting (25)
#include <vector> #include <stdio.h> #include <string.h> #include <algorithm> ...
- NEV_SDK开发环境部署手册
根据项目开发需求,要在MEC服务器上部署如下内容:Nginx.Nginx push stream module.Jason CPP.Spawn-fcgi.libfcgi.Redis.Hiredis.B ...
- sysfs接口函数到建立_DEVICE_ATTR
sysfs接口函数到建立_DEVICE_ATTR 最近在弄Sensor驱动,看过一个某厂家的成品驱动,里面实现的全都是sysfs接口,hal层利用sysfs生成的接口,对Sensor进行操作. 说道s ...