jQuery——选择器

最新推荐文章于 2022-12-15 16:10:34 发布

来一杯java压压惊

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量113

点赞数

分类专栏：前端 # jQuery

本文链接：https://blog.csdn.net/ShiZaolin/article/details/104402254

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

id选择器

基础语法：$(selector).action()
美元符号:定义jQuery
选择符（selector）查询和查找HTML元素
action()执行对元素的操作

案例：点击按钮，改变div的宽高

<head>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//更新div的宽高
$('#div1').width(200);
$('#div1').height(200);
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button id="btn">点击</button>
</body>

类选择器

<head>
<style type="text/css">
.mydiv1{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('.btn').click(function(){
//更新div的宽高
$('.mydiv1').width(200);
$('.mydiv1').height(200);
});
});
</script>
</head>
<body>
<div class="mydiv1"></div>
<button class="btn">点击</button>
</body>

element元素选择器

<head>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//元素选择器，同时更改两个div的宽高
//更新div的宽高
$('div').width(200);
$('div').height(200);
});
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<button id="btn">点击</button>
</body>

jQuery的事件监听函数

组合选择器

组合选择器也就是将id，元素，类选择器组合使用

<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
/*元素选择器+id选择器*/
//查找所有span标签中id为s1的，将其背景设置为红色
$('span#s1').css('background-color','red');
/*元素选择器+类选择器*/
$('span.s2').css('background-color'.'yellow');
/*元素选择器+元素选择器*/
//找到所有div标签下的p标签，将其背景设置为灰色
$('div p').css('background-color'.'gray');
/*元素选择器+元素选择器+类选择器*/
//找到div标签下的p标签中class为p2的，将其背景设置为黑色
$('div p.p2').css('background-color'.'black');
});
</script>

属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素
$(’[src]’)选取所有带有href属性的元素
$(’[src="#"]’)选取所有带有href值等于#的元素
$(^{'} [s r c$ =".jpg"]’)选取所有href值以.jpg结尾的元素

<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
$('[src]').css("border-style","solid");//所有的元素中（不光只要图片，例如div中设置图片背景是用src指定图片路径）只要有属性为src的都添加实线边框
$('[src="./image/002.jpg"]').css("border-style","solid");//给标签src属性符合字符串路径的添加实线边框
$('[src$=".png"]').css("border-style","solid");//给标签中元素src路径中以png结尾的添加实线边框
});
<head>
<body>
<img alt="" src="./image/001.jpg" width="100" height="100"/>
<img alt="" src="./image/002.jpg" width="100" height="100"/>
<img alt="" src="./image/003.png" width="100" height="100"/>
</body>

来一杯java压压惊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery——选择器

id选择器基础语法：$(selector).action()美元符号:定义jQuery选择符（selector）查询和查找HTML元素action()执行对元素的操作案例：点击按钮，改变div的宽高<head><style type="text/css">#div1{width:100px;height:100px;background-color:r...
复制链接

扫一扫

专栏目录