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. [转]Qt5.0 连接 webkit 错误解决

    新版的qt5.0把webkit拆分为webkit和webkitwidgets两个部分,所以如果遇到错误: Undefined symbols for architecture x86_64:“QWeb ...

  2. PAT (Advanced Level) 1021. Deepest Root (25)

    先并查集判断连通性,然后暴力每个点作为根节点判即可. #include<iostream> #include<cstring> #include<cmath> #i ...

  3. LintCode 11 二叉查找树的搜索区间

    题目链接:http://www.lintcode.com/zh-cn/problem/search-range-in-binary-search-tree/ 1.描述 给定两个值 k1 和 k2(k1 ...

  4. CSS实现三角形方法二--border+content

    方法说明: 1.将一个div块的内容设置为空(content=" "), 2.设置它的边框(上下左右)颜色为透明(transparent), 3.设置它的左侧边框颜色为pink. ...

  5. 一个UWSGI的例子

    摘要:uwsgi执行顺序:启动master进程,执行python脚本的公共代码(import同一层).然后生成worker进程,uwsgi.post_fork_hook=init_functions, ...

  6. c# 封装的文件夹操作类之复制文件夹

    c#  封装的文件夹操作类之复制文件夹 一.复制文件夹原理: 1.递归遍历文件夹 2.复制文件 二.FolderHelper.cs /// <summary> /// 文件夹操作类 /// ...

  7. 解决在某些IE浏览器下字符乱码的问题

    习惯上我们写字符声明都是 <meta charset="utf-8"> 在绝大多数浏览器都没有问题,但是在操蛋的IE上有时候会出现编码错误!! 解决方案: <me ...

  8. iOS开发——打开手机相册，获取图片

    1.添加代理UIImagePickerControllerDelegate 2.设置点击跳转事件 - (IBAction)picButton:(UIButton *)sender { NSLog(@& ...

  9. LPC2478时钟模块详解

    时钟框图如上图,系统时钟来源分别是内部4M的RC振荡器和外置晶振,RTC模块在某些情况下也可以作为主时钟,经过系统时钟选择s\de时钟需要经过PLL倍频(或者不倍频),处理过的PLL输出USB时钟分频 ...

  10. iOS 生产证书 分类： ios相关 app相关 2015-05-22 14:49 175人阅读 评论(0) 收藏

    首先登陆https://developer.apple.com(99美元账号) 选择iOS Developer program 板块下的 Certificates,Identifiers & ...