jQuery html text val方法使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

<style type="text/css">

    .s1{

        width: 100px;

        height: 100px;

        background-color: pink;

    }

    .s2{

        width: 50px;

        height: 50px;

        background-color: green;

    }

</style>

</head>

<body style="margin:150px;">

    <div id="div001">div001</div>

    <div id="div002">

        <select id='slt001'>

            <option value="optval1">opt1</option>

            <option>opt2</option>

        </select>

        <select id='slt002' multiple="multiple">

            <option>opt1</option>

            <option>opt2</option>

            <option>opt3</option>

        </select>

        <select id="slt003" multiple="multiple">

            <option value="optval1">opt1</option>

            <option value="optval2">opt2</option>

            <option value="optval3">opt3</option>

        </select>

    </div>

    <div id="div003">

        <input type="checkbox" id="chk001" ><label for="chk001">chk001</label>

        <input type="checkbox" id="chk002" value="chk002" ><label for="chk002">chk002</label>

    </div>

    <div id="div004">

        <input type="checkbox" value="check1"/> check1

        <input type="checkbox" value="check2"/> check2

        <input type="radio" value="radio1"/> radio1

        <input type="radio" value="radio2"/> radio2

        <input type="text">

    </div>

    <div>

        <button id="btn001">click me to get div001 html/text/val </button>

        <button id="btn002">click me to get slt001 html/text/val </button>

        <button id="btn003">click me to get slt002 html/text/val </button>

        <button id="btn004">click me to get slt003 text/val </button>

        <button id="btn005">click me to get slt003 option text/val </button>

        <button id="btn006">click me to get chk001 html/text/val </button>

        <button id="btn007">click me to get chk002 html/text/val </button>

        <button id="btn008">click me to set chk002 selected </button>

        <button id="btn009">click me to run demo </button>

    </div>

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

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index035.js"></script>

</body>

</html>
$(function() {

    $('#btn001').click(btn001Click);

    $('#btn002').click(btn002Click);

    $('#btn003').click(btn003Click);

    $('#btn004').click(btn004Click);

    $('#btn005').click(btn005Click);

    $('#btn006').click(btn006Click);

    $('#btn007').click(btn007Click);

    $('#btn008').click(btn008Click);

    $('#btn009').click(btn009Click);

});

function btn001Click() {

    var string = $('#div001').html();

    console.log(string);

    var str2 = $('#div001').text();

    console.log(str2);

    // 返回的是空字符串；

    var str3 = $('#div001').val();

    console.log(str3);

}

function btn002Click() {

    var str1 = $('#slt001').html();

    console.log(str1);

    var str2 = $('#slt001').text();

    console.log(str2);

    // 如果options没有 value，就选其文本值；

    var str3 = $('#slt001').val();

    console.log(str3);

}

function btn003Click() {

    var str1 = $('#slt002').html();

    console.log(str1);

    // 得到的是opt1/opt2/opt3，不是选中的option的text；

    var str2 = $('#slt002').text();

    console.log(str2);

    // 如果options没有 value，就选其文本值；

    // 多选select返回的都是一个数组，选中一个元素数组长度就是1；

    var str3 = $('#slt002').val();

    console.log(str3);

}

function btn004Click() {

    // 得到的是opt1/opt2/opt3，不是选中的option的text；

    var str2 = $('#slt003').text();

    console.log(str2);

    var str3 = $('#slt003').val();

    console.log(str3);

}

function btn005Click() {

    // 这样得到的值是没有分隔的字符串；

    var str2 = $('#slt003 option:selected').text();// 与这个一样$('#slt003').find('option:selected').text();

    console.log(str2);

    var str3 = $('#slt003').val();

    console.log(str3);

    // 返回的是[domopt1,domopt2]；

    var opts = $('#slt003 option:selected');

    // 遍历获取select中选中的option的text、value；

    for (var i = 0, len = opts.length; i < len; i++) {

        // dom对象转换为jQuery对象；

        var $o = $(opts[i]);

        console.log($o.text() + '---' + $o.val());

    }

}

function btn006Click() {

    // 得到空字符串

    var str1 = $('#chk001').html();

    console.log(str1);

    // 得到空字符串

    var str2 = $('#chk001').text();

    console.log(str2);

    // 如果没有value，得到的是字符串on

    var str3 = $('#chk001').val();

    console.log(str3);

}

function btn007Click() {

    // 得到空字符串

    var str1 = $('#chk002').html();

    console.log(str1);

    // 得到空字符串

    var str2 = $('#chk002').text();

    console.log(str2);

    // 不管是否选中，都会返回chk002；

    var str3 = $('#chk002').val();

    console.log(str3);

}

function btn008Click() {

    // 这样修改了chk002的值，但是没有选中的效果；

    // $('#chk002').val('chk2');

    // 如果写成这样，就不能正常修改值了；

    // $('#chk002').val(['chk2']);

    // 这样会把所有的input的值都修改为chk002；

    // $('input').val('chk002');

    // 这样写就可以进行chk002的选中了；

    $('input').val([ 'chk002' ]);

}

function btn009Click() {

    // 这样可以进行check2,radio1的选中；同时也会使input.text的值变成'check2,radio1'

    // $("input").val([ "check2", "radio1" ]);

    // 这样可以防止把input.text的内容进行修改；

    $('input[type=checkbox]').val([ "check2", "radio1" ]);

}

jQuery html text val方法使用的更多相关文章

  1. [jQuery]html(),text(),val()方法的区别

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但 ...

  2. jQuery 属性操作 - val() 方法

    val() 方法返回或设置被选元素的值. 元素的值是通过 value 属性设置的.该方法大多用于 input 元素. 如果该方法未设置参数,则返回被选元素的当前值. <html> < ...

  3. jquery .html(),.text(),.val()用法

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...

  4. jquery的.html(),.text()和.val()方法

    新人一段时间没写前端代码就有点忘记了,现在来复习一下..html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法: .html() 不传入值,就是 ...

  5. jquery中html(), text(),val()区别(zhuan)

    https://zhidao.baidu.com/question/307317838.html http://www.cnblogs.com/aqbyygyyga/archive/2011/11/0 ...

  6. 使用val()方法设置表单中的默认选中项

    有时候我们展示给用户的表单中的checkbox,radio,selec等标签的一些项是默认选中的.比方:当用户改动文章的时候,假设相应的栏目为下拉框的话,那么它的默认选中值应该是原来的栏目位置. 能够 ...

  7. jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 解密jQuery内核 DOM操作方法（二）html,text,val

    回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 看图对照区别 innerText 设置 ...

  9. jquery的html,text,val

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...

随机推荐

  1. php查找文件内容

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><?ph ...

  2. Chapter 1 First Sight——6

    "You didn't need to do that, Dad. I was going to buy myself a car." 你不需要这样,父亲,我会自己买一辆车的 &q ...

  3. MySQL5.7中使用JSON（一）

    因为项目需要,存储字段存储成了JSON格式,在项目中是将查询出来的值通过jackson转成相应的bean进行处理的,觉得不够简单方便. 偶然下,知道了MYSQL5.7原生支持SQL,今天一回来就折腾安 ...

  4. HDU1251-统计难题（字典树）

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  5. mysql基础---日志文件

    一 基本日志文件 MYSQL有不同类型的日志文件(各自存储了不同类型的日志),从它们当中可以查询到MYSQL里都做了些什么,对于MYSQL的管理工作,这些日志文件是不可缺少的. 1.错误日志(The ...

  6. 小P的强力值

    小P的强力值 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi在虚拟世界中有一只小宠物小P.小P有K种属性,每种属性的初始值为Ai.小Ho送给了小Hi若干颗药丸,每 ...

  7. php中serialize、unserialize与json_encode、json_decode比较

    性能比较 同一个变量编码或解码10000次,每个函数执行10000次所需时间 php5.2.13 json : 190 serialize : 257 json_encode : 0.08364200 ...

  8. Java的JDBC事务详解

    Java的JDBC事务详解         分类:             Hibernate              2010-06-02 10:04     12298人阅读     评论(9) ...

  9. (中等) HDU 5293 Tree chain problem，树链剖分+树形DP。

    Problem Description   Coco has a tree, whose vertices are conveniently labeled by 1,2,…,n.There are ...

  10. windows 下nginx 虚拟主机搭建

    需要在 nginx.conf里面引入刚才配置的那个文件   第一步 加东西 http的节点里面加上 一定要注意的是:必须以  ;  结尾 include D:/phpen/nginx-1.3.6/co ...