<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<script src="/static/jquery.min.js"></script>
<div>hello</div>
<p id="p1">ppppp</p>
<a href="">click</a>
<div class="outer">outer
<div class="inner">inner
<p>inner P</p>
</div>
<p>son</p>
</div>
<p>xia</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<p id="11" sy="pppp">段落1</p>
<p id="22" sy="pppp">段落2</p>
<input type="text">
<input type="checkbox">
<input type="submit">
<script>
//基本选择器器
/* $('div').css('color',"red")
$('*').css('color', 'red')//所有标签设置样式
$('#p1').css('color', 'red')//根据id取到标签
$('.inner').css('color', 'red')//根据class取到标签
*/
//层级筛选器
/* $('.outer p').css('color', 'red')//孙子后代选择器
$('.outer>p').css('color', 'red')//子代选择器
$('.outer+p').css('color', 'red')//紧挨着的下面的兄弟标签
$('.outer~p').css('color', 'red')//也是兄弟标签,但是不是非得挨着,方向是向下找
*/
//基本筛选器
/*
$('li:first').css('color','red')//对第一个<li>标签操作
$('li:last').css('color','red')//对最后yi个<li>标签操作
$('li:eq(1)').css('color','red')//对第一个<li>进行操作
$('li:eq(3)').css('color','red')//对第三个进行操作
$('li:even').css('color','red')//奇数行进行操作
$('li:odd').css('color','red')//偶数行进行操作
$('li:gt(2)').css('color','red')//大于第二行的进行操作
$('li:lt(2)').css('color','red')//小于第二行的进行操作
*/
//属性选择器
//$("[sy='pppp']").css('color','red')
// $("[id='11']").css('color','red')
//$("[type='text']").css('width','250px')
//表单选择器
$(':text').css('width','250px')
</script>
</body>
</html>
基本选择器
$('div').css('color',"red")
$('*').css('color', 'red')//所有标签设置样式
$('#p1').css('color', 'red')//根据id取到标签
$('.inner').css('color', 'red')//根据class取到标签
层级选择器
$('.outer p').css('color', 'red')//孙子后代选择器
$('.outer>p').css('color', 'red')//子代选择器
$('.outer+p').css('color', 'red')//紧挨着的下面的兄弟标签
$('.outer~p').css('color', 'red')//也是兄弟标签,但是不是非得挨着,方向是向下找
基本筛选器
$('li:first').css('color','red')//对第一个<li>标签操作
$('li:last').css('color','red')//对最后yi个<li>标签操作
$('li:eq(1)').css('color','red')//对第一个<li>进行操作
$('li:eq(3)').css('color','red')//对第三个进行操作
$('li:even').css('color','red')//奇数行进行操作
$('li:odd').css('color','red')//偶数行进行操作
$('li:gt(2)').css('color','red')//大于第二行的进行操作
$('li:lt(2)').css('color','red')//小于第二行的进行操作
属性选择器
$("[sy='pppp']").css('color','red')
$("[id='11']").css('color','red')
$("[type='text']").css('width','250px')
表单选择器
$(':text').css('width','250px')