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

 

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