jQuery each 复选全选遍历等DEMO

最新推荐文章于 2023-12-08 11:00:27 发布

jamv163

最新推荐文章于 2023-12-08 11:00:27 发布

阅读量634

点赞数

分类专栏： .net

.net 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用jQuery进行DOM操作和事件处理的方法，包括选择器、属性操作、表单元素处理、事件绑定、按钮功能实现等。通过实例展示了如何利用jQuery简化网页交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var ckTimeArray = eTime.split(':');
$(ckTimeArray).each(function(){
var ckt = this;
$('#'+ckt).attr('checked',true);
});
数组取属性值的时候需要加 ‘#’ 取对象
$('input[type="checkbox"]').each(function(){
$(this).attr('checkbox',true); // 不需要加 # ,封装过啦
});
<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>My JSP 'jQueryCry.jsp' starting page</title>
<script type="text/javascript"src="<%=path %>/YXTWebPage/album/js/jquery.js"></script>
<script type="text/javascript"src="<%=path %>/YXTWebPage/album/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function()
{
//alert($("#cry").val());
$("#cry").val('****update****');
var aRadioList = $('input[type="radio"]',document.forms[0]);
//alert(aRadioList.size()+' - 个radio');
// 遍历第一个表单下所有类型为radio元素的值
aRadioList.each(
function()
{
//alert($(this).val());
});
// 遍历第一个表单下所有类型为 input:checkbox 元素的值
var aCheckBoxArray = $('input:checkbox',document.forms[0]);
aCheckBoxArray.each(
function()
{
//alert($(this).val());
});
// 获取下拉菜单的值
$('#choose').change(
function ()
{
alert($('#choose').val());
});
// 复选框全选、取消全选
$('#checkedAll').click(
function()
{
/* $('#checkbox1').attr('checked','true'); //打钩
$('#checkbox2').attr('checked',''); //不打钩
$('#checkbox3').attr('checked','true'); //打钩
*/
//alert($('#checkbox3').attr('checked')); checkbox3 为 FALSE
if($(this).attr('checked') == true) //全选
{
// 这里可以勾选一部分复选框如:$('input[name != ^= $= 匹配多个值 $("input[id][name$='man']") 含有ID name 已 man 开头
$('input[name="ckn"]').each(
function()
{
$(this).attr("checked",true);
});
}else
{
$('input[name="ckn"]').each(
function()
{
$(this).attr("checked",'');
});
}
});
// checkBox
$('input[name="ckn"]').each(//$('input:checkBox').each(
function()
{
$(this).click(
function()
{
alert($(this).val());
});
});
// radio
$('input[type="radio"]').each( //$('input:radio').each(
function()
{
$(this).click(
function()
{
alert($(this).val());
});
});
// Button
$('#btn1').click(
function()
{
$('#btn2').attr('disabled','disabled');
});
// 一次性事件
$('#btn2').one('click',
function()
{
$('<input type="text" name="radi" id="t" />').appendTo("#ce").click(
function()
{
alert('指定ID DIV 层内新增 HTML');
$('#btn3').css( "background", "red" );
$('#t').hide();
$('#hiddenId').show();
});
alert('$(\'#id\').one (\'click\',function )');
});
// bind
$('#btn3').bind('click',
function()
{
if($('#btn2').attr('disabled')==true)
{
$('#btn2').attr('disabled','');
}else
{
$('#btn2').attr('disabled','disabled');
}
});
//img each
$('#imgBtn').click(
function()
{
$('img').each(
function(i)
{
alert('i = '+i);
this.src ='test'+i+'.jpg';
});
alert('imgLength = '+$('img').length); // size()
alert('$(\'img\').get(0) = '+$('img').get(0));
alert('而实际上是元素数组 get() ');
alert('该 img 数组的长度:'+$('img').get().length);
});
/* li index
$('li').each(
function()
{
$(this).click(
function()
{
var iIndex = $('li').index($(this));
alert('index 用法：'+iIndex);
});
})
*/
// date
$('#data').data('xKey','将数据保存在元素的一个key里面');
var sData = $('#data').data('xKey');
//alert('data:'+sData);
$('#data').removeData('xKey');
//alert('remove:'+$('#data').data('xKey'));
// 在给定的祖先元素下匹配所有的后代元素
var aInputArray = $('form > input');
//alert(aInputArray.size());
aInputArray.each(
function()
{
var sInputValue = $(this).val();
//alert(sInputValue);
});
//table first
var sTableFirst = $('tr:first');
var sTableLast = $('tr:last');
var eqTr = $('tr:eq(1)'); //第二行
var gtTr = $('tr:gt(0)'); // 大于
var ltTr = $('tr:lt(1)'); //匹配所有小于给定索引值的元素
// contains
var aContainsDiv = $('div:contains("John")');
//alert(aContainsDiv.length);
aContainsDiv.each(
function()
{
//alert($(this).text());
});
//map 将一个数组中的元素转换到另一个数组中 $.map()
var mapValue = $('input').map
(
function()
{
return $(this).val();
}
).get().join(',');
//alert(mapValue);
var xMap = $.map( [0,1,2],
function(n)
{
return n + 4;
}
);
//alert(xMap);
//append 向每个匹配的元素内部追加内容。
$('p').append('Hello,jQuery');
$('btn3').append('append');
//appendTo 把所有匹配的元素追加到另一个指定的元素元素集合中
$('p').appendTo('div');
// prepend , prependTo 类似同上
//replaceWith
//$('p').replaceWith('<b> replaceWith.</b>');
//$('<b> replaceWith.</b>').replaceAll("p");
//empty
//$('p').empty();
$('p').remove();
// clone 复制
$('p').clone().appendTo('div');
// bind
$('#idSub').bind('click',
function(event)
{
return true;
//event.preventDefault();
//alert('submit');
});
//live
$("li").live("click",
function()
{
$(this).addClass("active"); //live事件可以被阻止冒泡
}
).eq(0).bind("click", function()
{
$(this).addClass("active"); //普通的click事件是无法阻止冒泡的
});
$("li b").live("click", function(){
$(this).addClass("active");
return false; //阻止冒泡及阻止浏览器默认行为
});
});
</script></head><body><form action="jQueryCry.jsp" name="frm" method="post">
<input type="button" id="idSub" value="sub" />
<ul>
<li><b>Google</b></li>
<li><b>Yahoo</b></li>
</ul>
<p>Hello2, <span>Person</span> <a href="#">and person</a></p><hr>
<hr>
<p>Hello</p><p>cruel</p><p>World</p>
<br><hr>
<div>1</div><div>2</div>
<br><hr>
<p>I would like to say: </p>
<hr>
<br><hr>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
<br><hr>
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<br><hr>
<input type="text" id="data" value="data" />
<input type="text" id="cry" value="jQuery world" />
<br><hr>
<select id="choose">
<option value="请选择">toChoose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><hr>
<input type="checkbox" name="checkedAll" id="checkedAll" />全选/取消全选<br>
猫：<input type="checkbox" id="checkbox1" name="ckn" value="猫" />
狗：<input type="checkbox" id="checkbox2" name="ckn" value="狗" />
猪：<input type="checkbox" id="checkbox3" name="ckn" value="猪" />
<br><hr>
oracle：<input type="radio" id="radio1" name="r" value="oracle" checked="checked" />
java： <input type="radio" id="radio2" name="r" value="java" />
spring：<input type="radio" id="radio3" name="r" value="spring" />
<br><hr>
<input type="button" id="btn1" value="Btn1" />
<input type="button" id="btn2" value="灰机灰过去喽" />
<input type="button" id="btn3" value="死神" />
<div id="hiddenId" style="display:none">style="display:none"</div>
<br><hr>
<div id="ce">
</div>
<br><hr>
<img /><img /> <input type="button" id="imgBtn" value="imgBtn" />
<!-- li index
<ul>
<li><a href="#nogo">index 0 中超联赛世界排名不敌新加坡</a></li>
<li><a href="#nogo">index 1 中超联赛世界排名不敌新加坡</a></li>
<li><a href="#nogo">index 2 中超联赛世界排名不敌新加坡</a></li>
<li><a href="#nogo">index 3 中超联赛世界排名不敌新加坡</a></li>
<li><a href="#nogo">index 4 中超联赛世界排名不敌新加坡</a></li>
<li><a href="#nogo">index 5 中超联赛世界排名不敌新加坡</a></li>
<li><a href="#nogo">index 6 中超联赛世界排名不敌新加坡</a></li>
</ul>
--><br><hr>
</form>
</body>
</html>