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()则只能单纯的控制文本内容,所以同学使用的时候要区分开。
上面代码同学们可以多测试一下,还是很简单的,就是注意写法格式