简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > :jQuery常用的选择器函数
Blogger Information
Blog 36
fans 0
comment 1
visits 27875
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
:jQuery常用的选择器函数
其琛的博客
Original
688 people have browsed it

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery常用选择器函数</title>
<style type="text/css">
ul{
list-style-type: none;
overflow: hidden;
margin: 50px auto;
}
li{

float: left;
background-color: skyblue;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
margin-right: 10px;
}
p{
background-color: skyblue;
width: 50px;
height: 50px;
float: left;
border-radius: 50%;
text-align: center;
line-height: 50px;
}

</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#two').hide()
// id选择器
$('.one').css('background-color','red')
// class选择器
$('ul li+p').css('font-size','1.5em')
// 相邻兄弟选择器
$('li:eq(4)').css('background-color','blue')
// 直接选择器
        $('li:first').css('background-color','green') 
        // 选择第一个
        $('[href]').css('color','white')
        // 属性选择器
        

});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="two">3</li>
<li>4</li>
<li>5</li>
<li><a href="">6</a></li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<p>另类</p>
</ul>
</body>
</html>

样子如图{}3KDE[S3~MFWKZ~%TMVCON.png通过本次作业了解了  一般jQuery的选择器使用，jQuery选择器基于id、类、类型、属性、属性值等进行查找，并且jQuery选择器都是以美元符号$()开始的

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！