JQuery基础:
基本选择器
标签选择器(元素选择器) 语法: $(“html标签名”) 获得所有匹配标签名称的元素 id选择器 语法: $("#id的属性值") 获得与指定id属性值匹配的元素 类选择器 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素 并集选择器: 语法: $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html>
< head>
< title> 基本选择器< / title>
< meta http- equiv= "content-type" content= "text/html; charset=UTF-8" >
< script src= "../js/jquery-3.3.1.min.js" > < / script>
< style type= "text/css" >
div, span {
width: 180 px;
height: 180 px;
margin: 20 px;
background: #9999 CC;
border: #000 1 px solid;
float : left;
font- size: 17 px;
font- family: Roman ;
}
div . mini {
width: 50 px;
height: 50 px;
background: #CC66FF;
border: #000 1 px solid;
font- size: 12 px;
font- family: Roman ;
}
div . mini01 {
width: 50 px;
height: 50 px;
background: #CC66FF;
border: #000 1 px solid;
font- size: 12 px;
font- family: Roman ;
}
< / style>
< script type= "text/javascript" >
$( function ( ) {
$( "#b1" ) . click ( function ( ) {
$( "#one" ) . css ( "backgroundColor" , "red" ) ;
} ) ;
$( "#b2" ) . click ( function ( ) {
$( "div" ) . css ( "backgroundColor" , "pink" ) ;
} ) ;
$( "#b3" ) . click ( function ( ) {
$( ".mini" ) . css ( "backgroundColor" , "green" ) ;
} ) ;
$( "#b4" ) . click ( function ( ) {
$( "span,#two" ) . css ( "backgroundColor" , "yellow" ) ;
} ) ;
} ) ;
< / script>
< / head>
< body>
< input type= "button" value= "保存" class = "mini" name= "ok" class = "mini" / >
< input type= "button" value= "改变 id 为 one 的元素的背景色为 红色" id= "b1" / >
< input type= "button" value= " 改变元素名为 <div> 的所有元素的背景色为 粉红色" id= "b2" / >
< input type= "button" value= " 改变 class 为 mini 的所有元素的背景色为 绿色" id= "b3" / >
< input type= "button" value= " 改变所有的<span>元素和 id 为 two 的元素的背景色为黄色" id= "b4" / >
< h1> 有一种奇迹叫坚持< / h1>
< h2> 自信源于努力< / h2>
< div id= "one" >
id为one
< / div>
< div id= "two" class = "mini" >
id为two class 是 mini
< div class = "mini" > class 是 mini< / div>
< / div>
< div class = "one" >
class 是 one
< div class = "mini" > class 是 mini< / div>
< div class = "mini" > class 是 mini< / div>
< / div>
< div class = "one" >
class 是 one
< div class = "mini01" > class 是 mini01< / div>
< div class = "mini" > class 是 mini< / div>
< / div>
< span class = "spanone" > class 为spanone的span元素< / span>
< span class = "mini" > class 为mini的span元素< / span>
< input type= "text" value= "zhang" id= "username" name= "username" >
< / body>
< / html>