第二十二篇 jQuery 学习4 内容和属性
jQuery 内容和属性
这节课，我们学习使用jQuery来控制元素的内容、值和属性。
html() 控制所选元素的内容(包括HTML标记)；
text() 控制所选元素的内容；
val() 控制表单里value的值；
attr() 控制属性，比如a标签里的href 。
这几个方法特别的简单好用，那么怎么用呢？它的格式写法，我们来瞧瞧源代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery 学习4</title> <!--使用jQuery一定不要忘记引用jQuery文件--> <script src="../js/jquery-1.12.2.min.js"></script> </head> <body> <div id="div1">用html()方法来控制我，<span>你会看到div里包含的内容和标签</span></div> <p id="p1">用text()方法来控制我，<span>你只能看到文本内容</span></p> <input id="in" type="text" value="龙枫"/> <a id="a" href="http://www.tudou.com">百度</a> <br/><br/> <!--我们采用js的点击事件来测试jQuery--> <button onclick="div1()">点击我获取div的html内容</button> <button onclick="p1()">点击我获取p的text文本内容</button> <button onclick="input1()">点击我获取input的val值</button> <button onclick="a1()">点击我获取a的href属性的值</button> <script> //function声明一个函数 function div1(){ //运行此函数，我们就玩jQuery的代码 alert($("#div1").html()); //这里我们还是用alert方法来弹出提示，看效果 //大家可以看到，js和jQuery是可以一起的，相互摩擦，而并非使用jQuery就无法使用js } function p1(){ alert($("#p1").text()); } function input1(){ alert($("#in").val()); } function a1(){ alert($("#a").attr("href")); } //以上代码，就会弹出指定的内容。 //同学们注意，val()方法，是弹出的值，"值"，不是文本内容 //attr()方法，设置和改变属性值的 </script> <br/><br/> <button onclick="div2()">点击我修改div的内容(包括标签)</button> <button onclick="p2()">点击我修改p的text文本内容</button> <button onclick="input2()">点击我修改input的val值</button> <button onclick="a2()">点击我修改a的href属性的值</button> <!--下面我们再写一个script，页面上是可以写多个script 老师这里分开写，同学们好区分--> <script> function div2(){ //同学们注意，用jQuery的html()方法修改内容，是很简单的，看格式 $("#div1").html("我是div，<b>我被改变了，并且标签也被改变成b标签了</b>"); //同学们刷新页面，触发此事件之后，会发现，后面的内容被加粗了，是因为b标签是加粗效果 //我们打开F12查看源码，会发现，span元素被删除了，然后加上了b标签， //意思是#div1元素的内容，包括标签全部都变成了上面html()括号里的内容 } function p2(){ $("#p1").text("我是p，<b>我被改变了文本内容</b>"); //用text()方法写成和html()方法一样的内容，在页面上触发事件 //同学们会看到span元素也被删除了，但是并没有出现b元素，在这里，b元素也被当成了字符串内容 //所以text只能控制文本内容，无法设置HTML标签的 } function input2(){ $("#in").val("你帅吗？"); //按下F12查看源码，会发现，input元素里的value也不会发生改变 //是因为，页面加载完成之后，你即使修改input，源码里的value也不会变动 //同学们不用担心提交数据到后台，只要页面上的input变成了“你帅吗”，那么提交给后台的也会是这个值 } function a2(){ //我们先修改a标签的文本内容，再修改它href属性的值 $("a").text("土豆").attr("href","http://www.tudou.com"); //这里可以看到，这些方法是可以一起使用来控制一个元素的，只需要在后面加一个"."一个点就OK了 //attr()方法的使用，两个参数，第一个是属性，第二个则是值。 } </script> <p>以上效果，同学们可以先测试第一行，弹出提示，再测试第二行按钮，修改内容、属性值之后，再来测试第一行的按钮，试试效果</p> </body> </html>
老师这里额外说一下，以后这些东西会用到神马地方，attr()方法，可以修改图片的路径，很多时候我们玩复选框，但是复选框没法修改css样式，所以我们就可以用图片来代替，第一张图片是未选中，当我点击，就修改它的属性src，值就改成第二张图片已选中的，这样就可以轮流切换；还有一种，是登录的时候，用户密码一般都是 <input type="password" /> 不可见的对吧，输入就是一堆星号，我们就可以放一个按钮在旁边，比如一张图(眼睛的图片)，当我点击这张图，切换input的password变成text 一下就是可见的了。
val()也很重要，我们登录的时候，如果前台判断，它输入的格式、长度等，那么我们就要用到val()方法来获取它的值，才能判断，否则获取不了，就无法正常判断了。
text()和html()都是控制内容的，但html()可控制HTML标签，而text()则只能单纯的控制文本内容，所以同学使用的时候要区分开。
上面代码同学们可以多测试一下，还是很简单的，就是注意写法格式
