jquery选择器
jquery用法思想
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素下面就写示例来看看，如下：
还可以再简写一下，如下：
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素上面演示如何使用jquery来选择上元素，那么下面继续来演示一下选择集的过滤。
$('div').has('p');// 选择包含p元素的div元素
首先写出一个样式框架，如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
div *{
background: gold;
}
</style>
</head>
<body>
<!-- div>(p{这是段落$}+a{这是超链接})*2 -->
<div>
<p>这是段落1</p>
<a href="">这是超链接</a>
<p>这是段落2</p>
<a href="">这是超链接</a>
<div class="box">这是div</div>
</div>
</body>
</html>
那么使用选择集过滤，过滤p元素设置为pink背景色，如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').has('p').css('color','pink');
})
</script>
<style type="text/css">
div *{
background: gold;
}
</style>
</head>
<body>
<!-- div>(p{这是段落$}+a{这是超链接})*2 -->
<div>
<p>这是段落1</p>
<a href="">这是超链接</a>
<p>这是段落2</p>
<a href="">这是超链接</a>
<div class="box">这是div</div>
</div>
</body>
</html>
$('div').not('.myClass');//选择class不等于myClass的div元素
这次的过滤是排除类名的方式，那么下面先来选中看看，如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').not('.myClass').css({'backgroundColor':'cyan'});
})
</script>
</head>
<body>
<div>1</div>
<div class="myClass">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
$('div').filter('.myClass');//选择class等于myClass的div元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').not('.myClass').css({'backgroundColor':'cyan'});
$('div').filter('.myClass').css({'fontSize':'30px'});
})
</script>
</head>
<body>
<div>1</div>
<div class="myClass">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
$('div').eq(5);//选择第6个div元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').not('.myClass').css({'backgroundColor':'cyan'});
$('div').filter('.myClass').css({'fontSize':'30px'});
$('div').eq(5).css({'backgroundColor':'gold'});
})
</script>
</head>
<body>
<div>1</div>
<div class="myClass">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
选择集转移
$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
$('div').prev();//选择div元素前面紧挨的同辈元素
$('div').prevAll();//选择div元素之前所有的同辈元素
$('div').next();//选择div元素后面紧挨的同辈元素
判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.04.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录