id选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<input type="text"id="testInput"name="test"value=""/>
<input type="button"value="输入的值为"/>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
var inputValue=$("#testInput").val();
alert(inputValue);
});
});
</script>
</body>
</html>
元素选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<div>这里种植了一颗草莓</div>
<div>这里养了一条鱼</div>
<input type="button"id="button"value="若干年后"/>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("div").eq(0).html("这里长出了一片草莓");
$("div").get(1).innerHTML="这里的鱼没有了";
});
});
</script>
</body>
</html>
类名选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<div class="myClass">注意观察我的样式</div>
<div>我的样式是默认的</div>
<body>
<script type="text/javascript">
$(document).ready(function(){
var myClass=$(".myClass");
myClass.css("background-color","#C50210");
myClass.css("color","#FFF");
});
</script>
</body>
</html>
复合选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<p class="default">p的元素</p>
<div class="default">div的元素</div>
<span class="default"id="span">ID为span的元素</span>
<input type="button"value="为div的元素和ID为span的元素换肤"/>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").click(function(){
$("div,#span").addClass("change");
});
});
</script>
</body>
</html>
使用选择器隐藏超链接地址：
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<div style="float: right;text-align: right;">
<a href="index.html">首页</a>
| <a href="index.html"class="main">登录</a>
| <a href="index.html"class="main">注册</a>
| <a href="index.html"class="main">找回密码</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a.main").mouseover(function(){
window.status="http://www.mrbccd.com";return true;
}).mouseout(function(){
window.status="完成";return true;
});
});
</script>
</body>
</html>
层次选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<div id="buttom">
<ul>
<li>技术服务热线：。。。。</li>
<li>Copuright</li>
</ul>
</div>
<ul>
<li>技术服务热线。。。。</li>
<li>Copyright</li>
</ul>
<style type="text/css">
#bottom{
background-image:url;
width:800px;
hight:58px;
clear:both;
text-align:center;
padding-top:10px;
font-size:9pt;
}
.copyright{
color:#FFFFFF;
list-style:none;
line-hight:20px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("div ul").addClass("copyright");
});
</script>
</body>
</html>
prant>child选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<form id="form1"name="form1"method="post"action="">
姓 名:<input type="text"name="name"id="name"/>
<br/>
籍 贯:<input name="native"type="text"id="native"/>
<br/>
生 日:<input type="text"name="birthday"id="birthday"/>
<br/>
E-mail:<input type="text"name="email"id="email"/>
<br/>
<span>
<input type="button"name="change"id="change"value="换肤"/>
</span>
<input type="button"name="default"id="default"value="恢复默认"/>
<br/>
</form>
<style type="text/css">
input{
margin:5px;
}
.input{
font-size:12pt;
color:#333333;
background-color:#cef;
border:1px solid #000000;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){
$("form>input").addClass("input");
});
});
</script>
</body>
</html>
prev>next选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<div>
<lable>第一个lable</lable>
<p>第一个p</p>
<fieldset>
<lable>第二个</lable>
<p>第二个</p>
</fieldset>
</div>
<p>div外面的</p>
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
<script type="text/javascript"charset="GBK">
$(document).ready(function(){
$("lable+p").addClass("background");
});
</script>
</body>
</html>
prev~siblings选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<div>
<p>第一个</p>
<p>第二个</p>
</div>
<p>div外面的</p>
<style type="text/css">
.background{background: #cef}
body(font-size:12它;)
</style>
<script type="text/javascript"charset="GBK">
$(document).ready(function(){
$("div~p").addClass("background");
});
</script>
</body>
</html>
简单过滤器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<table width="98%"border="0"align="center"cellpadding="1"bgcolor="#3F873B">
<tr>
<td width="11%"height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿宁健康快乐的成长</td>
<td>2014-08-15 13:06:06</td>
</tr>
</table>
<style type="text/css">
td{font-size: 12px;
padding: 3px;}
.th{
background-color: #B6DF48;
font-weight: bold;
text-align: center;
}
.even{
background-color: #E8F3D1;
}
.odd{
background-color: #F0FCEF;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$("tr:first").removeClass("even");
$("tr:first").addClass("th");
});
</script>
</body>
</html>
内容过滤器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<table width="98%"border="0"align="center"cellpadding="0"cellspacing="1"bgcolor="#3F873B">
<tr>
<td width="11%"height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿宁健康快乐的成长</td>
<td>2014-08-15 13:06:06</td>
</tr>
<tr>
<td height="27">2</td>
<td>wgh</td>
<td>无语</td>
<td>每天有分好心情</td>
<td>2014-08-15 13:06:06</td>
</tr>
<tr>
<td height="27">3</td>
<td>轻鸿</td>
<td>blue</td>
<td>梦想不论大小，都给它一个可以绽放的机会</td>
<td>2014-08-15 13:06:06</td>
</tr>
<tr>
<td height="27">4</td>
<td>明日科技</td>
<td>wgh</td>
<td></td>
<td>2014-08-15 13：46：06</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("td:parent").css("background-color","#E8F3D1");
$("td:empty").html("暂无内容");
$("td:contains('轻鸿')").css("color","red");
});
</script>
</body>
</html>
可见性过滤器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<input type="text"value="显示的input元素">
<input type="text"value="我是不现实的input元素"style="display: none">
<input type="hidden"value="我是隐藏的域">
<body>
<script type="text/javascript">
$(document).ready(function(){
var visibleVal=$("input:visible").val();
var hiddenVal1=$("input:hidden:eq(0)").val();
var hiddenVal2=$("input:hidden:eq(1)").val();
alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2);
});
</script>
</body>
</html>
表单对象的属性过滤器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<form>
复选框1：<input type="checkbox"checked="checked"value="复选框1"/>
复选框2：<input type="checkbox"checked="checked"value="复选框2"/>
复选框3：<input type="checkbox"value="复选框3"/><br/>
不可用按钮：<input type="button"value="不可用按钮"disabled><br/>
下拉列表框：
<select onchange="selectVal()">
<option value="列表项1">列表项1</option>
<option value="列表项2">列表项2</option>
<option value="列表项3">列表项3</option>
</select>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("input:checked").css("background-color","red");
$("input:disabled").val("我是不可用的");
})
function selectVal(){
alert($("select option:selected").val());
}
</script>
</body>
</html>
表单选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
<title></title>
</head>
<body>
<form>
复选框：<input type="checkbox"/>
单选按钮：<input type="radio"/>
图像域：<input type="image"/><br>
文件域：<input type="file"/><br>
密码域：<input type="password"width="150px"/><br>
文本框：<input type="text"width="150px"/><br>
按 扭：<input type="button"value="按钮"/><br>
重 置：<input type="reset"value=""/><br>
提 交：<input type="submit"value=""/><br>
隐藏域：<input type="hidden"value="是隐藏的元素"/>
<div id="testDiv"><font color="blue">隐藏域的值：</font></div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(":checkbox").attr("checked","checked");
$(":radio").attr("checked","true");
$(":image").attr("src");
$(":file").hide();
$(":password").val("123");
$(":text").val("文本框");
$(":button").attr("disabled","disabled");
$(":reset").val("重置按钮");
$(":submit").val("提交按钮");
$("#testDiv").append($("input:hidden:eq(1)").val());
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
