jquery中DOM
节点包裹
wrap()
(1)$().wrap(html) 将选择的节点用指定的元素包装
$('p').wrap('<div></div>');
(2)多层包裹
$('p').wrap('<div><strong></strong></div>');
(3)带内容
$('p').wrap('<div>1111</div>');
(4)使用创建节点的方式
$('<div></div>') 可以使用
document.createElement('div') 可以使用
$('p').wrap($('<div></div>'));
(5)带内容的json形式
$('p').wrap(function () {
// 创建一个节点
// 设置此节点
// 返回此节点
return '<div></div>';
});
$('p').wrap('<div><strong></strong></div>');
}
去除包裹
unwrap() 去除元素的直接父节点
$().unwrap()
从内往外去除 逐层去除 需要去除多少层 就取消多少次
$('p').unwrap();
$('p').unwrap();
用html将匹配到的所有元素包裹起来
$().wrapAll(html)
$('p').wrapAll('<div></div>');
//$().wrapInner()
// 用html将选择的标签中的内容包裹起来
$('p').wrapInner('<div></div>');
(1)标签的创建
console.log($('<li>aa</li>')[0])
(2)父子关系的节点追加:前置/后置 后置追加: 父节点.append(被追加的元素)
新的节点
$('#xi').append('<li>小白龙</li>')
追加已有的节点:节点的物理位置会发生改变
$('#xi').append($('#cc'));
前置追加:被追加的节点.prependTo(父节点)
$('<li>周瑜</li>').prependTo($('#san'));
物理位置的改变
$('#xi li:eq(1)').prependTo($('#san'));
兄弟关系的追加:
兄弟节点.after(被追加的节点) 后置
$('#kong').after(l1);
已存在
$('#kong').after($('#cc'))
前置追加
$('#kong').before(l1);
被追加的节点.insertBefore(兄弟节点);
l1.insertBefore($('#kong'));
后置
l1.insertAfter($('#kong'));
节点替换:删除原有的节点 将新的节点放在原有的位置上
被替换的节点.replaceWith(新的节点)
$('#kong').replaceWith('<li>大圣</li>');
$('.inner').replaceWith('<li>大圣</li>');
使用已有的标签替换
$('.inner').replaceWith($('#cc'));
新的节点.replaceAll(被替换的节点);
$('<li>黄盖</li>').replaceAll($('#cc'));
删除
节点的删除:
(1)empty() :清除选中节点的所有子节点
$('#hu').empty();
(2)remove() 删除掉选中的元素节点
$('li:last').remove(); //删除自身以及包含的所有子节点
复制节点
选中的节点.clone(布尔值)
布尔值如果为真:不仅复制节点还将节点的所有事件也复制
如果不传值, 默认只复制节点不包含事件
var copyWu = $('#song').clone(true);
$('#hu').append(copyWu);
查找节点 查找父元素 parent(html)
查找dom结构上的直接父元素
如果多个h3存在多个直接包含关系, 根据传入的html参数进行匹配
$('h3').parent().css('color', 'orange');
parents(html)
查找指定元素的所有父元素, 如果有参数, 就根据传入的html参数进行匹配
$('h3').parents('div').css('color', 'cyan');
parentsUntil(html) 查找父元素直到指定的标签为止
不包含until到的元素
$('h3').parentsUntil('div').css('color','orange');
console.log($('h3').parentsUntil('i'));
children() 只查找直接的子元素
$('div').children('span').css('color', 'orange');//等价于$('div>span');
find() 直接&间接
$('div').find('span').css('color','cyan');
$('div span');
next() 下一个
$('#bai').next().css('color', 'pink');
siblings() 其他的兄弟关系节点
$('#bai').siblings().css('fontSize', '30px');
prev()上一个
$('#bai').prev().css('background', 'cyan');
}
jquery中DOM的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- [置顶] Jquery中DOM操作(详细)
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- JQuery中DOM操作(一)
节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...
- jQuery笔记(二)jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- JQuery中DOM事件合成用法
jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
- jquery中DOM的操作方法
先介绍几个比较简单的方法,不经常用到,做个记录 1. filter() 方法 顾名思义,filter是一个过滤器,如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配 ...
- 第75天:jQuery中DOM操作
一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...
- jquery中$(dom).each()和$(dom).length的使用
1.$(dom).each();在dom处理上用的比较多. $(selector).each(function(index,element){ //selector会遍历当前页面里所有匹配的jquer ...
随机推荐
- Python学习笔记-Day3-python关键字
1.and 逻辑与 2.assert 判断某个条件是否为真,如果为假,抛出错误 3.break跳出for,while循环 4.class 类定义 5.continue 跳出本次循环,执行下次循环 6. ...
- JAVA基础知识之多线程——三种实现多线程的方法及区别
所有JAVA线程都必须是Thread或其子类的实例. 继承Thread类创建线程 步骤如下, 定义Thead子类并实现run()方法,run()是线程执行体 创建此子类实例对象,即创建了线程对象 调用 ...
- WPF中两个窗口的互斥
这里所讲的互斥是两个窗口不同时存在,打开一,只显示一:点一相关按钮显示二,关闭一:关闭二,显示一. 窗口一: history winResult winChoice = new winResult() ...
- 2016年12月6日 星期二 --出埃及记 Exodus 21:1
2016年12月6日 星期二 --出埃及记 Exodus 21:1 "These are the laws you are to set before them:你在百姓面前所要立的典章是这 ...
- 2016年12月2日 星期五 --出埃及记 Exodus 20:23
2016年12月2日 星期五 --出埃及记 Exodus 20:23 Do not make any gods to be alongside me; do not make for yourselv ...
- c#复习阶段
在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1,第二个是2 ...
- C语言中的指针数组
C语言中的指针数组是什么,像 char *a[]={"ddd","dsidd","lll"}; 这里讲一下注意如果我们使用了a也就是首元素的 ...
- MD5加密算法
package com.bao.tools.encryption; import java.security.MessageDigest;import java.security.NoSuchAlgo ...
- External Storage 数据存储
一些数据存储的封装:http://hubingforever.blog.163.com/blog/static/17104057920129198236599/ External Storage数据存 ...
- HDU 1005 Number Sequence(数列)
HDU 1005 Number Sequence(数列) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...