JQuery学习四(过滤选择器)
2024-09-03 23:19:25
:first选择第一个元素。$(“div:first”)进行选择第一个<div>
:last 选择最后一个最后一个元素 $("div:last")选取最后一个<div>
[:not(选择器)] 选择不满足“选择器”条件的元素
$("input:not(.myclass)")选取样式名不是Myclass的<input>
:even :odd 选取的索引数是奇数和偶数的元素。(把第零行看作第一行开始计算)
$("input:even")选择索引是奇数的<input>
:eq(索引序号)。 :gt(索引序号) :lt(索引序号) 选取索引等于。
大于。小于索引序号的元素。比如 $("input:lt(1)")选取索引小于1的<input>
$(":header")选择所有的h1------h6的元素
$("div:animated")选择正在执行动画的<div>元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {$("#change").click(function(){
$("#table1 td:even").css("background", "red");
$("#table1 td:odd").css("background", "gray");
$("#table1 td:first").css("font-size", "50px").css("background","yellow");
$("#table1 td:gt(0):lt(3)").css("font-size","30px");
})
}
)
</script>
</head>
<body bgcolor="blue">
<table id="table1">
<tr>
<td>firstline</td>
</tr>
<tr>
<td>secondline</td>
</tr>
<tr>
<td>thirdline</td>
</tr>
<tr>
<td>fourthline</td>
</tr>
<tr>
<td>fifthline</td>
</tr>
<tr>
<td>sixthline</td>
</tr>
<tr>
<td>seventhline</td>
</tr>
<tr>
<td>eightthline</td>
</tr>
<tr>
<td>ninthline</td>
</tr>
<tr>
<td>tenthline</td>
</tr>
</table>
<input value="changecolor"type="button"id="change" onclick=""/>
</body>
</html>
$("table").click(function(){$("td",$(this)).css("background","red")});用法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function(){($("table").click(
function () { $("tr", $(this)).css("background", "white"); }))
})
//this 传递的是相对自己的对象的意思。就是只在被点击的这个对象里的标签上改变颜色
</script>
</head>
<body bgcolor="blue">
<table id="table1"> </tr>
<tr>
<td>sixthline</td>
</tr>
<tr>
<td>seventhline</td>
</tr>
<tr>
<td>eightthline</td>
</tr>
<tr>
<td>ninthline</td>
</tr>
<tr>
<td>tenthline</td>
</tr>
</table>
<table id="table2">
<tr>
<td>firstline</td>
</tr>
<tr>
<td>secondline</td>
</tr>
<tr>
<td>thirdline</td>
</tr>
<tr>
<td>fourthline</td>
</tr>
<tr>
<td>fifthline</td>
</tr> </table>
<input value="changecolor" type="button" id="change" onclick="" />
</body>
</html>
$("div[id]") 选取有id属性的div
$(div[title=test") 选取title==test的<div>
$("div[title!=test]")选取title属性不为test的<div>
$("#form1:disabled")//获得表单中所有未启用的控件
$("#form2:enabled")获得表单中所有启用的控件
#("input:checked")input中所有被选中的属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#selectall").click(function () {
var elements = $("input[type=checkbox]");
for (var i = 0; i < elements.length; i++)
elements[i].checked = true;
})
})
$(function () {
$("#reverse").click(
function () {
var elements = $("input[type=checkbox]");
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked ==false)
elements[i].checked = true;
else elements[i].checked = false;
} });
})
</script>
</head>
<body bgcolor="blue">
<input type="checkbox">a<br/>
<input type="checkbox">b<br />
<input type="checkbox">c<br />
<input type="checkbox">d<br />
<input type="checkbox">e<br />
<input type="checkbox">f<br />
<input type="checkbox">g<br />
<input type="button"id="selectall" value="全选"/>
<input type="button"id="reverse" value="反选" /> </body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery</title>
<script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('input').change(function () {
var names=new Array();
$("input:checked").each(function(key,value){names[key]=$(value).val();});
$('#msgname').text("一共选中了"+names.length+"项,"+names.join("."));
});
})
$(function () {
var link = $("<a href='http//:www.qq.com'>百度</a>");
$("div:first").append(link);
})
$(function () {
var data = {"新浪":"http://www.xinlang.com",
"腾讯":"http://www.qq.com","网易":"http://www.163.com"
,"淘宝":"http://www.taobao.com"};
$.each(data,function(key,value){
var tr = $("<td><a href='" + value + "'>" + key + "</a></td>");
$("#tablesite").append(tr);
});
})
</script>
</head>
<body bgcolor="blue">
<input type="checkbox"value="a">a<br/>
<input type="checkbox"value="b">b<br />
<input type="checkbox"value="c">c<br />
<input type="checkbox"value="d">d<br />
<input type="checkbox"value="e">e<br />
<input type="checkbox"value="f">f<br />
<input type="checkbox"value="g">g<br />
<p id="msgname"></p>
<div></div>
<table id="tablesite"> </table>
</body>
</html>
最新文章
- ActionMapping
- 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器
- 【android应用市场】android应用市场集合
- qpython3 读取安卓lastpass Cookies
- 从快的线上callback hell代码说起
- Java 8 LongAdders:管理并发计数器的正确方式
- Netbeans 中的编译器相关配置
- iOS - Photo Album 图片/相册管理
- 《暗黑世界GM管理后台系统》部署+功能说明文档
- select模式
- *[topcoder]ChooseTheBestOne
- [转]javascript指定事件处理程序包括三种方式:
- SQL语句 不足位数补0
- 运动框架实现思路(js)
- 各大HotFix热补丁方案分析和比较
- jquery validate 动态增加删除验证规则
- 关于Goldwell平台推出赠金及手数奖励
- 洛谷P2319 [HNOI2006]超级英雄
- 关于URL隐藏index.php方法
- IDEA内的SpringBoot插件安装与SpringBoot项目生成地址