jQuery学习(三)——选择器总结
1、基本选择器
id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
}); $("#btn2").click(function(){
$(".mini").css("background-color","pink");
}); $("#btn3").click(function(){
$("div").css("background-color","pink");
}); $("#btn4").click(function(){
$("*").css("background-color","pink");
}); $("#btn5").click(function(){
$("#two,.mini").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
2、层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
}); $("#btn2").click(function(){
$("body>div").css("background-color","gold");
}); $("#btn3").click(function(){
$("#two+div").css("background-color","gold");
}); $("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
3、基本过滤选择器
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","pink");
}); $("#btn2").click(function(){
$("body div:last").css("background-color","pink");
}); $("#btn3").click(function(){
$("body div:odd").css("background-color","pink");
}); $("#btn4").click(function(){
$("body div:even").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
4、属性选择器
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","palegreen");
}); $("#btn2").click(function(){
$("div[id='two']").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div"/>
<input type="button" id="btn2" value="选择有id属性的值为two的div"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
5、表单选择器
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","paleturquoise");
}); $("#btn2").click(function(){
$(":text").css("background-color","paleturquoise");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>
</html>
jQuery学习(三)——选择器总结的更多相关文章
- jQuery学习- 子选择器与可见性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习- 位置选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery 学习三
一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...
- jquery 学习(一) - 选择器
基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...
- jQuery学习- 内容选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习- 层叠选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习-属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习-基本选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery学习之------选择器
a.id选择器 <div id=”test1”></div> var div1=$(“#test1”); //同css的写法一样id选择器用#号实 ...
随机推荐
- mac修改管理员权限命令
我们在进行mac 命令行安装软件的时候,有的时候会遇见这样的问题:Please try running this command again as root/Administrator. 如图: 解决 ...
- Powerpivot PowerBI相关组件下载安装（附操作截图）
加载方式:com加载项加载方法: 点击Excel界面[文件]→[选项]→[加载项]→[COM加载项]→[转到] Excel2013加载PowerView Excel216PowerQuery不需要加载 ...
- Activiti Modeler 5.22.0整合到Spring项目
转载 https://blog.csdn.net/u010411264/article/details/71480354
- easyui的增删改
陈旧的开发模式PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对”前端:“我改完了”后端:“功能交付”PM:“春节要加这个活动”后端:“这个先找 ...
- Codeforces Round #487 (Div. 2) C. A Mist of Florescence 构造
题意: 让你构造一个 n∗mn*mn∗m 矩阵,这个矩阵由 444 种字符填充构成,给定 444 个整数,即矩阵中每种字符构成的联通块个数,n,mn,mn,m 需要你自己定,但是不能超过505050. ...
- 【XSY2692】杨柳 - 网络流
题目来源:2018冬令营模拟测试赛(十) 题解: 继续鬼畜网络流…… 首先这题有个显然的做法:bfs预处理出每个起点到每个终点的最短步数,然后直接建边加超级源汇跑费用流即可: 但是这样边数是$n^2$ ...
- 【bzoj 1502】月下柠檬树
月下柠檬树 题意 求n个圆与他们的公切线的定积分. 解法 求出圆的公切线就可以了. 特别坑的一点 : 最两端的圆,有可能会被其他的圆所包含,所以要重新求一下最左端与最右端. 比较坑的一点 : 精度要设 ...
- Mybatis之MySql批量insert后返回主键
需求:使用批量插入后,需要insert之后的每一条记录的ID 注意:Mybatis3.3.1的版本以后支持批量插入后返回主键ID 示例: domin.java: public class User { ...
- 【codeforces 500E】New Year Domino
[题目链接]:http://codeforces.com/problemset/problem/500/E [题意] 有n个多米诺骨牌; 你知道它们的长度; 然后问你,如果把第i骨牌往后推倒,然后要求 ...
- JavaScript push(),join() 函数
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObje ...