小时 insert one tno pro 指定 使用 兄弟元素
上来就把 jQuery 提供的方法摆在这里是不是有点不好呀,不过,我们从 jQuery 的方法名称上就能知道这些方法是干嘛的了。
parent(selector) | 查找父元素,可传入 selector 进行过滤 (下同) |
parents(selector) | 查找所有的祖先节点 |
children(selector) | 返回所有的子节点,不过该方法只会返回直接的子节点,不会返回所有的子孙节点 |
prev() | 返回该节点的上一个兄弟节点 |
prevAll() | 返回该节点之前所有的节点 |
next() | 返回该节点的下一个兄弟节点 |
nextAll() | 返回该节点之后所有的节点 |
siblings() | 返回该节点所有的兄弟节点,不分前后 |
find(selector) | 返回该节点所有的子孙节点 |
看完所有的方法之后,我们可以发现:children() 只能获取直接的子节点;而 find 能获取所有的子孙节点,当然也包括直接的子节点。
- 1获取元素节点
- // 通过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个)
- document.getElementById('div1');
- // 通过类名查找元素,多个类名用空格分隔,得到一个htmlCollection(一个元素集合,有length属性,可以通过索引号访问里面的某一个元素)
- var cls = document.getElementsByClassName('a b');
- console.log(cls);
- // 通过标签名查找元素 返回一个HTMLCollection
- document.getElementsByTagName('div');
- // 通过name属性查找,返回一个NodeList(一个节点集合,有length属性,可以通过索引号访问)
- var nm = document.getElementsByName('c');
- console.log(nm);
- // 获取所有form标签(得到一个HTMLCollection集合)
- var form = document.forms;
- // html5新加标签(ie8+)
- // document.querySelector(); // 返回单个node,如果有多个匹配元素就返回第一个
- // document.querySelectorAll(); // 返回一个nodeList集合
// 2 创建节点
- // 创建元素,只是创建出来并未添加到html中,需要与appendChild 配合使用
- var elem = document.createElement('p');
- elem.id = 'test';
- elem.style = 'color: red';
- elem.innerHTML = '我是新创建的节点';
- document.body.appendChild(elem);
- // 创建文本节点 createTextNode
- var txt = document.createTextNode('我是文本节点');
- document.body.appendChild(txt);
- // 克隆节点(需要接受一个参数来表示是否复制元素)
- var form = document.getElementById('test');
- var clone = form.cloneNode(true);
- clone.id = 'test2';
- document.body.appendChild(clone);
- //文档碎片的方式(提升性能)
- (function() {
- var start = Date.now();
- var str = '',
- li;
- var ul = document.getElementById('ul');
- var fragment = document.createDocumentFragment();
- for (var i = 0; i < 10000; i++) {
- li = document.createElement('li');
- li.textContent = '第' + i + '个子节点';
- fragment.appendChild(li);
- }
- ul.appendChild(fragment);
- console.log('耗时:' + (Date.now() - start) + '毫秒'); // 63毫秒
- })();
- // 3 节点修改API
- //节点修改APi有两个特点
- // 1 不论新增还是替换节点,如果原本就在页面上,就会被替换
- // 2 修改之后节点本身绑定的事件不会小时
- // 1 appendChild ()
- // 用法是: parent.appendChild(child)
- // 会将child节点添加到parent里的最后面,如果子节点原本就存在,会移除原节点,添加新节点
- // 到最后,但是事件会保留
- // 2 insertBefore()
- // 用法是 parent.insertBefore(newNode,refNode);
- // refNode 是必须传的 不传会报错
- // 如果 refNode 是undefined 和null 就会将新节点传入到parent节点的最后
- // 3 removeChild()
- // 用法是:parent.removeChild(child)
- // 如果删除的不是父元素的子节点会报错
- // var deleted = parent.removeChild(child)
- // deleted 可以继续引用节点 ,被删除节点依然存在与内存中
- // 4 replaceChild()
- // 用法是:parent.replaceChild(newChild, oldChild);
- // 4 节点的关系APi
- // 1 父关系API
- // parentNode 父节点
- // parentElement父元素
- // 2 子关系API
- // children 子元素
- // childNodes 子节点
- // firstElementChild 第一个子元素
- // firstChild 第一个子节点
- // lastElementChild 最后一个子元素
- // lastChild 最后一个子节点
- // 3 兄弟关系的API
- // previousSibling 节点的上一个兄弟节点
- // previousElementSibling 节点的上一个兄弟元素(ie9以下不支持)
- // nextSibling 节点的下一个兄弟节点
- // nextElementSibling 节点的下一个兄弟元素(ie9以下不支持)
- // 5 节点属性API
- // setAttribute(name,value) 给元素设置属性
- // getAttribute(name) 获取元素属性
- // 6 直接修改元素的样式
- elem.style.color = 'red';
- elem.style.setProperty('font - size', '16px');
- elem.style.removeProperty('color');
- // 7 动态添加样式
- var style = document.createElement('style');
- style.innerHTML = 'body {
- color: red
- }#top: hover {
- background - color: red;
- color: white;
- }';
- document.head.appendChild(style);
- // 8 window.getComputedStyle
- // 用法是:var style = window.getComputedStyle(element[, pseudoElt]);
- // element:目标元素的DOM对象
- // pseudoElt:指明要匹配的伪元素,对于普通元素必须指定为null(或省略)
jquery js 兄弟父元素的获取
来源: http://www.bubuko.com/infodetail-2276294.html