zoukankan      html  css  js  c++  java
  • (19)jQuery操作文本和属性

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jq操作文本和操作属性</title>
    </head>
    <body>
    <div class="box">box</div>
    <input class="inp" type="text">
    <button class="btn">打印输入的内容</button>
    <button class="getImg">获取图片</button>
    <img class="img" src="" alt="">
    </body>
    <script src="js/jq.js"></script>
    <script>
    //jq获取文本
    var txt = $('.box').text();
    console.log(txt)

    //修改纯文本
    $('.box').text('这里填写需要修改的文本');

    //设置html类型文本,直接修改标签类型
    $('.box').html('<b>这样写就是修改标签的类型</b>>')

    //input框
    $('.btn').click(function () {
    //获取input框的内容并打印,打印框内没有内容就输出空
    var v = $('.inp').val(); //val就是获取,val不给值就是获取,给值就是赋值
    console.log(v);
    //打印框的内容置空(用户在输入框中输入内容,点击按钮后提交内容后将输入框内容清除),直接赋值一个空内容即可
    $('.inp').val("");
    })

    //操作属性
    //img标签的内容属于资源,既不是text,也不是value,而是src
    //操作按钮显示图片和隐藏图片
    $('.getImg').click(function () {
    //先获取img标签下sc的值
    var src = $('img').attr('src');
    if (src){
    $('.img').attr('src',''); //如果有值就设置为空
    }else{
    //对img标签的src进行赋值
    $('.img').attr('src','http://scimg.jb51.net/allimg/150803/14-150P315312YB.jpg') //attr就是操作全局属性,如果只有一个src就是获取原来的src,然后再给一个值就是设置赋值
    }
    })


    </script>
    </html>
  • 相关阅读:
    js实现点击隐藏图片
    绝对定位给图片四角加上图片修饰
    雪碧图实现登陆页面
    弹性盒模型
    数组练习--求数组和,平均值,最大值,最小值
    h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target
    h5与c3权威指南笔记--css3新属性选择器
    闲聊Java里的随机数
    Python之简单抓取豆瓣读书信息
    中本聪比特币论文
  • 原文地址:https://www.cnblogs.com/shizhengquan/p/10440018.html
Copyright © 2011-2022 走看看