一步一步学习 JQuery (六) JQuery 的 html() & val() && CSS_DOM操作

来源：互联网发布：最大域名注册商编辑：程序博客网时间：2024/06/16 12:50

设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档
读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">//测试使用 html() 方法. $(function(){alert($("#city").html());$("#city").html("<li id='at'>wwww</li>");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种开发语言?</p><ul id="language"><li>C</li><li>Java</li><li>.NET</li><li>PHP</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="at"/></body></html>

使用val() 方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">$(function(){//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数$(":text").focus(function(){//2. 当获取焦点时, 若 #address 中是默认值//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""var val = $(this).val();if(val == this.defaultValue){$(this).val("");}}).blur(function(){//3. 失去焦点时, 若 #address 的值在去除前后空格后等于 ""//则为其恢复默认值. var val = this.value;if($.trim(val) == ""){this.value = this.defaultValue;}});//2. $(":button:eq(1)").click(function(){$("#single").val("选择3号");});$(":button:eq(2)").click(function(){$("#multiple").val(["选择2号", "选择4号"]);});$(":button:eq(3)").click(function(){$(":checkbox[name='c']").val(["check2", "check4"]);});$(":button:eq(4)").click(function(){//即便是为一组 radio 赋值, val 参数中也应该使用数组. //使用一个值不起作用。 $(":radio[name='r']").val(["radio2"]);});$(":button:eq(5)").click(function(){//val() 可以直接获取 select 的被选择的值. alert($("#single").val());alert($("#multiple").val());//val 不能直接获取 checkbox 被选择的值//若直接获取, 只能得到第一个被选择的值. //因为 $(":checkbox[name='c']:checked") 得到的是一个//数组. 而使用 val() 方法只能获取数组元素的第一个值//若希望打印被选择的所有制, 需要使用 each 遍历. //alert($(":checkbox[name='c']:checked").val());$(":checkbox[name='c']:checked").each(function(){alert(this.value);});//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. alert($(":radio[name='r']:checked").val());});})</script></head><body><input type="text" id="address" value="请输入邮箱地址"><br><input type="text" id="password" value="请输入邮箱密码"><br><input type="button" value="登录"><br><br><br><input type="button" value="使单选下拉框的'选择3号'被选中"/><input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br><input type="button" value="使多选框的'多选2'和'多选4'被选中"/><input type="button" value="使单选框的'单选2'被选中"/><br><input type="button" value="打印已经被选中的值"><br><br/><select id="single">  <option>选择1号</option>  <option>选择2号</option>  <option>选择3号</option></select><select id="multiple" multiple="multiple" style="height:120px;">  <option selected="selected">选择1号</option>  <option>选择2号</option>  <option>选择3号</option>  <option>选择4号</option>  <option selected="selected">选择5号</option></select><br/><br/><input type="checkbox" name="c" value="check1"/> 多选1<input type="checkbox" name="c" value="check2"/> 多选2<input type="checkbox" name="c" value="check3"/> 多选3<input type="checkbox" name="c" value="check4"/> 多选4<br/><input type="radio" name="r" value="radio1"/> 单选1<input type="radio" name="r"  value="radio2"/> 单选2<input type="radio" name="r"  value="radio3"/> 单选3</body></html>

常用的遍历节点方法

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next()
取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev()
取得匹配元素前后所有的同辈元素: siblings()

样式操作

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

CSS-DOM 操作

获取和设置元素的样式属性: css()
获取和设置元素透明度: opacity 属性
获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">*{ margin:0; padding:0;}body {font-size:12px;text-align:center;}a { color:#04D; text-decoration:none;}a:hover { color:#F50; text-decoration:underline;}.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}.SubCategoryBox ul { list-style:none;}.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}.showmore { clear:both; text-align:center;padding-top:10px;}.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}.promoted a { color:#F50;}</style><script type="text/javascript" src="scripts/jquery-1.3.1.js"></script><script type="text/javascript">$(function(){//测试JQery 样式相关的方法//1.hasClass(): 某元素是否有指定的样式alert("div 是否有 SubCategoryBox CSS样式 : "+$("div:first").hasClass("SubCategoryBox"));//2.移除样式$("div:first").removeClass("SubCategoryBox");alert("移除后 是否有 CSS样式 : "+$("div:first").hasClass("SubCategoryBox"));//3.添加样式$("div:first").addClass("SubCategoryBox");//4.切换样式 , 存在则去除,没有则添加$(".showmore").click(function(){$("div:first").toggleClass("SubCategoryBox");return false;});//5.获取和设置元素透明度:opacity 属性alert("获取页面透明度为 : "+$("div:first").css("opacity"));$("div:first").css("opacity",0.5);//设置透明度//6.宽度和高度alert($("div:first").width());//获取alert($("div:first").height());$("div:first").wdith(500);$("div:first").height(90);//7.获取元素在当前窗口中的相对位移: offset()//返回对象包含了两个属性: top , left 该方法只对可见元素有效alert("TOP : "+$("div:first").offset().top);alert("LEFT : "+$("div:first").offset().left);})</script></head><body><div class="SubCategoryBox"><ul><li ><a href="#">佳能</a><i>(30440) </i></li><li ><a href="#">索尼</a><i>(27220) </i></li><li ><a href="#">三星</a><i>(20808) </i></li><li ><a href="#">尼康</a><i>(17821) </i></li><li ><a href="#">松下</a><i>(12289) </i></li><li ><a href="#">卡西欧</a><i>(8242) </i></li><li ><a href="#">富士</a><i>(14894) </i></li><li ><a href="#">柯达</a><i>(9520) </i></li><li ><a href="#">宾得</a><i>(2195) </i></li><li ><a href="#">理光</a><i>(4114) </i></li><li ><a href="#">奥林巴斯</a><i>(12205) </i></li><li ><a href="#">明基</a><i>(1466) </i></li><li ><a href="#">爱国者</a><i>(3091) </i></li><li ><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div></div></body></html>

0 0