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="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="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='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="请输入用户名..."/> <input type="text" class="items" value="Allen" /> <script type="text/javascript" src="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://soft.tanzhouedu.com/images/logo.png" alt="中山学院" width="215" height="66" /> <script type="text/javascript" src="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:"优酷","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="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="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> // $("p").remove(); // $("p span").remove(".txt"); // empty清空（把所有段落的子元素（包括文本节点）删除） $("p").empty(); </script> </body>
jQuery 操作 CSS addClass() - 向被选元素添加一个或多个类 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="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{100px;height:100px;background:#690;border:10px solid red;padding:20px;} .one{100px;height:100px;background:#FC0;} </style> <body> <div></div> <div class="one"></div> <div></div> <input type="button" value="点击变大" id="btn"/> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> // 获取第一段的宽 var width = $("div").width(); var height = $("div").height(); // alert(""+width+" ; height:"+height); // 10 px = 1em // $(".one").width(300); /* $("#btn").click(function(){ $(".one").width(function(i,w){ return w*1.2; }); }); */ // 获取第一div内部区域高度innerHeight var 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>