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学习(三)——选择器总结的更多相关文章

  1. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Jquery 学习三

    一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...

  4. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  5. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery学习- 层叠选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery学习-属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery学习-基本选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

随机推荐

  1. [转]数据库事务中的隔离级别和锁+spring Transactional注解

    数据库事务中的隔离级别和锁 数据库事务在后端开发中占非常重要的地位,如何确保数据读取的正确性.安全性也是我们需要研究的问题.ACID首先总结一下数据库事务正确执行的四个要素(ACID): 原子性(At ...

  2. Windows下Java JDK安装和环境变量配置

    [Java攻城狮学习路线](http://www.cnblogs.com/apollospotatolikett/p/8665123.html 1.JDK下载 下载地址:http://www.orac ...

  3. Element-ui组件--pagination分页的使用

    一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结: <template> <div class=" ...

  4. Java二维码生成与解码工具Zxing使用

    Zxing是Google研发的一款非常好用的开放源代码的二维码生成工具,目前源码托管在github上,源码地址: https://github.com/zxing/zxing 可以看到Zxing库有很 ...

  5. MyBatis数据持久化(十一)Mybatis3、Spring4、Struts2整合开发

    上一节我们將Mybatis和Spring4进行整合,本节向大家介绍Mybatis在Web开发中的应用,并与主流的MVC框架Struts2进行整合. 我们首先需要获取Struts2框架,Struts2官 ...

  6. gvim74 提示报错 “无法加载库python27.dll”

    官方提供的gvim安装文件默认是支持python和python3两种模式的,编译时带有该选项,但并没有附带对应的运行库和运行环境.所以在本地没有安装python时直接在vim中执行 :py print ...

  7. PHP的反射API

    PHP5的类和对象并没有告诉我们类内的所有一切,而只是报告了他们的公共成员.要充分了解一个类,需要知道其私有 成员和保护成员,还要知道其方法所期望的参数,对此我们要使用API 1.获得反射API的转储 ...

  8. css pointer-event

    详见:张鑫旭 CSS3 pointer-events:none应用举例及扩展 pointer-events:none ,可以使事件穿透, 如: 2 覆盖在 1 上面. 给 2 设置 pointer-e ...

  9. mongodb配置文件详解

    logpath=/app/mongo/mongolog/mongo.log dbpath=/app/mongo/mongodata verbose = true #vvvv = true #此项会产生 ...

  10. hive(I)--学习总结之常用技能

    hive是Apache的一个顶级项目,由facebook团队开发,基于java开发面向分析师或BI等人员的数据工具(常用作数据仓库),它将hdfs文件组织成表,使用hive-sql调用mapreduc ...