首页 > 代码库 > 第八节（jQuery的获取、设置、添加、删除、css()、尺寸）
第八节（jQuery的获取、设置、添加、删除、css()、尺寸）
jQuery 拥有可操作 HTML 元素和属性的强大方法 一. jQuery DOM（文档对象模型） 操作 jQuery 提供一系列与 DOM （Document Object Model）相关的方法，访问和操作元素和属性变得很容易 DOM 定义访问 HTML 和 XML 文档的标准W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式 获得内容 - text()、html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值 获取属性 - attr() jQuery attr() 方法用于获取属性值<body><p class="text">我是一个段落文本</p><p>我是一个p标签</p><p></p><p></p><p></p><p></p><p></p><p></p><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 返回p元素的文本内容<取值> // var text = $(".text").text(); // 设置所有 p 元素的文本内容 // var p = $("p").text("其实ta是个美女 ！"); // 使用函数来设置所有匹配元素的文本内容 $("p").text(function(i,h){ return "这个 p 元素的 index 是：" + i+"========="+h; }); </script></body>///////////////////////////////////////////////////////////<body> <div> <p> 中山学院Ming ！ </p> </div> <div>我是Ming ！</div> <div>我是Ming 2</div> <div>我是Ming 3</div> <div>我是Ming 4</div> <div>我是Ming 5</div> <div>我是Ming 6</div> <div>我是Ming 7</div> <div>我是Ming 8</div> <div>我是Ming 9</div> <div>我是Ming 10</div> <div>我是Ming 11</div><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 获取div元素中的 标签+文本 // var html = $("div").html(); // 获取div元素中的 文本 // var text = $("div").text(); // 设置div元素中的html内容 // $("div").html("<div style=‘width:300px;height:100px;background:red;‘>中山学院</div>"); $("div").html(function(i,h){ return "这是利用html()方法设置 div内容"+i+"-----------"+h; });</script></body>/////////////////////////////////////////////////////////////////////<body> <input type="text" class="items" value=http://www.mamicode.com/"请输入用户名..."/> <input type="text" class="items" value=http://www.mamicode.com/"Allen" /><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 获取文本框中的值// var val = $("input").val(); // 设定文本框的值// $("input").val("ming"); // 设定文本框的值 $(‘input:text.items‘).val(function() { return this.value + ‘ ‘ + this.className; }); // alert(val);</script></body>////////////////////////////////////////////////////////////////////<body><img ming="太帅了" class="logo" src=http://www.mamicode.com/"http://soft.tanzhouedu.com/images/logo.png" alt="中山学院" width="215" height="66" /><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 返回文档中所有图像的src属性值。// var val = $("img").attr("src"); // 为所有图像设置src和alt属性(多个图片或属性) $("img").attr({src:"http://static.youku.com/index/img/header/yklogo.png",alt:"优酷",width:"140",height:"50"}); // 为图片设置src属性 $(".logo").attr("src","http://gtms01.alicdn.com/tps/i1/TB1.lRWGXXXXXblXpXXGI4UIXXX-250-100.gif");</script></body>
通过 jQuery，可以很容易地添加新元素/内容 添加新的 HTML 内容 append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容<body><p>one</p><span>ming 依然还是那么帅 ！</span><p>two</p><div>prepend - 1</div><div>prepend - 2</div><b class="txt">一直都是小弟</b><b class="txt">我已不做大哥好多年</b><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 在每一行文字后边追加内容 // $("p").append("<span style=‘color:red;‘>我是Ming ！</span>"); // 将一个DOM元素前置入所有段落// $("p").prepend("<span style=‘color:red;‘>我是Ming ！</span>"); //向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。// $("p").prepend($("span"));// 将一个DOM元素前置入所有段落$("div").prepend($(".txt")[0]);</script></body>
通过 jQuery，可以很容易地删除已有的 HTML 元素 删除元素/内容 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素<body> <p>我是一个小苹果 ！<span class="txt">太帅了！</span></p> 小呀小苹果<script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // $("p").remove(); // $("p span").remove(".txt");// empty清空（把所有段落的子元素（包括文本节点）删除）$("p").empty();</script></body>
jQuery 操作 CSSaddClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性<style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;font-family:"微软雅黑";color:#666;} ul li{border:1px solid red;float:left;list-style:none;line-height:30px; padding:0 20px 0 20px; } /* ul li:hover{background:red;color:#fff;} */ .sel{background:red;color:#fff;} </style><body><ul> <li>javaVIP</li> <li>SEO</li> <li>网络营销</li> <li>淘宝</li></ul><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // addClass() , removeClass();/*$("ul li").hover(function(){ $(this).addClass("sel"); },function(){ $(this).removeClass("sel"); });*/ // 如果存在（不存在）就删除（添加）一个类 $("ul li").hover(function(){ $(this).toggleClass("sel"); });</script></body>
通过 jQuery，很容易处理元素和浏览器窗口的尺寸 一. 尺寸方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）innerWidth() 方法返回元素的宽度（包括内边距）innerHeight() 方法返回元素的高度（包括内边距）outerWidth() 方法返回元素的宽度（包括内边距和边框）outerHeight() 方法返回元素的高度（包括内边距和边框）<style type="text/css"> *{margin:0;padding:0;} div{width:100px;height:100px;background:#690;border:10px solid red;padding:20px;} .one{width:100px;height:100px;background:#FC0;}</style><body><div></div><div class="one"></div><div></div><input type="button" value=http://www.mamicode.com/"点击变大" id="btn"/><script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.11.1.min.js"></script><script type="text/javascript"> // 获取第一段的宽 var width = $("div").width(); var height = $("div").height(); // alert("width:"+width+" ; height:"+height); // 10 px = 1em// $(".one").width(300);/* $("#btn").click(function(){ $(".one").width(function(i,w){ return w*1.2; }); });*/// 获取第一div内部区域高度innerHeightvar p = $("div:first");// alert(p.innerHeight());//$("div:last").text( "innerHeight:" + p.innerHeight() );// 获取第一段落外部宽度outerWidth()var p = $("div:first");alert(p.outerWidth());var width = $("div").width();alert(width);</script></body>
第八节（jQuery的获取、设置、添加、删除、css()、尺寸）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。