var item=$('diveach-product')find('span');
alert(item[0]innnerText);
alert(item[1]innnerText);
如果需要分类提取文本，再判断一下各个子项的class就可以了
jsp中
<tr>
<th align="left" width="20%" style="width: 170px; ">分享文案编辑：</th>
</tr>
<tr>
<td class="form_table_content" ><input name="wshopshare"
id="wshopshare_1" type="text" style="width: 440px; ">
</td>
<td><input type="button" onclick="componentaddshare();" id="addshare" value="添加">
</td>
</tr>
点击一次添加按钮页面多一个文本框
————————————————————————————————————————
JS中
$("#content1")
append(
'<table id="1_'//id=1_type
+ type
+ '"><tr><td>分享语句'
+ type
+ '</td></tr><tr>'
+ '<td><div id="wshopshare"></div></td>'
+ '<td><input name="wshopshare" id="wshopshare" type="text" style="width: 440px; "></td>'
+ '<td></td>'
+ '<td><button type="button" id="del1" onclick="componentdeleteAll(\'1\');">删除</button></td>'
+ '</tr></table>');
DOM *** 作的分类
DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。
它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML
javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom Core的组成部分。
使用DOM Core来获取表单对象的方法
documentgetElementByTagName("from");
使用DOM Core来获取某元素的src属性的方法：
elementgetAttribute("src");
构建DOM元素
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。
1查找元素节点
获取元素节点并打印出它的文本内容，jQuery代码如下:
var $li = $("ul li:eq(1)"); 获取<ul>里第2个<li> 节点
var li_txt=$litext(); //获取第2个<li>元素节点的文本内容
alert(li_txt); //打印文本内容，这里会打印出橘子
以上代码获取了<ul>元素里第2个<li>节点，并将它的文本内容"橘子"打印出来
2查找属性节点
利用jQuery 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。
获取属性节点并打印出它的文本内容，jQuery代码如下：
var $para = $("p"); //获取<p>节点
var p_txt=$paraattr("title"); //获取<p>元素节点属性title
alert(p_txt); //打印title属性值
创建节点
在dom *** 作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。
1 创建元素节点
例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。
(1)创建两个<li>新元素。
(2)将这两个新元素插入文档中。
第(1)个步骤可以使用jQuery的工厂函数$()来完成。
$(html);
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个<li>元素,jQuery代码如下:
$("ul")append($li_1); //添加到<ul>节点中，使之能在网页中显示
$("ul")append($li_2); //可以采取链式写法:$("ul")append($li_1)append($li_2);
注意事项：
(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。
(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
例如创建一个<p> 元素，使用$("<p/>")或者("<p></p>"),但是不要使用$("<p>")或者大写的$("<P/>");
2创建文档节点
var $li_1= $("<li>香蕉</li>"); //创建一个<li> 元素，包括元素节点和文本节点，香蕉就是创建的文本节点
var $li_2 =$("<li>雪梨</li>"); //创建一个<li> 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。
$("ul")append($li_1); //添加到<ul>节点中，使之能在网页中显示
$("ul")append($li_2); //添加到<ul>节点中，使之能在网页中显示
以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。
注意事项：
无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。
例如$("<li><em>这是</em><b>一个</b><a href='#'>复杂的组合</a></li>");
3创建属性节点
创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。
jQuery代码如下:
var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素，包含元素节点，文本节点和属性节点 其中title='香蕉'就是创建的属性节点
var $li_2=$("<li title='雪梨'>雪梨</li>");//创建一个<li>元素 包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点
$("ul")append($li_1);
$("ul")append($li_2); //添加到<ul> 节点中，使之能在网页中显示
插入节点
动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。
使用append(),它会在元素内部追加新创建的内容。
jQuery中还有提供了其他几种插入节点的方法。
方法 描述 示例
append() 向每个匹配的元素内部追加内容 HTML代码
<p>我想说:</p>
jQuery代码: $("p")append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p>
appendTo() 将所有匹配的元素追加到指定的元素中，
实际上，使用该方法是颠倒了常规的$(A)append(B)的 *** 作，即不是将B追加到A中，而是将A追加到B中 HTML 代码 <p>我想说:<p> jQuery代码： $("<b>你好</b>")appendTo("p"); 结果: <p>我想说：<b>你好</b></p>
prepend() 向每个匹配的元素内部前置内容 HTML代码: <p>我想说:</p > jQuery代码: $("p")prepend("<b>你好</b>");结果<p><b>你好</b>我想说:</p>
prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A)prepend(B)的 *** 作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 <p>我想说:</p> jQuery代码: $("<b>你好</b>")prependTo("p"); 结果<p><b>你好</b>我想说<p>
after() 在每个匹配的元素之后插入内容 HTML代码 <p>我想说:<p> jQuery代码: $("p")after("<b>你好<b>"); 结果: <p>我想说:</p><b>你好</b>
insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码<p> 我想说</p> jQuery代码：$("<b>你好</b>")insertAfter("p"); 结果<p>我想说：</p><b>你好</b>
before() 将每个匹配的元素之前插入内容 HTML代码 <p>我想说:</p> jQuery 代码：$("p")before("<b>你好</br>"); 结果<b>你好</b>我想说:</p>
insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的 *** 作 $("<b> 你好</b>")insertBefore("p"); 结果:<b>你好</b><p>我想说:</p>
删除节点
如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()
1remove()方法
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。
例如删除图3-11中<ul>节点中的第2个<li>元素节点，jQuery代码如下:
$("ul li:eq(1)")remove();//获取第2个<li>元素节后，将它从网页中移除
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。
var $li = $("ul li:eq(1)")remove();//获取第2个<li>元素节点后，将它从网页中删除
$liappendTo("ul");//把刚删除的节点又重新添加到<ul>元素里
可以直接使用appendTo()方法得特性来简化以上代码：
$("ul li:eq(1)")appendTo("ul");
//appendTo()方法也可以用来移动元素
//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。
另外remove()方法也可以通过传递参数来选择性地删除元素
$("ul li")remove("li[title!='菠萝']"); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。
2empty()方法
严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。
$("ul li:eq(1)")empty(); //获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里面。
使用firebud查看橘子节点发生变化 <li title='橘子'/>
3复制节点
复制节点也是常用的DOM *** 作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品
并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果
$("ul li")click(function(){
$(this)clone()appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中
});
//在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。
$(this)clone(true)appendTo("body");//注意参数true
在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。
替换节点
如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()
replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。
例如要将网页中<p title="选择你最喜欢的水果">你最喜欢的水果是</p> 替换成<strong> 你最不喜欢的水果是</strong> 可以使用如下jQuery代码：
$("p")replaceWith("<strong>你最不喜欢的水果是");
也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的 *** 作。
$("<strong>你最不喜欢的水果是</strong>")replaceAll("p");
注意：
如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
4 包裹节点
如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。
jQuery代码如下：
$("strong")wrap("<b></b>");//用<b>标签把<strong> 元素包裹起来
得到的结果如下：
<b><strong title="选择你最喜欢的水果"> 你最喜欢的水果是</strong></b>
1wrapAll()方法
该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。
$("strong")wrap("<b></b>");
2wrapinner()方法
该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹<strong> 标签的子内容:jQuery代码如下：
$("strong")wrapInner("<b></b>");
运行代码后，发现<strong>标签内的内容被一对<b>标签包裹了。
<strong title="选择你最喜欢的水果"><b>你最喜欢的水果是</b></strong>
属性 *** 作
在jQuery 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。
1获取属性和设置属性
如果要获取<p>元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。
var $para=$("p"); //获取<p>节点
var p_txt=$paraattr("title"); //获取<p>元素节点属性title
如果要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。
jQuery代码如下：
$("p")attr("title","your title");//设置单个的属性值
//为同一个元素设置多个属性值
$("p")attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。
jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。
2删除属性
有时候需要删除文档元素的特定属性，可以使用removeAttr()方法
删除<p>元素的title属性
$("p")removeAttr("title");
*** 作样式
获取样式和设置样式
HTML代码如下：
<p class="myclass" title="选择你最喜欢的水果"> 你最喜欢的水果是</p>
class 也是<p>元素的属性，因此获取class 和设置class都可以使用attr()方法。
var p_class = $("p")attr("class");//获取<p>元素的class
可以使用attr()方法来设置<p>元素的class，jquery代码如下：
$("p")attr("class","high");//设置<p>元素的class为high
他是将原来的class替换为class，而不是在原来的基础上追加新的class
追加样式
jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在<style>标签里添加另一组样式
<style>
high{
font-weight:bold;
color:red;
}
another{
font-style:italic;
color:blue;
}
//在网页中追加class类的按钮
$("input:eq(2)")click(function(){
$("p")addClass("another"); //给<p>元素追加"another"类
})
attr() 和addClass()的区别
用途 追加样式 设置样式
对同一个网页元素 *** 作 <p>test</p>
第一次使用方法 $("p")addClass("high"); $("p")attr("class","high");
第1次结果 <p class="high">test</p>
再次使用方法 $("p")addClass("another"); $("p")attr("class","another");
结果 <p class="high another"> test</p> <p class="another"> test</p>
3移除样式
如果单击某一个按钮时，删除class的某个值，那么可以使用addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class
如下jQuery代码来删除
$("p")removeClass("high");//移除<p>元素中为"high"的class
//如果要把<p>元素的两个class都删除，就要使用removeClass()
$("p")removeClass("high")removeClass("another");
//jquery提供了更简单的方法
$("p")removeClass("high another");
另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将 class的值全部删除
$("p")removeClass();
切换样式
$toggleBtntoggle(function(){
//3
},function(){
//4
});
toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。
判断是否含有某个样式
hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false
$("p")hasClass("another");
//jQuery内部实际上是调用了is()方法来完成这个功能的，该方法等价于
$("p")is("another")
1设置和获取HTML，文本和值
html()方法
$("P")html();//获取元素的html代码
2text() 方法
$("p")text(); //获取<p>元素的文本内容
//text()可以对文本内容设置内容
$("p")text("你最喜欢的水果是"); //设置<p>元素的文本内容
3val()方法
val()方法取值
通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值，另外val() 方法还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框) 相应的选项被选中，在表单 *** 作中会经常用到。
//使用val设置选中项
$("#single")val("选择2号");
//如果要使下拉列表的第2项和第3项被选中
$("#multiple")val(["选择2号"，"选择3号"]); //以数组的形式赋值
使多个文本框被选中
$(":checkbox")val(["check2","check3"]);
$(":radio")val(["radio2"]);
也可以使用attr()方法来实现同样的功能
$("#single option:eq(1)")attr("selected",true); //设置属性selected
$("[value=radio2]:radio")attr("checked",true);
1 children()方法
该方法用于取得匹配元素的子元素集合
var $body = $("body") children();
var $p=$("p")children();
var $ul = $("ul")children();
alert($bodylength);
alert($plength);
alert($ullength);
2next方法
该方法用于取得匹配元素后面紧邻的同辈元素。
从dom树的结构可以知道<p>元素的下一个同辈节点时<ul>，因此可以通过next() 方法来获取<ul> 元素
var $p1 = $("p")next();//取得紧邻<p>元素后的同辈元素
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素。
从DOM树的结构中可以知道<ul>元素的上一个同辈节点时<p>，因此可以通过prev()方法类获取<p>元素
var $ul = $("ul")prev(); //取得紧邻<ul>元素前得同辈元素
得到的结果将是:
<p title="选择你最喜欢的水果">你最喜欢的水果是</p>
4siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
在第1章导航栏的例子中有段代码如下：
$("has_children")click(function() {
$(this)addClass("highlight"); //为当前元素增加highlight类
children("a")show()end()
siblings()removeClass("highlight")
children("a")hide();
})
用jquery怎么获取页面的特定内容 1、给特定内容包裹一个容器（div或者其他容器）标签
2、给容器一个id，或者一个特定的class以便于使用jquery的选择器获取到该容器
3、使用jquery选择器获取该容器，并获取该容器内的内容
<div id="content" > 特定内容</div> $("#content")();$("#content")text();$("#content")val();
1、()
():取得第一个匹配元素的内容。这个函数不能用于XML文档。但可以用于XHTML文档
(val):设置每一个匹配元素的内容。这个函数不能用于XML文档。但可以用于XHTML文档。
2TEXT
text():取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val):设置所有匹配元素的文本内容
与 () 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体)
3VAL
val():获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
求教高手：用jquery怎么获取页面的特定内容
Jquery支持多种选择器 ，比如 根据id、class、attribute属性、标签名选择
<div id="a"></div> $("#a")就可以取到id为 a的元素
<div class="b"></div> $("b") 就可取到class含有 b 的元素
建议你看一下Jquery的API，里面有更详细的说明
jQuery 在b页面获取a页面输入的内容
通过传参，打开b页面的时候
b输入框内容=输入框值，然后在a页面接收这个值
jquery怎么获取另一个页面上的指定内容
把文件的编码改成utf-8，另外把$ajax里的dataType设为
mui 怎么获取页面的内容
你直接打印data：
consolelog(data)
这样就可以了。能获取到页面内容的。
jsp页面怎么获取另一个页面的内容
可以利用form表单提交获取上一个页面的值
例：form表单提交传值及取值
发请求页面
<form class="page_speeder_101909357" method="post"
id="infoDetailsHyperlink" name=input
action="<%=requestgetContextPath()%>/view/basicmanage/reportTemplet/positionPeopleConfigjsp">
<input name=infoId id="infoId">
<input name=operationType id="operationType">
<input name=copyTempletIdConfigPeople id="copyTempletIdConfigPeople">
</form>
发请求页面，js中发送请求
$("#infoId")val($("#lastStepTempletId")val());
$("#operationType")val($("#operationTypeIdLastStep")val());
$("#infoDetailsHyperlink")submit();
接收页面
<input id="infoId" class="page_speeder_840442281" value=<%=requestgetParameter("infoId")%>>
<input id="operationType" class="page_speeder_840442281" value=<%=requestgetParameter("operationType")%>>
<input id="copyTempletIdConfigPeople" class="page_speeder_840442281" value=<%=requestgetParameter("copyTempletIdConfigPeople")%>>
<script>
<%requestsetCharacterEncoding("utf-8");%> 解决传值时中文乱码问题
</script>
怎么通过js或者jquery获取一个页面里面的内容
这个需要你了解一家js和的关系，对于浏览器来说相当于一颗dom树，所有的标签都是dom树上的节点，js就是对dom树网页的抽象模型进行 *** 作的，jquery只是js的封装本质上还是js
jquery *** 作元素：这个需要学习一下选择器方面的知识，例如类选择器 id选择器 元素选择器，通过选择器可以帅选出你要的dom节点，任何 *** 作都可以进行
js *** 作:documentgetElementsById()
documentgetElementsByTagName()
用jQuery的方法可以获得某个元素中的内容 ，如果元素是标签，则可以获得页面的全部内容：例如：
$(document)ready(function(){
var _str=$("")();
alert(_str);
});
上面代码可以获得页面的全部内容。（当然要先导入jQuery）
给要点击的dom加个id或者class，例如叫click-dom
然后$('#click-dom')on('click',function(){
//点击后要做的 *** 作
})
以上就是关于jquery获取下面dom数据，push成json全部的内容，包括:jquery获取下面dom数据，push成json、如何通过jquery获取js动态append到html页面的dom属性、jquery中有哪些dom *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）