Jquery选择器

<!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')