您的位置：首页 > Web前端 > JQuery

jQuery4(3种选择器,选择器获取元素)

2016-02-05 22:52 681 查看

该内容所将选择器都是出现在style中;

id选择器

实例:

#dv   //id选择器
{
width:300px;
height:200px;
background-color:Gray;
}

知识点::将id为dv的标签设置为该样式

标签选择器

实例:

div
{
width:300px;
height:200px;
background-color:Gray;
}

知识点:将div标签的所有样式设置为该样式

类选择器

实例:

.cls
{
width:300px;
height:200px;
background-color:Gray;
}

知识点:将类(class)为cls的标签设置为该样式

注意:三者有优先级.id最高,类选择器其次.标签最低

全部代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">
/* #dv   id选择器
{
width:300px;
height:200px;
background-color:Gray;
}
*/
/* 标签选择器
div
{
width:300px;
height:200px;
background-color:Gray;
}
*/
/* 类选择器
.cls
{
width:300px;
height:200px;
background-color:Gray;
}
*/
/* 三者优先级: id最高,类其次,标签选择器最低*/
</style>
</head>
<body>
<div class='cls'>
</div>
</body>
</html>

选择器获取元素

知识点:

$('#btn')   //获取id为btn的元素
$('.cls')   //护球类名为cls的元素
$('input')  //获取标签input的元素

注意:因为jQuery的隐式迭代(主要是因为执行完方法后会返回当前的对象),所以,无需在进行遍历循环.即使你获取到的元素是一个集合.

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//点击按钮,改变层的样式,并且在层中,来个font标签,显示样式
//#id .类 直接写标签
//页面加载
$(function () {
$('#btn').click(function () {
$('.dv').css('width', '300px').css('height', '200px').css('backgroundColor', 'green').html('<font color="red" size="7" face="全新硬笔行书简">我会用挖掘机</font>');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="哈哈" id='btn' />
<div class='dv'>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航