无锡门户网站制作服务,公司建品牌网站好,英雄联盟网站模版,电子商务网站建设公个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;还有别人的成功。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡 文章目录 祖先元素each()方法一、添加节点元素addNode二、删除节点remove() 方法 empty() 方法复制节点与替换节点 jQuery遍历 遍历jQuery 遍历意为移动用于根据其相对于其他元素的关系来查找或选取HTML 元素。以某项选择开始并沿着这个选择移动直到抵达您期望的元素为止。
jQuery遍历 遍历jQuery 遍历意为移动用于根据其相对于其他元素的关系来查找或选取HTML 元素。以某项选择开始并沿着这个选择移动直到抵达您期望的元素为止。 div 元素是 ul 的父元素同时是其中所有内容的祖先。ul 元素是 li 元素的父元素同时是 div 的子元素左边的 li 元素是 span 的父元素ul 的子元素同时是 div 的后代。span 元素是 li 的子元素同时是 ul 和 div 的后代。两个 li 元素是同胞拥有相同的父元素。右边的 li 元素是 b 的父元素ul 的子元素同时是 div 的后代。b 元素是右边的 li 的子元素同时是 ul 和 div 的后代。
祖先元素
1**.parent()**方法直接返回被选元素的直接父元素
$(document).ready(function(){$(span).parent();
});2.parents() 方法
parents() 方法返回被选元素的所有祖先元素它一路向上直到文档的根元素 ()。
3.parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../jQuery文件/jquery-1.12.4.js/script
/headbody idbody1div iddiv1ul idul1li idli1span iddemohello/span/li/ul/div
/body
script//parent() 获取父元素//parents() 获取所有祖先元素//parentsUntil(e) 获取e之后的所有祖先元素//1.获取hello的父元素的id//console.log($(#demo).parent().attr(id));//2.获取hello的所有祖先元素的id// $(#demo).parents().each(function(){// console.log($(this).attr(id));// })//3.获取hello所有的div祖先的id// $(#demo).parents(div).each(function(){// console.log($(this).attr(id));// })//4.获取hello的祖先且祖先在body之后$(#demo).parentsUntil(body).each(function(){console.log($(this).attr(id));})
/script/htmleach()方法
each() 方法为每个匹配元素规定要运行的函数。 语法$(selector).each(function*(index,element)*) 代码实例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../jQuery文件/jquery-1.12.4.js/script
/headbodyulli咖啡/lili牛奶/lili果汁/lili红茶/li/ul/body
script//1.将ul下的所有li的文本变为“你好”//通过jQuery内部机制【隐式迭代】实现的// $(ul li).text(你好);//2.循环输出所有的饮料//index:索引值 element:当前元素一般用this即可//这两个参数都是可以省略的// $(ul li).each(function(index,element){// console.log(index_____element.innerHTML);// })//3.当索引为偶数时将li的文本变为红色$(ul li).each(function(index){if(index % 20){$(this).css(color,red);$(this).css(opacity,(index1)/10)}}) $(ul li:even).css(color,red)//4.使用循环实现渐变 $(ul li).each(function(index){$(this).css(color,red);$(this).css(opacity,(index1)/10)})
/script/html一、添加节点元素addNode !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../jQuery文件/jquery-1.12.4.js/script
/headbodyulli咖啡/lili牛奶/lili果汁/lili红茶/li/ulbutton末尾添加/buttonbutton开头添加/buttonbutton牛奶之前添加/buttonbutton牛奶之后添加/button
/body
script//1.在ul子节点列表末尾添加奶茶1、奶茶2、奶茶3//第一步创建节点$(button:first).click(function(){//方式一使用$()方法创建节点var li1 $(li/li).text(奶茶1);//方式2使用html标签创建节点var li2li奶茶2/li;//方法3使用dom方法创建节点var li3document.createElement(li);li3.innerHTML奶茶3//插入节点//方法1使用append()// $(ul).append(li1,li2,li3)//方法2使用appendTo() 一次只能添加一个节点$(li1).appendTo(ul)$(li2).appendTo(ul)$(li3).appendTo(ul)})//2.在ul子节点列表开头添加冰淇淋$(button:contains(开头添加)).on(click,function() {var li$(li/li).text(冰淇淋).css(color,red);$(ul).prepend(li);$(li).prependTo(ul)})//3.在“牛奶”之前加巧克力牛奶$(button:eq(2)).on(click,function(){//var lili stylecolor:red巧克力牛奶/li;var li$(li/li).text(巧克力牛奶).css(color,red)$(ul li:eq(1)).before(li)})//4.在“牛奶”之后加拿铁$(button:eq(3)).on(click,function(){var lidocument.createElement(li);li.style.colorredli.innerText拿铁;$(ul li:eq(1)).after(li)})
/script/html二、删除节点
remove() 方法
remove() - 删除被选元素及其子元素
$(#div1).remove();empty() 方法
empty() 方法删除被选元素的子元素。 语法
$(#div1).empty();代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../jQuery文件/jquery-1.12.4.js/script
/headbodyulli咖啡/lili牛奶/lili果汁/lili红茶/li/ululli波霸奶茶/lili乌龙奶茶/lili草莓奶茶/li/ulbutton删咖啡/buttonbutton删牛奶/buttonbutton删牛奶下面的/buttonbutton删所有奶茶/button
/body
script//ele.remove(); 删除ele节点$(button:first).click(function(){$(ul:first li:first).remove();}) $(button:eq(1)).click(function(){$(ul:first li).remove(:eq(1));})$(button:eq(2)).click(function(){$(ul:first li:gt(1)).remove();// $(ul:first li).each(function(index){// if(index1){// $(this).remove();// }// })})$(button:eq(3)).click(function(){$(ul:eq(1)).empty()})//ele.empty(); 删除ele节点下的所有子节点注意ele本身还在/script/html复制节点与替换节点 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../jQuery文件/jquery-1.12.4.js/script
/headbodydiv iddiv1p stylecolor:red;font-size: 30px;大家好我是pspan stylecolor:orange我是p里面的span1/spanspan stylecolor:green我是p里面的span2/span/p/divbutton idcopyNode复制节点/buttonbutton idreplaceNode替换节点/button
/body
script$(#copyNode).click(function(){//第一步复制节点clone()var ele$(#div1 p:first span:eq(1)).clone();//第二步插入$(#div1 p:first).append(ele)})//replaceWith()//replaceAll()$(#replaceNode).click(function(){//写法1// $(button注册/button).replaceAll(#div1 p:first span:eq(1));$(#div1 p:first span:eq(1)).replaceWith(button注册/button)})
/script/html
