jQuery笔记小结-CSDN博客

本文链接：https://blog.csdn.net/longting_/article/details/80457766

一、jQuery加载页面方式

原生js是使用window.onload方法加载页面，jquery是采用ready()方法加载页面，这种方法比window.onload方法快。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 原生js写法：window.onload
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            alert('原生js加载的页面'+oDiv)
        }

        // 完整写法
        // $(document).ready(function(){
        //     var $div=$('#div1');
        //     alert('jquery加载的div页面'+$div);
        // })


        // 加载的简写方式(常用)
        $(function(){
            var $div=$('#div1');
            alert('jquery加载的div页面'+$div);
        })
    // jQuery的加载速度比原生js加载速度快的多
    </script>

</head>
<body>
    <div id="div1">这是一个div页面</div>
</body>
</html>

二、jQuery选择器

jQuery选择器与CSS选择器方法一样。

<script>
        $(function(){
            // ID选择器
            var $div1 = $('#div1');
            // 类选择器
            var $box = $('.box');
            // 标签选择器
            var $li = $('li');
            // 层级选择器
            var $span = $('#div1 span');
            // 属性选择器
            var $input = $('input[name="input01"]')

            // 增加样式,css函数是行间样式，直接加在标签上的样式

            // ID选择器增加样式
            $div1.css({'color':'green','font-size':30});
            // 类选择器增加样式
            $box.css({'color':'red','fontSize':'40px'});
            // 标签选择器增加样式
            $li.css({'color':'pink','fontSize':'25px'});
            // 层级选择器加样式
            $span.css({'font-         weight':'bold','color':'yellow'});
            // 属性选择器增加样式
            $input.css({'width':100,'height':100});

        }) 
    </script>

三、对选择集进行过滤

主要有三个方法：has、not、eq

has:包含有某元素； not：不包含有某元素； eq:下标等于多少的元素

<script>
    $(function(){
        // 从页面所有的div元素中选出包含有p元素的标签
        var $div1=$('div').has('p');

        // 从页面选出class不是box2的div元素
        var $div2=$('div').not('.box2');

        // 从页面选出第五个div元素，使用下标索引，下标是从0开始
        var $div3=$('div').eq(4)

        // 给选出来的div元素加样式
        $div1.css({'color':'red','font-size':25});
        $div2.css({'background-color':'pink'});
        $div3.css({'weight':'bold','font-size':'30px'});
    })
</script>

<body>
    <div class="box1">这是第一个div
        <p>这是一个段落</p>
    </div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
    <div class="box4">这是第四个div</div>
    <div class="box5">这是第五个div</div>
    
</body>

四、选择集转移

<script>
        $(function(){
            // 选择div元素的前面一个元素
            var $box1=$('.box').prev().css('background-color','pink');
            // 选择div元素前面所有的元素
            var $box2=$('.box').prevAll().css({'color':'green','font-size':30});
            // 选择div元素的后面一个元素
            var $box3=$('.box').next().css('font-weight','bold');
            // 选择div元素后面的所有元素
            var $box4=$('.box').nextAll().css('background-color','#ddd');
            // 选择div元素的父级元素
            var $box5=$('.box').parent().css('text-decoration','underline');
            // 选择div元素的子级元素
            var $box6=$('.box').children().css('background','green');
            // 选择除了div自己本身的其他元素
            var $box7=$('.box').siblings().css('font-style','italic');

        })

    </script>

五、jQuery样式操作

1.行间样式操作：包括读取元素样式属性和设置元素样式属性

2.给元素增加样式类名，删除元素样式类名。

$(function(){
            var $div = $('#div1');
            var $div2 = $('div');
            var $a = $('#link01');

            // 读取样式属性值：
            var sSize = $div.css('font-size');
            //alert(sSize);
            

            // 写入也叫作设置属性值,设置一个值可以不写成字典的形式
            $div.css('color','red');
            // 设置多个属性值需要写成字典的形式
            $div.css({'font-weight':'bold','font-size':30});

            //获取多个元素的属性值,默认得到第一个元素的属性值
            var sSize02 = $div2.css('font-size');
            //alert(sSize02);


            // 给元素增加类名
            $a.addClass('big');
            $a.addClass('red');
            $a.addClass('noline');

            // 删除元素类名
            $a.removeClass('red');
            $a.removeClass('big');

        })

六、绑定事件click，索引

// 需求：点击列表文字，对应的样式发生改变
        $(function(){
            var $li=$('li')
            $li.click(function(){
                $(this).css({'width':100,'height':100,'color':'red'})
                // 获取元素的索引值
                var $index=$(this).index()
                alert($index)
            })
        })

七、动画

把CSS改成animate即可，可以给动画加各种各样的样式：

<style>
        div {width: 200px;
        height: 200px;
        background-color: lightcoral;}
    </style>
    <script>
        $(function(){
            // 需求：点击按钮，动画开始
            var $but=$('button');
            var $div=$('div');
            $but.click(function(){
                //  $div.animate({'width':1200});
           /*
    参数一：要做动画的样式属性，写成字典的形式
    参数二：动画持续的时间，默认是400毫秒，一般不写单位
    参数三：动画曲线 默认是 'swing'缓冲运动，还有'linear' 匀速运动
    参数四：回调函数，是一个匿名函数，动画结束后会自动调用这个匿名函数
                */
                $div.animate({'width':1300,'height':700},1000,'swing',function(){                $div.animate({'width':100,'height':100},1000,'linear')
                })
            })
        })
    
    </script>
</head>
<body>
    <button>动画开始</button>
    <div></div>
    
</body>

八、练习题一

<script>
    // 请写出实现的代码：
    // 提示：基本原理是改变列表容器的left值，根据点击的tab动画运动到对应的left值
    $(function(){
        var $btn=$('.tab_btns input')
        var $con=$('.tab_cons')
        // 获取列表容器的宽度
        var $con_size=$con.css('width');
        // 一、点击按钮高亮，其他按钮不亮
      $btn.click(function(){
            $(this).addClass('current').siblings().removeClass('current');
        // 二、按钮改变，下面网页内容跟着改变,并且有动画效果
      $con.animate({'left':-500*($(this).index())})
                     
        })
    })
    </script>

九、练习题二

<script>
     // 请写出实现的代码：
     $(function(){
         var $but=$('#btn');
         var $pop_main=$('.pop_main');
         var $pop_con=$('.pop_con')
         var $a=$('a');
         var $cancel=$('.cancel');
         $but.click(function(){
            
             $pop_con.css({'top':0,'margin-top':0,'opacity':0});
             $pop_main.css({'display':'block'});
             $pop_con.animate({'top':'50%','margin-top':-150,'opacity':1});
             $a.click(function(){
                 $pop_con.animate({'top':0,'margin-top':0,'opacity':0},function(){
                    $pop_main.css({'display':'none'});
                 });
                
             })
             $cancel.click(function(){
                $pop_con.animate({'top':0,'margin-top':0,'opacity':0},function(){
                    $pop_main.css({'display':'none'});
                });
                
             })
         })      
     })   
    </script>