1、新建一个html文件,命名为testhtml,用于讲解Jquery如何获得div下的元素。
2、在testhtml文件内,使用div标签创建一个模块,在div内,使用p标签,span标签创建测试的内容。
3、在testhtml文件内,设置div的id属性为divcon,主要用于下面通过该id获得div对象。
4、在testhtml文件内,使用button标签创建一个按钮,按钮名称为“获得div下的元素”。
5、在testhtml文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行divfun()函数。
6、在js标签中,创建divfun()函数,在函数内,通过id(divcon)获得div对象,使用html()方法便可以获得div对象下面的元素了。最后,使用alert()方法输出元素。
7、在浏览器打开testhtml文件,点击按钮,查看结果。
总结
1、创建一个testhtml文件。
2、在文件内,在div标签内,使用p标签创建一行文字,同时创建一个button按钮,用于触发执行js函数。
3、在js标签内,创建函数,在函数内,使用getElementById()方法通过id(mydiv)获是div对象,再使用getElementsByTagName()方法获得div下面的p元素对象,最后,使用alert()方法输出p元素的内容。
jQuery的方式:
$('div#id')find('p')each(function(i, obj){
var txt = $(obj)html();
var count = txtsplit(/<br\s\/>/)length;
alert(count);
});
或者:
$('div#id')find('p')each(function(i, obj){
var txt = $(obj)text();
var count = txtsplit(/\n/)length;
alert(count);
});
#id中的id要换成你的div的id值。
如果不是用<br>换行,那得用p的宽度和字符的大小来计算,还得考虑自动折行,比较复杂。
<div id="div1">aaaaaaaaaaaaaaaaaa</div>
var str=documentgetElementById("div1");
alert(strlength);
strlength即文字的文字数
<div class='div1'>div1内容</div>
<div class='div2'>div2内容</div>
<script type="text/javascript">
const div1 = documentgetElementByClassName('div1')[0]innerText
documentgetElementByClassName('div2')[0]innerText = div1
</script>
可以尝试一下
1.HTML结构
< input type = "checkbox" name = "test" value = "1" / > < span > 1 < / span >
< input type = "checkbox" name = "test" value = "2" / > < span > 2 < / span >
< input type = "checkbox" name = "test" value = "3" / > < span > 3 < / span >
< input type = "checkbox" name = "test" value = "4" / > < span > 4 < / span >
< input type = "checkbox" name = "test" value = "5" / > < span > 5 < / span >
2.Javascript代码:
函数show(){
Obj文件。getElementsByName(“测试”);
Check_val=[];
For(kinobj){
如果(obj[k]。检查)
Check_val。Push(obj[k]。值);
}
警报(check_val);
}
扩展资料:
JQuery对复选框的各种 *** 作:
1.根据id获取复选框:
$("#cbCheckbox1");
2.得到所有的复选框:
$("input[type='checkbox']");//或
$("input[name='cb']");
3.获得所有选中的复选框:
$("input:thecheckboxchecked");//或
$("input:[type='checkbox']:checked");//或
$("input[type='checkbox]:checked");//或
$("input:[name='ck']:checked");
jquery的 length 属性用以获取包含 jQuery 对象中元素的数目:
$("a b li")length; // a类后代b类中包含的li元素的数量综合示例如下:
创建Html元素
<div class="box"><span>点击按钮获取li数量:</span><br>
<div class="content">
<div class="test">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
<div class="test">
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Ralph</li>
</ul>
</div>
<div class="test">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
</div>
<input type="button" value="获取li的数量">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
ul{padding:5px 25px;border:2px dashed #cc6699;}
编写jquery代码
$(function(){$(":button")click(function() {
tol = $("content test li")length;
num = $("content test ul")map(function() {
return $(this)find("li")length;
})get()join(',');
alert("不同div下的li数量分别为:"+num+",总数为:"+tol+"。");
});
})
观察效果
这要分两种情况:
1、按钮在div中。
我们可以通过:
var btn = documentgetElementById("btn");//获取按钮节点
var div = btnparentNode;//获取di元素,当然不一定div就是按钮的父元素,可以通过parentNode向上查找,最好还是给div加一个id2、按钮不在div中
我们可以通过:
//以上这种情况最好给div加一个id,通过以下方式获得
var div = documentgetElementById("div")
//如果不想加的话,以下方式
var divs = documentgetElementsByTagName("DIV");
var div = divsitem(n);//n表示要取的div,从0开始
以上就是关于JS如何获取某个DIV下的元素全部的内容,包括:JS如何获取某个DIV下的元素、javascript如何获取一个div中的p元素内一共几行字符、怎么用js获取div里面的文字段的文字数等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)