JQuery基础二
1、表单过滤器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div { width:300px; height:200px; background-color:Orange; margin-bottom:20px; } </style> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { //获取有id属性的层 // $('div[id]').css('backgroundColor','blue'); //获取有id属性的层,但是id的值必须是dv1 //$('div[id=dv1]').css('backgroundColor', 'blue'); // $('input[name!=name]').css('backgroundColor', 'blue'); //必须以name开头的 //$('input[name^=name]').css('backgroundColor', 'blue'); //必须以name结尾的 // $('input[name$=name]').css('backgroundColor', 'blue'); // $('input[name*=name]').css('backgroundColor', 'blue'); //有name属性还有value属性的元素 $('input[name][value]').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <input type="button" name="name" value="显示效果" id="btn" /> <input type="text" name="2name1" value=" " /> <input type="text" name="3name2" value=" " /> <input type="text" name="name3" value=" " /> <input type="text" name="name4" value=" " /> <div id="dv1"> </div> <div> </div> <div id="dv2"> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//有空格，表示的是 该表单中内部被禁用的元素
// $('form :disabled').css('backgroundColor', 'red');
$('input:checked').css('backgroundColor', 'red');//获取 被选中的元素
//如果没有空格，表示的是被禁用的表单
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<div>
<input type="checkbox" name="name" value="1" checked="checked" />吃饭
<input type="checkbox" name="name" value="2" checked="checked" />睡觉
<input type="checkbox" name="name" value="3" />打豆豆
</div>
<form action="" method="" id="fm1">
<input type="button" name="name" value="按钮" disabled="disabled" />
</form>
<form action="" method="get" id="fm2">
<input type="button" name="name" value="按钮2" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//有id属性的层
//$('div[id]').css('backgroundColor','green');
//层里面凡是有id属性的元素
//$('div [id]').css('backgroundColor', 'green');
$('div input[id]').css('backgroundColor', 'green');
});
</script>
</head>
<body>
<div style="width: 300px; height: 200px; background-color: Yellow; border: 1px solid red"
id="dv">
<input type="text" name="name" value="" />
<input type="text" name="name" value="" id="txt" />
<input type="text" name="name" value="" />
</div>
<hr color="red" />
<select size="5"><!--该标签配合css使用 不是很方便.-->
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">东京</option>
<option value="4">首尔</option>
</select>
</body>
</html>
有空格，表示的是内部的元素，如果没有空格，表示的是该元素。
有id属性的层//$('div[id]').css('backgroundColor','green');
层里面凡是有id属性的元素//$('div [id]').css('backgroundColor', 'green');
:input表示所有该类型元素（包括服务器解释到客户端是该种类型的元素）
'input'表示该类型的元素
2、元素的each方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var cks = $('div input:checked');
//元素的each用法
cks.each(function (index, ele) {
alert($(ele).val());
});
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示value值" id="btn" />
<div id="dv">
<input type="checkbox" name="name" value="1" />吃饭
<input type="checkbox" name="name" value="2" />睡觉
<input type="checkbox" name="name" value="3" />打豆豆
<input type="checkbox" name="name" value="4" />打篮球
<input type="checkbox" name="name" value="5" />打足球
<input type="checkbox" name="name" value="6" />打铅球
</div>
</body>
</html>
3、内容过滤器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
width:200px;
height:100px;
border:1px solid red;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//表示的是包含哈哈这两个字的内容的层
//$('div:contains(哈哈)').css('fontSize','100px');
//空层
// $('div:empty').css('backgroundColor', 'pink');
$('div:has(a)').css('backgroundColor', 'pink');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<div>
哈哈 ，天气好晴朗
</div>
<div>
嘎嘎
</div>
<div>
<a href="http://www.baidu.com">content</a>
</div>
</body>
</html>
4、子元素过滤器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//每个ul里面的第一个li
//$('ul li:first-child').css('fontFamily', '全新硬笔行书简');
$('ul li:last-child').css('fontFamily', '全新硬笔行书简');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<ul>
<li>圆通</li>
<li>申通</li>
<li>中通</li>
<li>汇通</li>
<li>顺丰</li>
</ul>
<hr color="gray" />
<ul>
<li>周伯通</li>
<li>全球通</li>
<li>小灵通</li>
<li>本地通</li>
<li>乱通</li>
</ul>
</body>
</html>
5、相当于dom中innerHTML，一般写两个值,属性和属性值 --设置该属性是该值,如果只写了一个属性，那么获取的是该属性的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//相当于dom中innerHTML
//$('div').html('<font color="red" face="宋体">哈哈,我又活了</font>');
//$('div').text('<font color="red" face="宋体">哈哈,我又活了</font>');
//($('#ck')[0]).checked = true;
//一般写两个值,属性和属性值 --设置该属性是该值,如果只写了一个属性，那么获取的是该属性的值
$('#ck').attr('checked', true);
//$('div').attr('class', 'cls');
//$('div').removeAttr('属性的名字');//表示的是移除该属性,属性没了 值也没了
});
$('#btn1').click(function () {
$('#ck').attr('checked', false);
//$('#ck').removeAttr('checked');
});
});
</script>
<style type="text/css">
.cls
{
background-color: Yellow;
}
</style>
</head>
<body>
<input type="button" name="name" value="设置" id="btn" />
<input type="button" name="name" value="设置啊" id="btn1" />
<div style="width: 300px; height: 150px; border: 1px solid red">
<input type="checkbox" name="name" value="1" id="ck" />打铅球
</div>
</body>
</html>
6、动态创建元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//创建一个超链接添加到body中
// $('<a href="http://www.baidu.com"></a>').text('百度').appendTo($('body'));
//在body中添加超链接
// var akObj = $('<a href="http://www.baidu.com"></a>').text('百度');
// $('body').append(akObj);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="创建一个元素" id="btn" />
</body>
</html>
7、小广告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var dvObj = $('<div style="width:300px; height:200px;background-color:orange;position:absolute;right:0;bottom:0;"></div>').appendTo($('body')); //层来了
//可以关闭广告
$('<span style="float:right; cursor:pointer;">×</span>').click(function () {
$(this).parent().remove();
}).appendTo(dvObj);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示广告" id="btn" />
</body>
</html>
8、动态创建表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
$(function () {
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
$('#btn').click(function () {
//创建一个表
var tbObj= $('<table border="1"></table>').appendTo($('body'));
for (var key in dic) {
$('<tr><td>' + key + '</td><td><a href="'+dic[key]+'">'+key+'</a></td></tr>').appendTo(tbObj);
}
});
});
</script>
</head>
<body>
<input type="button" name="name" value="创建表格" id='btn' />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
//获取昵称，，获取 内容
var name = $('#txt').val();
var tt = $('#textContent').val();
//创建行 和单元格 ，加到表中
$('<tr><td>' + name + '</td><td>' + tt + '</td></tr>').appendTo($('#tb'));
});
});
</script>
</head>
<body>
<table id="tb">
<tr>
<td>
猫猫：
</td>
<td>
沙发耶！
</td>
</tr>
</table>
<br />
昵称：<input type="text" id="txt" value="" /><br />
<textarea id="textContent" rows="10" cols="15"></textarea><br />
<input type="button" value="评论" id="btn1" />
</body>
</html>
9、清空元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//层没了，元素也就没了
//$('#dv').remove();
//元素清空了 ，层还在
//$('#dv').empty();
});
});
</script>
</head>
<body>
<input type="button" name="name" value="清空元素" id="btn" />
<div id="dv" style=" width:290px; height:100px; border:2px solid red;">
<input type="text" name="name" value="文本框" />
<input type="button" name="name" value="我骄傲" />
</div>
</body>
</html>
10、按钮是否可用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var sec = 5;
var setId = setInterval(function () {
sec--;
if (sec <= 0) {
sec = 0;
clearInterval(setId);
$('#btn').val('同意').attr('disabled',false);
} else {
$('#btn').val('请仔细阅读协议(' + sec + ')');
}
}, 1000);
});
</script>
</head>
<body>
<input type="button" name="name" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
</body>
</html>
11、创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。
$(function () {
$(':text').blur(function () {
if ($(this).val().length == 0) {
$(this).css('backgroundColor', 'red');
} else {
$(this).css('backgroundColor','');
}
});
});
</script>
</head>
<body>
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
</body>
</html>
12、替换节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//替换节点,br标签替换成hr标签
$('br').replaceWith('<hr color="yellow" />');
});
$('#btn1').click(function () {
//把hr标签替换成br标签
$('<br />').replaceAll('hr');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="替换节点" id="btn" />
<input type="button" name="name" value="替换" id="btn1" />
<br />
静夜思<br />
床前明月光,<br />
疑是地上霜,<br />
举头望明月,<br />
低头思故乡.<br />
</body>
</html>
13、包裹元素的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//每个p标签都会用一对font标签包裹上,如果所有的p标签都是一个效果,那么只需要一对font标签就足够了
// $('div p').wrap('<font color="blue" size="7" face="全新硬笔行书简"></font>');
//所有的p标签都被一对font标签包裹了.--
// $('div p').wrapAll('<font color="blue" size="7" face="全新硬笔行书简"></font>');
//把p标签中的文字内容用一对font标签包住，但是p标签在外面,每个p标签中都有一对font标签
//$('div p').wrapInner('<font color="blue" size="7" face="全新硬笔行书简"></font>');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="变" id="btn" />
<div style=" width:300px; height:200px; border:1px solid red;">
<p>这是p
</p>
<p>这也是p
</p>
</div>
</body>
</html>
14、获取被选中的单选按钮的value值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
// alert($(':radio:checked').val());
$(':radio:checked').each(function (index, ele) {
alert($(ele).val());
});
});
$('#btnchecked').click(function () {
//$(':radio[value=1]').attr('checked',true);
$(':radio').val(['1', '2']); //让单选按钮选中
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<input type="button" name="name" value="选中" id="btnchecked" />
<div>
<input type="radio" name="name1" value="1" />男
<input type="radio" name="name2" value="2" />女
<input type="radio" name="name3" value="3" />保密
</div>
</body>
</html>
15、权限选择过程练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//左边所有的添加到右边
$('#toAllLeft').click(function () {
$('#se1 option').appendTo($('#se2'));
});
//右边所有的添加到左边
$('#toAllRight').click(function () {
$('#se2 option').appendTo($('#se1'));
});
//左边选中的添加到右边
$('#toRight').click(function () {
$('#se1 option:selected').appendTo($('#se2'));
});
//右边选中的添加到左边
$('#toLeft').click(function () {
$('#se2 option:selected').appendTo($('#se1'));
});
});
</script>
</head>
<body>
<div style="margin-left: 400px; margin-top: 10px;">
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="width: 50px; float: left;">
<input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
<input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
<input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
<input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
</div>
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
</select>
</div>
</body>
</html>
