前端技术（JQuery）学习笔记（三）JQuery获取元素的尺寸、each方法遍历json及元素、JQuery遍历DOM树，JQuery获取选中的复选框和列表框

最新推荐文章于 2022-04-09 19:21:46 发布

dl0246

最新推荐文章于 2022-04-09 19:21:46 发布

阅读量672

点赞数 2

分类专栏： Web前端技术文章标签： JQ获取元素的尺寸 JQ遍历json jQ遍历html元素 JQ遍历DOM树 JQ复选框及列表框

本文链接：https://blog.csdn.net/dl0246/article/details/80244078

版权

这篇博客总结了JQuery对HTML元素的操作，包括获取尺寸、属性、JSON遍历、DOM遍历以及复选框和列表框的处理。介绍了html元素的值、属性、类、CSS样式设置，以及append、prepend等追加方法。此外，还讲解了如何使用width、height、each方法，遍历JSON数据和DOM树，以及如何获取选中的复选框和列表框的值。

摘要由CSDN通过智能技术生成

一、小结
1、JQuery对html元素的值的操作
①、html() : 包括有元素的值以及子元素
②、text() : 获取到元素的值，不包括子元素
③、val() : 获取输入框等表单元素的值

2、JQuery对html元素的属性进行操作
①、通过attr()方法对html元素的属性进行操作，设置元素的属性值
jqObj.attr(“属性名称”,”属性值”);$("a").attr("href","http://www.163.com");
②、获取元素属性的值
var attrValue=jqObj.attr("属性名称");
var hrefValue=$("a").attr("href");
③、可以利用json数据对html元素的多个属性进行设置。
jqObj.attr(json);
$("a").attr({"title":"提示信息","href":"http://www.163.com"});

3、JQuery对单一属性的操作
var checkValue=jqObj.prop(“checked”); //特别注意：默认情况下，在jq中checked属性的返回值true|false；
jqObj.prop("checked",true);
jqObj.prop("checked",function(index,val));
//完成复选框反选功能的实现

$(""input[type='checked']"").prop(""checked"",function(index,val){
   
    return !val;
});

//完成复选框全选功能的实现

$(""input[type='checked']"").prop(""checked"",function(index,val){
   
    return true;
});"

4、通过Jquery获取下拉列表框中被选中那项的值

<!DOCTYPE html> 
<html lang="en">    
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>    
    <script type="text/javascript" src="js/jquery-2.1.4.js"></

最低0.47元/天解锁文章

dl0246

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端技术（JQuery）学习笔记（三）JQuery获取元素的尺寸、each方法遍历json及元素、JQuery遍历DOM树，JQuery获取选中的复选框和列表框

一、小结 1、JQuery对html元素的值的操作 ①、html() : 包括有元素的值以及子元素 ②、text() : 获取到元素的值，不包括子元素 ③、val() : 获取输入框等表单元素的值 2、JQuery对html元素的属性进行操作 ①、通过attr()方法对html元素的属性进行操作，设置元素的属性值
复制链接

扫一扫

专栏目录