jquery中包裹节点

1.介绍

  

2.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         //包装 li 本身
10         $("#game li").wrap("<font color=‘red‘></font>");
11
12         //包装所有的 li
13         $("#city li").wrapAll("<font color=‘red‘></font>");
14
15         //包装 li 里边的文字.
16         $("#language li").wrapInner("<font color=‘red‘></font>");
17     })
18 </script>
19 </head>
20 <body>
21     <p>你喜欢哪个城市?</p>
22     <ul id="city">
23         <li id="bj" name="BeiJing">北京</li>
24         <li>上海</li>
25         <li id="dj">东京</li>
26         <li id="se">首尔</li>
27     </ul>
28
29     <br>
30     <br>
31     <p>你喜欢哪款单机游戏?</p>
32     <ul id="game">
33         <li id="rl">红警</li>
34         <li>实况</li>
35         <li>极品飞车</li>
36         <li>魔兽</li>
37     </ul>
38
39     <br>
40     <br>
41     <p>你喜欢哪种开发语言?</p>
42     <ul id="language">
43         <li>C</li>
44         <li>Java</li>
45         <li>.NET</li>
46         <li>PHP</li>
47     </ul>
48 </body>
49 </html>
时间: 2024-10-14 15:57:21

jquery中包裹节点的相关文章

jquery中的节点的操作

节点的操作 Dom 文档对象 模型 解决 一.插入节点 Append() 在每个匹配的元素中追加内容 Var  $li_1= “<li></li>”; Var  $li_2 =”<li></li>” $(“ul”).append($li_1).append($li_2); //添加到ul中rep appendTo() 将所有匹配元素追加到指定元素中 $(“<b>asd</b>”).appendTo(p);  p 指<p>&

jQuery中删除节点方法remove()、detach()、empty()分析

jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并不会删除.举个栗子: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>remove和detach对

JQuery中寻找节点的方法

Query.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents(

JQuery 中 创建节点,修改节点属性

var content = $("<div></div>"); content.text("新建节点的内容"); //content.html("<b>hello</b>"); content.addClass("one"); content.css("background-color","red"); $("#content&q

jQuery中属性节点的操作

1.attr() 用于读取或设置属性 -传递一个参数 读取属性 -传递两个参数 设置属性注意:无论找到多少元素都只会返回第一个元素指定的属性节点的值 但是会将所有的元素的属性节点的值都设置为指定的值 如果设置的属性节点不存在,那么就会给找到的所有的元素添加该属性节点 2.prop()方法     原文地址:https://www.cnblogs.com/qqinhappyhappy/p/11728900.html

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 2.使用函数get()访问,例如: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.a

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&

jQuery中的DOM操作------复制及包裹节点

1.复制节点: 如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成: $(this).clone().appendTo("ul"); 复制节点后,被复制的新元素不具有任何行为,如果需要新元素也具有复制功能,可以这么写: $(this).clone(true).appendTo("ul"); 2.包裹节点:wrap()&warpAll()&wrapInner() 如下代码: <strong t

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo