• 第二十二篇 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()则只能单纯的控制文本内容,所以同学使用的时候要区分开。
     
    上面代码同学们可以多测试一下,还是很简单的,就是注意写法格式
     
  • 相关阅读:
    第一篇:理论篇
    day 3:注释,缩进
    HTML的报告
    SAP DIALOG屏幕新增搜索帮助
    财务凭证科目替代(未写完)
    表维护生成器本地转请求包
    web安全之SQL注入
    Ubuntu16.04 下安装Sublime Text 3
    ubuntu16.04 下安装配置python3.6
    Ubuntu 16.04 下安装 PyCharm
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590462.html
Copyright © 2020-2023  润新知