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. 笔记整理--HTTP Header 详解

    HTTP Header 详解 2013/09/21 | 分类: IT技术 | 0 条评论 | 标签: HTTP 分享到:36 原文出处: zcmhi HTTP(HyperTextTransferPro ...

  2. Mysql 中文乱码问题完美解决方案

    MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin1 2.table的语系设定问题(包含character与collation) 3.客户端程式(例如 ...

  3. PHP :Call to undefined function mysql_connect()

    今天配置apache ,php,mysql 的时候,一直报(Call to undefined function mysql_connect()),PHP一直连接不上数据库,从网上查,答案也都是千篇一 ...

  4. 可能是最简单的方式：利用Eclipse创建基于Maven的Web项目

    1. 新建一个maven项目 2.在弹出框中选择创建一个简单项目 3. 然后输入参数,需要注意的是,在packagin中,选择war,web项目应该选择war 4. 点击finish后,基本项目结构就 ...

  5. reactor 类库，基于事件编程

    https://github.com/reactor https://github.com/reactor/reactor-samples/ https://github.com/ReactiveX/ ...

  6. Fox And Two Dots

    B - Fox And Two Dots Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I6 ...

  7. 计算机学院大学生程序设计竞赛（2015’12） 1004 Happy Value

    #include<cstdio> #include<cstring> #include<cmath> #include<vector> #include ...

  8. Quick Cocos2dx Http通讯 JSON

    参考: 1 http://stackoverflow.com/questions/5975952/how-to-extract-http-message-body-in-basehttprequest ...

  9. xcode 6 出现的新问题

    1.prefix.pch文件的使用 [1].需要自己创建 点击new file-->选择IOS中的Other选项卡,选择PCH File [2].创建完后需要设置一下才能成功 Prefix He ...

  10. man info --help区别

    --help: 是一个工具选项,可以用来显示一些工具的信息 man : 可以显示系统手册页中的内容,这些内容大多数都是对命令的解释信息 PS: () Space 键可以显示下一屏的文本信息 () q ...