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. 【BZOJ 1579】 1579: [Usaco2009 Feb]Revamping Trails 道路升级 （最短路）

    1579: [Usaco2009 Feb]Revamping Trails 道路升级 Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M< ...

  2. 网页被卷去的高： document.body.scrollTop;

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  3. 【HighCharts系列教程】二、Highcharts结构及API文档

    一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...

  4. js中焦点的含义是什么

    焦点即是光标   焦点是在页面上屏幕中闪动的的小竖线,鼠标点击可获得光标,Tab键可按照设置的Tabindex切换焦点

  5. Unity 3d中Shader是什么，可以吃吗？

    众所周知,Unity3d是一款跨平台非常广的游戏引擎,上手容易,界面友好,集成功能众多,是目前开发手游的主流引擎.本人有幸使用Unity 3d进行开发已一年多时间,已领略了这歀引擎的强大之处. 编写s ...

  6. Shell条件与测试

    分类参考 文件状态测试 -b filename 当filename 存在并且是块文件时返回真(返回0) -c filename 当filename 存在并且是字符文件时返回真 -d pathname ...

  7. (简单) POJ 1797 Heavy Transportation，Dijkstra。

    Description Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can no ...

  8. iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片

    1.改变高度 自定义UINavigationBar的新类别: //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation. ...

  9. 16、手把手教你Extjs5（十六）Grid金额字段单位MVVM方式的选择

    这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...

  10. css 弹出框

    最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...