>

JQuery从头学起第2讲,二级联合浮动

- 编辑:www.bifa688.com -

JQuery从头学起第2讲,二级联合浮动

问题情境:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script>
function selectAllOptionVal() {

复制代码 代码如下:

  var arr=[aabbcc,112233];

var str = "";
$("#select-option-one option").each(function(i) {

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery3.aspx.cs" Inherits="JQuery_1.JQuery3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<head runat="server">
<title></title>
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function Get() {
var v1 = $("#txt1").val();//获取文本框输入的值
var v11 = $("#txt1").attr("value");//获取文本框输入的值,效果和上面方法一致
var v2 = $("#txt2").val();//文本框输入的密码的值
var v3 = $("input[name='ck']:checked").val();//获取checkbox勾上后的值,
var v4 = $("#h1").val();//获取隐藏控件的值
var v5 = $("input[name='rdo']:checked").val();//获取一组radio被选中的值
var v6 = $("#ss").val();//获取下来框选中的value
var v7 = $("select[name='s1'] option[value='" v6 "']").text();//选取下拉框选中的文本
var v8 = $("select[id='ss'] option[value='" v6 "']").text();//选取下拉框选中的文本,上面是通过name来获取,这里是通过ID来获取,但这里的ID不能加#
alert(v1 "," v2 "," v3 "," v4 "," v5 "," v6 "," v8)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" />
<input type="password" id="txt2" />
男<input type="checkbox" id="ck1" name="ck" value="男" />
<input type="hidden" id="h1" value="www.54talk.cn" />
www<input type="radio" id="r1" name="rdo" value="www" />
54talk<input type="radio" id="r2" name="rdo" value="54talk" />
cn<input type="radio" id="r3" name="rdo" value="cn" />
<select name="s1" id="ss">
<option value="0">男</option>
<option value="1">女</option>
</select>
<input type="button" onclick="Get()" value="取值"/>
</div>
</form>
</body>
</html>

  var html = "";

var v = $(this).val();
str = str "n" v;
});

以上DEMO中的代码是我一个个敲出来的,都经过测试,大家可以放心的使用。这个DEMO中主要加了对输入框的几种类型的取值,这也列举了取值的两种方式,DEMO中除了介绍了文本框的取值外还介绍了下拉框,单选框,多选框的取值,这里用到了复合属性选择器,需要同时满足多个条件时使用。不像文本框那么单纯,用个ID就可以获取到值。在获取select的value的时候也用个复合属性选择器就可以了,但是要获取下拉框的文本就要先得到value,再根据value去获取text。

  for(var i =0;i<arr.length;i ){

alert(str);
}

今天这一讲就讲这么多,下一讲我们讲用JQuery来对这些常用控件赋值,因为我们在做页面初始化的时候,常常需要对某些控件进行初始化。

    html = '<li id="' arr[i] '" onclick="select(' arr[i] ')">helloworld</li>'

function selectedOptionVal() {

代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery3.aspx.cs" Inherits="JQuery_1.JQuery3" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...

  }

var s = $("#select-option-one").val();
alert(s);
}

  $("ul").append(html);

function noSelectedOptionVal() {

  function select(id){

var str = '';
$("#select-option-one option").each(function(i) {

    var identifier = "#" id; 

if (!$(this).is(":selected")) {

    $(identifier).html(); //抛异常的位置 

str = str "n" $(this).val();
}

  }

});
alert(str);

分析:

}

  jQuery的ID选择器要用的是字符串,当传给ID选择器的是数字时会抛异常。将参赛改为字符串即可。

function oneToTwo() {

更正:

v = $("#select-option-one").val();

  循环体中的onclick="select(' arr[i] ')"改为onclick="select('' arr[i] '')"。是转义符,用单引号将参数包裹起来。

/*
//获取被选中的参数作为值可以异步获取数据
$.ajax({

});
*/

//为第二级加载数据
//先清空上一次加载的内容
$("[name='select-option-two-option']").remove();
//以下是例子的数据
var arr = new Array(5, 6, 7, 8, 9, 10);

//拼接的html
var str = "";
for (var i = 0; i < arr.length; i ) {

str = str

  • "<option name='select-option-two-option' value='" arr[i] "'>"
  • arr[i] "</option>";

}

//为第二级select添加内容
$("#select-option-two").append(str);
}
</script>
</head>
<body>

<table>

<tr>
<td><select id="select-option-one" onchange="oneToTwo();">
<option value='1'>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value='5'>5</option>
</select>        <select id="select-option-two">

</select></td>
<td>
<button onclick="selectAllOptionVal();">获取所有option的值</button>      
<button onclick="selectedOptionVal();">获取选中option的值</button>      
<button onclick="noSelectedOptionVal();">获取所有未被选中的值</button>
</td>
</tr>

</table>

</body>
</html>

本文由必发88官网发布,转载请注明来源:JQuery从头学起第2讲,二级联合浮动