第二十二篇 jQuery 学习4 内容和属性

来源：互联网发布：在线app制作软件编辑：程序博客网时间：2024/06/10 15:54

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()则只能单纯的控制文本内容，所以同学使用的时候要区分开。

上面代码同学们可以多测试一下，还是很简单的，就是注意写法格式

阅读全文

0 0