jquery1.9学习笔记 之选择器(基本元素二)

时间:2022-10-02 20:26:30

类选择器(".class")

描述: 选择所有与给出类匹配的元素

对于类选择器来说,jquery使用的是javascript原生的方法getElementByClassName()

例子:

<!doctype html>

<html lang='zh'>

<head>

<meta charset="utf-8">

<title>class demo</title>

<style type="text/css">

div, span{

width: 120px;

height: 40px;

float: left;

padding: 10px;

margin: 10px;

background-color: #EEEEEE;

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>

<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>

<span class="myClass">span class="myClass"</span>

<script>

$(".myClass").css("border", "3px solid red");

</script>

</body>

</html>

jquery1.9学习笔记 之选择器(基本元素二)

例子:查找同时含有myclass 和 otherclass 类的元素。

<!doctype html>

<html lang="zh">

<head>

<meta charset='utf-8'>

<title>class demo</title>

<style type="text/css">

div,span{

width:120px;

height:40px;

padding:10px;

margin:10px;

background-color:#EEEEEE;

float: left;

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>

<div class="myclass">div class='myclass'</div>

<div class="myclass otherclass">div class="myclass otherclass"</div>

<span class="myclass otherclass">span class="myclass otherclass"</span>

<script type="text/javascript">

$(".myclass.otherclass").css("border", "13px solid red");

</script>

</body>

</html>

jquery1.9学习笔记 之选择器(基本元素二)