jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作

节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

创建节点元素

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

var $newNode=$("<li></li>");

var $newNode1=$("<li>你喜欢哪些项目？</li>");

var $newNode2=$("<li title='last'>游泳是再合适不过了！</li>");

元素内部插入子节点

元素外部插入同辈节点

删除节点

jQuery提供了三种删除节点的方法

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件

替换节点

replaceWith()和replaceAll()用于替换某个节点

var $newNode1=$("<li>你喜欢哪些运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

($newNode1).replaceAll(".gameList li:eq(2)");

复制节点

clone()用于复制某个节点

参数ture或flase, true复制事件处理，flase时反之

// clone里面写false或者不写，只能克隆元素及内容，不能克隆绑定的事件，只有写了true才能克隆绑定的事件，也就是点击了克隆的元素也会有点击事件

$(selector).clone([includeEvents]) ;

$(".gameList li:eq(1)").click(function(){

$(this).clone(true).appendTo(".gameList");

})

$(".gameList li:eq(2)").click(function(){

$(this).clone(false).appendTo(".gameList");

})

属性操作

获取与设置元素属性

删除元素属性

获取与设置元素属性

attr()用来获取与设置元素属性

获取属性值

$(selector).attr([name]) ;

或

设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例：$(".contain img").attr({width:"200",height:"80"});

删除元素属性

removeAttr()用来删除元素的属性

$(selector).removeAttr(name) ;

删除元素的alt属性

$(".contain img").removeAttr("alt");

节点遍历

遍历子元素

遍历同辈元素

遍历前辈元素

其他遍历方法

遍历子元素

children()方法可以用来获取元素的所有子元素

$(selector).children([expr]);

获取<section>的子元素，但不包含子元素的子元素

var $section =$("section").children();

alert($section.length);

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法功能

next([expr]) 用于获取紧邻匹配元素之后的元素

$("li:eq(1)").next().addClass("orange");

prev([expr]) 用于获取紧邻匹配元素之前的元素

$("li:eq(1)").prev().addClass("orange");

siblings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素

$("li:eq(1)").siblings().addClass("orange");

遍历前辈元素

jQuery中可以遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

closest()：返回被选元素的第一个祖先元素。就是我们从这个元素开始，进行向上遍历，直到找到我们要找的元素，遍历停止，也就是说寻找第一个祖先元素。
$(“span”).closest(“ul”).css({“color”:“red”,“border”:“2px solid red”});
这行代码意思就是从“span”元素开始进行遍历，寻找“ul”元素，当找到第一个“ul”元素，遍历停止，给当前ul元素设置css属性

$("li:eq(1)").parent().addClass("orange");

$("li:eq(1)").parents().addClass("orange");

其他遍历方法

each( ) ：规定为每个匹配元素规定运行的函数

Index 选择器的位置从0开始

Element 当前的元素

$(selector).each(function(index,element)) ;

$("img").click(function(){

$("li").each(function(){

var str=$(this).text()+"<br>";

$("section").append(str);

})

});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

实例
$(document).ready(function(){
$("div").find("span");
});

CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作

width和height是本身jq中的方法：

：offset（）：返回以像素为单位的letf和top坐标，只对可见元素有效，设置display：none就会i无效；

如果设置了绝对定位，那么会获取绝对定位距离父元素的值left值和top值；

：offseparent（）：返回最近的已定位的祖先元素

jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作相关推荐

【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())
创建新的 HTML 元素 (节点) - appendChild() 实例: <!DOCTYPE html> <html><head><meta charset ...
节点操作-创建并添加删除节点替换克隆节点
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
Jquery的动态创建DOM元素
jquery动态创建页面元素,mark一下,以备以后查询时使用.以创建div和input为例. 动态创建div: $(function(){ $("<div>",{ i ...
java数组元素替换操作_js数组操作（添加、删除、替换元素）
1.添加元素函数:push(para),参数说明para要添加的元素示例: var lang = ["php","java","javascrip ...
notepad++节点_在C ++中删除链接列表的中间节点
notepad++节点 Given a single Linked List and we have to delete the middle the element of the Linked Li ...
MySQL从入门到精通50讲（四）-MySQL表操作创建表及删除表
前言声明:以下是博主精心整理的机器学习和AI系列文章,博主后续会不断更新该领域的知识: 人工智能AI实战系列代码全解析手把手教你ML机器学习算法源码全解析有需要的小伙伴赶紧订阅吧. MySQL ...
MySQL从入门到精通50讲（一）-MySQL数据库操作创建数据库及删除数据库
前言声明:以下是博主精心整理的机器学习和AI系列文章,博主后续会不断更新该领域的知识: 人工智能AI实战系列代码全解析手把手教你ML机器学习算法源码全解析有需要的小伙伴赶紧订阅吧. MySQL ...
python json数据格式数组内元素递增赋值_python深浅复制，类型转换， json操作，数组操作...
python深浅复制 import copy a = [1, 2, 3, 4, ['a', 'b']] #原始对象 b = a #赋值,传对象的引用 c = copy.copy(a) #对象拷贝,浅拷 ...
节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode（增删改查）
01-节点操作-创建元素·createElement||appendChild <body><div class="box"><span>我是前 ...

jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作

jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作相关推荐

最新文章

热门文章

jQuery节点操作创建节点元素删除节点 替换节点复制节点等基本本操作

jQuery节点操作创建节点元素删除节点 替换节点复制节点等基本本操作相关推荐

最新文章

热门文章

jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作

jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作相关推荐