jQuery 基础选择器(一)

基础选择器

在使用选择器是 ,我们首先必须要使用 “$()" 里面来包装我们的css规则,然后返回jquery对象

下面我们来看以下几个简单的选择器,如下图所示:

1.png

下面我们先来看以下ID选择器

通过id选择器,让div标签中的文字改变颜色

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#dv').css("color","red");
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
</body>
</html>

在css 中,我们是这样写的

#dv{

    color:red;   //添加样式

}

我们在jquery中,叫添加一个行为,这个行为叫添加样式

这上面就是 id 选择器, 也是最简单的选择器,最常用的选择器


下面我们来看元素标签名选择器

看下面代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("div").css("color","#f60");
		})
	</script>
</head>
<body>
	<div>php 中文网</div>
	<div>php 中文网</div>
	<div>php 中文网</div>
</body>
</html>

看如上代码,我们有多个div 标签,并且没有id 这样我们就要使用元素标签选择器    $("元素名").行为

类 class 选择器

下面我们先来看一段代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".dv1").css("color","green");
		})
	</script>
</head>
<body>
	<div class="dv1">php 中文网</div>
	<div>php 中文网</div>
	<div class="dv1">php 中文网</div>
</body>
</html>

使用类选择器,我们写css 样式的时候    .class名   然后去添加样式,当然我们在jquery 中需要这样写:$(".dv1").行为

注:ID在页面只会出现一次,如果id出现多次,那么我们用css 是可以的,但是使用jquery 后面的就不会生效,如果一个页面出现多个id ,那么这就是开发者程序的不严谨,

所以开发者必须有一个良好的编码习惯,一个页面id只能出现一次(相同的id)


为了证明ID返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以使用jquery核心自带的一个属性length 或size()方法来查看返回元素的个数

下面我们就用实例来讲解:

通过id

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($("#dv").size());
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
</body>
</html>

我们有3个,但是返回的是1

当我们使用类 class 时

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($(".dv").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

返回的结果是3

使用标签名:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($("div").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

返回的结果是3

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#dv').css("color","red"); }) </script> </head> <body> <div id="dv">php 中文网</div> </body> </html>
提交重置代码
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!