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. Python3基础 使用list() 生成一个空列表

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  2. 你真的会使用XMLHttpRequest吗？

    看到标题时,有些同学可能会想:“我已经用xhr成功地发过很多个Ajax请求了,对它的基本操作已经算挺熟练了.” 我之前的想法和你们一样,直到最近我使用xhr时踩了不少坑儿,我才突然发现其实自己并不够了 ...

  3. 进程间通信——FIFO（多个客户进程，一个服务进程）

    FIFO简介 FIFO就是Unix的一种复合POSIX标准的进程间通信机制.他又称为命名管道,跟管道的不同点是,每个FIFO都有一个路径名与之关联. FIFO虽然有路径名,但是他这中文件是在内核态(管 ...

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

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

  5. [iOS]C语言技术视频-17-指针变量高级用法练习二(使用堆内存完成链表结构的存储)

    下载地址: 链接: http://pan.baidu.com/s/1kTmwIYr 密码: j7xq

  6. astah* professional 6.9.0

    下载地址:http://members.change-vision.com/files/astah_professional/6_9_0 破解方法:按照Astah Professional 6.9后打 ...

  7. 关于NOMINMAX这个预处理宏

    标准库在<algorithm>头中定义了两个模板函数std::min() 和 std::max().通常用它可以计算某个值对的最小值和最大值.可惜在 Visual C++ 无法使用它们,因 ...

  8. SpingMvc 注解的使用

    1.使用注解减少配置xml文件 2.注解可以降低耦合度 3.使用注解编写的普通类 import javax.servlet.http.HttpServletRequest; import org.sp ...

  9. Oracle GoldenGate 异构平台同步（Mysql到Oracle）

    一.OGG安装配置(源端) 1.OGG下载 http://www.oracle.com/technetwork/cn/middleware/goldengate/downloads/index.htm ...

  10. java war 打包、解压命令（转载）

    经常将工程打包成war包,打包如下: // 将当前目录打包成war包 jar   cvf   temp.war   */  . 命令格式: java cvf 打包文件名称 要打包的目录 打包文件保存路 ...