jquery

简介
简化JavaScript的开发，JavaScript库封装了很多预定义的对象和实用函数。

基础操作
导入
通过script标签导入JQuery

<script type="text/javascript" src="jquery.min.js"></script>
JQuery 的基本语法格式

<script src="jquery.min.js"></script> <script> $(function(){ $('li').on('click',function(e){ //阻止冒泡事件 e.stopPropagation() //删除所有被点击按钮的兄弟元素 $(this).siblings().remove(); }) }) </script>
在document加载完后执行function

## 
<script>
    $(document).ready(function(){
});
</script>

操作Dom

<script>
    $(document).ready(function(){//在document加载完后执行function
        //显示
        // $('#panel1').hide(200).show(1000);
        //移动
        // $('#panel1').slideUp(1000).delay(1000).slideDown(1000);
        //渐入渐出
        //$('#panel1').fadeIn(1000).fadeOut(1000);
        // $('#panel1').fadeToggle(1000).fadeToggle(1000);
        // $('#panel1').toggle(1000).toggle(1000);
});
</script>

操作样式

<script>
    $(document).ready(function(){
  //CSS   JQ操作样式
      /*$('#panel1').css({
        color:'red',
         fontWeight:'bold',
        display:'none'
    });*/
});
'$'符号后加class名.css然后修改样式

事件

<script>
    $(function(){
        $('#btn1').on('click',function(){//添加点击事件
            $('#panel1').toggle();  //点击事件
        })

        $('#btn2').on('click',function(){//添加点击事件
            $('#panel2').slideToggle();  //点击事件
        })

        $('#btn3').on('mouseenter',function(){//添加鼠标移入事件
            $('#panel3').slideToggle();  //点击事件
        })

        $('#btn4').on('click',function(){//添加点击事件
            $('#panel4').slideToggle();  //点击事件
        })
        //改变元素的内容
        //$('#panel1').html("What's going on <strong>Baby!</strong>");
        $('#panel1.panel-body').html('new content');
    })
</script>
<script>
    $(function(){
        //为每个button添加点击事件
        $('.panel-button').on('click',function(){
            //动态获取被点击button的自定义属性值
            var panelId = $(this).attr('data-panelId');
            //进行操作
            $('#'+panelId).toggle();
        })
    })
</script>

为所有的button都添加了点击事件，