jquery选择器

来源：互联网发布：软件设计方案评价编辑：程序博客网时间：2024/06/03 21:30

jquery中选择器的概念：选择器允许对元素组或单个元素进行操作，找出想要的元素。

选择器的分类：基本、层次、简单、内容、可见性、属性、子元素、表单、表单对象属性

首先来了解一下基本选择器的用法：

1）<style>

div{background-color:yellow;}

</style>

$(document).ready(function(){

$(”#btn").click(function(){ //对id=btn的input加上click事件

//点击按钮后，将所有的之前所加的html样式取消

$("*").removeAttr("style");

});

<body>

<input type="button" value="将所有的样式都取消" id="btn">

<div>div=1</div>

</body>

2）<style>

div{background-color:yellow;}

</style>

$(document).ready(function(){

$("#btn").click(function(){

//当点击按钮后，将id=one的div颜色变为绿色

$("#one").css("background","green");

});

<body>

<input type="button" value="将id=one的div颜色变为绿色" id="btn">

<div id="one“>div=1</div>

<div id="two“>div=1</div>

</body>

3）<style>

div{background-color:yellow;}

</style>

$(document).ready(function(){

$(”#btn").click(function(){

//点击按钮后，将class=one-1的div的背景变为绿色

$(".one-1").css("background","green");

});

<body>

<input type="button" value="将class=one-1的div颜色变为绿色" id="btn">

<div id="one“>div=1</div>

<div class=one-1></div>

<div id="two“>div=2</div>

</body>

4）<style>

div{background-color:yellow;}

</style>

$(document).ready(function(){

$("#btn").click(function(){

//点击按钮后，将所有div的背景颜色变为绿色

$("div").css("background","green");

});

<body>

<input type="button" value="将所有div的背景变为绿色" id="btn">

<div id="one“>div=1</div>

<div class=one-1></div>

<div id="two“>div=2</div>

</body>

5）<style>

div{background-color:yellow;}

</style>

$(document).ready(function(){

$("#btn").click(function(){

//点击按钮后，将id=one，class=one-1，span的元素背景变为绿色

$("#one",.one-1,span).css("background","green");

});

<body>

<input type="button" value="将id=one,class=one-1,span" id="btn">

<div id="one“>div=1</div>

<div class=one-1></div>

<div id="two“>div=2</div>

<span>这里是span</span>

</body>