JQuery练习

Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库

JQuery

jQuery是一个轻量级的js库

js库：使用原生JS将日常开发过程中常用的功能总结、包装

        线上引入Jquery:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

JQuery的基本选择器：

• ID选择器       $('#box').text('我是div')

• 类选择器       $('.one').text("我是另一个div")

• 元素选择器 $('p').text('我战斗力爆表');

• 通配符

• 交并集选择器

• 交集选择器 $('div.one').css('color','hotpink');

• 并集选择器 $('div,p').css('color','red') 

 $('#box').text('我是div')
        $('.one').text("我是另一个div")
      $('p').text('我战斗力爆表');

      $('*').css('font-size','20px');//改样式
        $('div,p').css('color','red');//并集
      $('div.one').css('color','hotpink');//交集

筛选的方法

• first()

• last()

• eq(index)

• prev() 上一个兄弟

• prevAll() 上面所有的

• next() 下一个兄弟

• nextAll() 下面所有的

• siblings() 兄弟节点

 

// $('ul li:first').css('color','green')   //第一个
        // $('ul li:last').css('color','purple')  //最后一个
        // $('ul li:eq(1)').css('color','skyblue')  //

        // $('ul li:odd').css('color','red');  //奇数      索引
        // $('ul li:even').css('color','pink');  //偶数      索引

        $('ul li:lt(1)').css('color','red')
        $('ul li:gt(1)').css('color','blue')

• children(exp) 子节点

• parent(exp)

• parents(exp)

• css()

  • 设置单个样式

  • 批量设置样式

  • 获取样式的值

        $('div').last()
                .css('width', "200px")
                .css('height', "200px")
                .css('background', "red")
    
            // $('div').css({
            //     width: "100px",
            //     height: "100px",
            //     background: "yellow",
            // })
    
            var $div=$('div').css('width')      //获取匹配元素中第一个的结果
            console.log($div);