jquery初介绍

文章目录

jquery初介绍

1.jquery介绍

jquery可以理解为一个javascript的库(也可以叫轮子)，跟我们写的js文件一样，jquery是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数

2.jquery的特性

jquery可以做以下事情

     HTML元素选取
     HTML元素操作
     CSS操作
     HTML事件函数
     JavaScript特效和动画
     HTML DOM遍历和修改
     AJAX
     Utilities

写个简单的例子

   <html>
       <head>
       <meta charset="UTF-8">
       <title>dom操作</title>
       <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
       <script>
          $(function(){
             alert('Hello World');
          });
       </script>
       </head>
    </html>

jquery的方法大部分都是用$()来引用

举几个例子

$('div').html()//删选出与div相关的所有信息
$('div').html('大家好').css('color','red')//添加大家好的内容，并且更改css样式的颜色为红色

3.jquery的dom对象与js对象的互换

//dom对象和js对象的互换
        var Div=document.getElementsByTagName('div')[0]
        var $Div=$(Div);//js对象转换成Jq对象

4.jquery选择器

<body>
    <div>1</div>
    <div id="box">
        <p>555</p>
        <p>4646</p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <script>

        //基本选择器
        console.log($('div'));
        console.log($('#box'))
        $("#box p:eq(0)").css({'background':'red','color':'blue','width':'200px'});
        //eq表示选择第几个,css多个样式用{}
        //层级选择器
        $('#box p');
        $('#box > p');
        console.log('#box,p');


        //过滤选择器
        console.log($("#box>p:first"));
        console.log($("#box>p:last"))
    </script>
</body>

5.jquery的事件

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <button>链式事件</button>

    <div class="box"></div>
    <script>
        //普通的写法
        // console.log($.prototype)
        // $('ul li').click(function(event){
        //     console.log(event)
        // })

        //绑定事件写法
        // $('ul li').bind('click',function(event){
        //     console.log(event)
        // })


        //链式绑定
        // $('button').bind('mousedown',function(){
        //     $(this).css('color','red')
        // }).bind('mouseup',function(){
        //     $(this).css('color','yellow')
        // })

        //jq的事件委托
        //给ul绑定一个click，目标源是li
        // $('ul').on('click','li',function(){
        //     console.log($(this).index())//指向li,index获取索引
        // })

        //解脱事件
        $('button').click(function(){
            $('ul').off()
        })


        //绑定多个事件
        $('.box').on('mouseover mouseout',function(e){
            if(e.type=='mouseover'){
                // $(this).css('color','blue')
            }else if(e.type=='mouseout'){

            }
        })

        //有一些方法是合成事件
        $('div').hover(function(){
            console.log(56)
        },function(){
            console.log(55556)
        })
        $('ul li').toggle(function(){
            $(this).css('background','red')
        },function(){
            $(this).css('background','yellow')
        })

    </script>