前端修炼——jQuery入门！

其他 2018-10-12 15:04:32 阅读次数: 0

内容概述：
    全局变量和局部变量，
    jQuery 介绍
    获取标签
    jQuery 操作样式
    点击事、this 关键字
    动画 animate

全局变量和局部变量

全局变量

定义在函数外面

作用范围：是全局的

局部变量

定义在函数里面

作用的范围是局部，函数内部

可以在函数中直接修改全局变量

<!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>
        // 定义全局变量
        var iNum01 = 33;

        function fnMyfunc(){
            // 在函数内部定义局部变量，需要加 var ，如果不加 var ，那么定义的就是一个全局变量
            var iNum02 = 66;
            
            // 这里就是一个全局变量
            iNum03 = 88;

            // 使用变量
            console.log('函数内部调用全局变量 iNum01: ' + iNum01);
            console.log('函数内部调用局部变量 iNum02: ' + iNum02);

            iNum01 = 22;
            console.log('函数内部调用全局变量 iNum01: ' + iNum01);

        }
    
        fnMyfunc();

        console.log('函数内部调用全局变量 iNum01: ' + iNum01);
        console.log('函数外部调用全局变量 iNum03: ' + iNum03);
    
    </script>

</head>
<body>
    
</body>
</html>


jquery 介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

使用：

<script src=“js/jquery-1.12.4.min.js”></script>

$(function(){代码功能})

jquery的口号和愿望 Write Less, Do More（写得少，做得多）



获取标签

jquery 选择器：

jquery 选择器可以快速地选择元素，选择规则和 css 样式相同，使用length 属性判断是否选择成功。

找标签

$(“#id”) 通过 id 名找元素

$(“.类名”) 通过类名找元素

$(“ 标签名”) 通过标签名找元素

$(“div p”) 通过标签名层级找元素

过滤

$(‘div’).has(‘span’); // 选择包含span元素的div元素

$(‘div’).not(’.box’); // 选择class不是 .box的div元素

$(‘li’).eq(2); // 选择li标签的第2个元素

转移

prev() 当前元素的上一个

prevAll() 当前元素的上面所有的

next() 当前元素的下一个

nextAll() 当前元素的下面所有

parent() 当前元素的父元素

children() 当前元素的所有子元素

siblings() 当前元素的所有同级元素

find() 通过指定条件找当前元素的某一个子元素

判断是否选择到了元素

jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

<!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>
        $(function(){
            var $div = $('#div1');
            var $div2 = $('.box');
            var $li = $('li');
            var $span = $('.box span')
            var $div3 = $('div[class="box2"]');

            var $div4 = $('div').has('span');  // 选择包含span元素的div元素
            var $div5 = $('div').not('.box');  // 选择class不是 .box的div元素
            var $li2 = $('li').eq(2);  // 选择li标签的第2个元素


            $div.css({'color':'red','font-size':30});
            $div2.css({'color':'green','fontSize':'30px'});
            $li.css({'background':'gold'});
            $span.css({'color':'#666','font-size':50});
            $div3.css({'color':'#aaa','font-size':20});
            
            $div4.css({'text-indent':50});
            $div5.css({'text-decoration':'underline'});
            $li2.css({'list-style':'none'})
            
        })
  
    </script>

</head>
<body>
    <div id="div1">这是第一个div</div>
    <div class="box">这是第二个<span>div</span></div>
    <div class="box">这是第三个div</div>
    <div class="box2">这是第四个div</div>

    <ul>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

</body>
</html>


<!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>
        $(function(){
            var $div = $('#div1');

            $div.prev().css({'color':'red'}); // 选择 id 前面紧挨的一个元素
            $div.prevAll().css({'text-indent':40});  // 选择id前面的所有元素
            $div.next().css({'color':'blue'});  // 选择id后面紧挨的一个元素
            $div.nextAll().css({'text-decoration':'underline'});  // 选择id后面所有的元素

            $div.parent().css({'background':"#ccc"});  // 选择id的父元素
            $div.children().css({'color':'red','font-size':40});  // 选择id的子元素

            $div.siblings().css({'background':'gold'});  // 除选择id外的所有元素

            $div.find('.sp02').css({'font-weight':'bold'});  // 通过类找选择id中的某一个子元素

        })
       
    </script>

</head>
<body>
    <div>
        <h2>这是一个 h2 标题</h2>
        <p>这是一个段落</p>
        <div id="div1">这是一个<span>div</span><span class="sp02">span02</span></div>
        <h3>这是一个h3标题</h3>
        <p>这个第二个段落</p>

    </div>

</body>
</html>


jquery 操作样式

行内style

css()

<!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>
        $(function(){
            var $div = $('#div1');

            //  读取样式属性
            var sSize = $div.css('font-size');
            // console.log(sSize);  16px

            // 原生方法设置文字大小, 原生需要在标签中声明这个样式属性才可以获取到
            var sSize2 = document.getElementById('div1').style.fontSize;
            // console.log(sSize2 );

            //  写样式属性，也叫做设置或修改样式属性
            $div.css('color',"red");
            $div.css({'font-size':30,'background':'#666'});

            //  获取多个元素的属性值，得到的是第一个元素的属性值
            var $div2 = $('div');
            var sSize3 = $div2.css('font-size');
            console.log(sSize3);

        })
      
    </script>
</head>
<body>
    <div id="div1">这是一个div</div>    
</body>
</html>
类选择器

addClass() 追加样式

removeClass() 删除样式

toggleClass() 重复切换样式

<!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>
    <style>
        .big {
            font-size: 30px;
        }
        .red {
            color:red;
        }
        .noline {
            text-decoration: none;
        }
   
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $a = $('#link01');

            // 增加样式类名
            $a.addClass('big'); 
            $a.addClass('red');
            $a.addClass('noline');
            
            // 删除样式类名
            $a.removeClass('big');
            $a.removeClass('red noline');
                   
        })
        
    </script>

</head>
<body>
    <a href="#" id="link01">这是一个链接</a>
</body>
</html>


点击事件，this 关键字

click() 点击事件

$(this) 当前点击的事件 this是原生js，

index() 获取元素的索引

mouseover() 鼠标移入

mouseout() 鼠标移除

<!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>
        $(function(){
            var $li = $('.list li');
            var $p = $('p');

            // 绑定 click 事件
            $li.click(function(){
                // this 指的是当前发生点击事件的那个对象，它是原生对象
                // this.style.background = 'gold';

                // $(this) 指的是当前发生点击事件的那个对象，它是 jquery 对象
                $(this).css({'background':'red'});

                // 获取元素的索引值
                console.log( $(this).index() );

            })

            $p.click(function(){
                console.log($(this).index());

            })
            
        })   
    </script>

</head>
<body>
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <div>
        <p>这是第一个p标签</p>
    </div>
    
    <div>
        <p>这是第二个p标签</p>
    </div>

</body>
</html>


动画 animate

animate(样式，时间，动画曲线，回调函数)

第一个参数：要做动画的样式属性，写成字典的形式

第二个参数：动画持续的时间，默认是 400 毫秒，默认单位是毫秒，定义时不写单位

第三个参数：动画曲线，默认是 ‘swing’ 缓冲运动，还有 ‘linear’ 匀速运动

第四个参数：回调函数，动画完成后执行的匿名函数

<!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>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: #666;

        }
    
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $btn = $('#btn');
            var $div = $('.box');

            $btn.click(function(){
                // $div.css({'width':500});
                
                //  animate  实现动画效果
                $div.animate({'width':500},1000,function(){
                    $div.animate({'margin-top':300}, 1000,function(){
                        $div.animate({'width':200,'margin-top':0}, 1000)
                    })
                });
            })
        })   
    </script>
</head>
<body>
    <input type="button" value="动画" id="btn">
    <div class="box"></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qyf__123/article/details/82793481
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022