<!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>

（19）jQuery操作文本和属性的更多相关文章

  1. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  2. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jQuar总结10:jQuery操作元素的属性

    jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...

  4. Jquery操作文本内容（三个方法：html()、text()、var()）

    Jquery操作文本内容(三个方法:html().text().var()) 一.html()获取和设置文本内容和标签 1.获取标签里的结构和内容 $("ul").html() / ...

  5. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  6. 《从零开始学习jQuery》：用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  7. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  8. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  9. JQuery操作元素的属性与样式及位置 复制代码

    <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...

随机推荐

  1. AI工具（星形工具）(光晕工具）(移动复制）（柜子绘制）5.12

    星形工具;基本操作与矩形一样,拖动星形工具绘制,点击键盘上箭头增加星形的角数.下箭头减少星形的角数. 选择星形工具在屏幕单击,出现星形对话框,可以设置半径1半径2,角点数.图中的星形就可以用星形工具绘 ...

  2. 批量设置样式json版

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. 个人前端学习路线图与github优秀前端开发者的路线图推荐

    1.个人目前学习的路线图 2.github优秀前端开发者的路线图推荐 打开github首页,在搜索框输入developer-roadmap,搜索github前端路线图 选择kamranahmedse/ ...

  4. day03 is 与== 常量

    is身份运算:比较的是id是否相等 ==判断值是否相等 ... 值相等id不一定相等 >>>x=1111111111111111111111111111111111111111111 ...

  5. Springboot+MyBatis+mysql+jsp页面跳转详细示例

           SpringBoot与MyBatis搭建环境,底层数据库为mysql,页面使用JSP(官网上不推荐使用jsp),完成从数据库中查询出数据,在jsp页面中显示,并且实现页面的跳转功能. 项 ...

  6. day19 反射

    今日所学 : 1. isinstance , type , issubclass 2.如何区分方法和函数(代码) 3.反射(重要) 1. isinstance ,type ,issubclass is ...

  7. day06 小数据池,再谈编码

    今日所学 一.  小数据池 二.  is 和==的区别 三.  编码的问题 一.小数据池的作用 用来缓存数据 可以作用的数据类型: 整数(int), 字符串(str), 布尔值(bool). 什么是块 ...

  8. selenium（七）expected_conditions EC

    判断一个元素是否存在,如何判断alert弹窗出来了,如何判断动态的元素等等一系列的判断,在selenium的expected_conditions模块收集了一系列的场景判断方法, 一.功能介绍和翻译 ...

  9. docker pure-ftpd

    FROM alpine:3.7ADD http://dl-4.alpinelinux.org/alpine/edge/testing/x86_64/pure-ftpd-1.0.47-r0.apk /r ...

  10. node(2) EventEmitter类 事件队列 事件和error事件方法

    事件队列的核心:事件触发与事件监听器功能的封装. // 引入 events 模块 var events = require('events'); // 创建 eventEmitter 对象 var e ...