jQuery入门

最新推荐文章于 2023-01-10 23:07:58 发布

原创最新推荐文章于 2023-01-10 23:07:58 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

11 篇文章

订阅专栏

jQuery入门

一、jQuery的简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

二、jQuery的使用

1.jQuery的引用

   <!-- 只有引入js文件才能实现jQuery的功能，否则功能无效 -->
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        // 如果能弹出东西说明jQuery引入成功
        alert($);
    </script>

之所以要引用这个文件，是因为jQuery是建立在JavaScript基础之上运行起来的，它有它自己独特的功能，这也是JavaScript实现不了的，所以需要导入相关文件才能运行

2.jQuery和原生JavaScript的区别

用一个程序来先看看jQuery和JavaScript有什么区别

<!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>03-jQuery和原生js对比</title>
    <script>
        // 浏览器加载完成
        window.onload = function () {
            var oDiv = document.getElementById('box');

            oDiv.style.color = 'red';
            // 原生js只能获取到标签的行内式样式属性的值
            alert(oDiv.style.fontSize + 'js获取');
        }
    </script>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 获取id为box的标签对象
            var $div=$('#box');
            alert($div.css('fontSize')+'jQuery获取');
            
        })
      
    </script>

</head>
<body>
    <div id="box">div标签</div>
</body>
</html>

从结果可以发现，在我们没有设置div标签内的innerHTmL的字体大小时，正常情况下它会自动继承父类字体16px，但是结果发现，使用原生JS并不能获得这个结果，而使用jQuery却能获得字体的大小，这就是jq与JS的最大不同之处，即原生JS只能获取到行内式里面设置的属性值（对于嵌入式、外链式的写法本质上都是在对行内式的属性在进行操作，所以JS的三种写法本质是一样的），而强大的jQuery不管是标签的什么属性，不管是行内式设置的属性还是用户未设置而从父类继承的属性，它都是可以获取到并且进行修改的。还有就是jQuery的程序会比JS的程序先执行，因为JS是等待网页结构、图片地址、外链等加载完成之后才会去执行的，而jQuery只需要等到网页结构加载完成就可以执行了，所以执行在前面。

另外我们来对比一下jQuery和JavaScript在编程上的写法有何不同：

jquery与js的区别
jQuery	JavaScript
$(function(){函数体})	window.load=function(){函数体}
获取标签对象 var $box=$(‘jq选择器’);	var oBox=document.GetElementById('id名')；（oBox就是js对象）
操作样式 $box,css();可以设置/获取样式属性	oBox。style.属性

JS对象转换为jq对象

$(JS对象).css(); 这样就将JS对象转换成了jq对象并且可以操作css了

3.jquery操作css

上面已经说过，jQuery不仅可以获取标签属性值，而且还可以设置标签属性的值，请参照下面的程序：

<!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>04-jQuery操作CSS属性</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 获取jq对象
            var $div=$('#box');
            // 设置样式属性
            $div.css({'width':'200px',
                       'height':'200px',
                       'backgroundColor':'gold',
                        'color':'red'});
            // 获取属性值
            alert($div.css('fontSize'));
            
        })
    </script>
</head>
<body>
    <div id="box">div标签</div>
</body>
</html>

在$div.css()中，如果要设置属性值就写成字典的格式（键值对），如果要获取就直接引号引起来即可获取

其实，在jQuery中属性名的写法更为的灵活，既可以用css中的格式，也可以用JS中的格式，可以根据个人习惯进行选取。

4.jQuery的选择器

（1），标签选择器

 // 标签选择器直接选取标签，会选取到所有的目标标签
 var $div=$('div');
 $div.css({'backgroundColor':'gold'});

（2），id选择器

 // id选择器
 var $box4=$('#box4');
 $box4.css({'backgroundColor':'red'});

（3），类选择器

 // 类选择器
  var $box1=$('.box1');
  $box1.css({'color':'gold'});

（4），层级后代选择器

// 层级后代选择器
 var $div=$('.cn .bx1');
 $div.css({'color':'red'});

（5），组选择器

 // 组选择器
var $group=$('.box1,.ox2');      $group.css({'backgroundColor':'red'});

（6），属性选择器

 6.属性选择器
 var $div = $('div[class$=1]');  // *=  表示类名里只要包含   ^= 开头是否包含  $= 结束包含
 $div.css({'color':'green'});

5、jQuery选择集过滤

 <script>
        $(function () {
            // 获取内部嵌套有p标签的div标签对象
            var $divs=$('div');
            // $divs.has('.p1').css({'backgroundColor':'red'});
            // $divs.has('p').css({'backgroundColor':'red'});
            //选择类名不是.box的div标签
            // $divs.not('.box').css({'backgroundColor':'gold'});
            // 获取返回的对象数组中索引为1的div对象
            $divs.eq(1).css({'backgroundColor':'gold'});
            
            // 获取标签名为li的标签
            var $Lis=$('li');
            //通过角标的方式去找指定的标签，和嵌套层无关，都是从零开始 即使不在一个ul标签里，
            // 但是获取标签对象返回的是一个包含对象的数组 所以无关嵌套的问题
            //角标只会从返回的数组中检索
            $Lis.eq(8).css({'color':'red'});
        })
        
    </script>

6、jQuery的转移

（1）、prev()转移到跟自己平级的上面一个标签，即只比自己大的兄弟

（2）、prevAll()转移到跟自己平级的上面所有的标签，即找所有比自己大的兄弟

（3）、next()转移到跟自己平级的下一个标签

（4）、nextAll()转移到跟自己平级的下面所有的标签

（5）、siblings()转移到除了自己而且跟自己平级的所有标签上

（6）、children()转移到自己的直接子级上，不会转移到孙子及后代，即不会转移到直接子级里面的子级

（7）、find()查找后代不管是直接自己还是子级的子级，只要是在这个子级里面都会被查找到

（8）、parent() 查找自己的直接父级即自己的亲爸

（9）、parents()查找自己所有的长辈即找祖宗十八代

<!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>07-选择器的转移</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div3 = $('.box3');

            // $div3.css({'color':'red'});
            // 1.prev previous 选中平级 上面的一个标签
            // $div3.prev().css({'color':'red'});

            // 2.prevAll  选中平级兄弟  上面的所有标签
            // $div3.prevAll().css({'color':'red'});

            // 3.next  选中平级兄弟  下面的一个标签
            // $div3.next().css({'color':'red'});

            // 4.nextAll  选中平级兄弟  下面的所有标签
            // $div3.nextAll().css({'color':'red'});

            // 5.siblings  选中除了自己以为的所有平级兄弟
            // $div3.siblings().css({'color':'red'});


            // 6.children() 选中所有直接子级,不会找到孙子及后代
            // $div3.children().css({'color':'red'});

            // 7.find() 查找后代
            // $div3.find('a').css({'color':'red'});

            // 8. parent 转移到自己的直接父级
            // $('p').parent().css({'color':'red'});

            // $('p').parents() 找该对象的祖宗们，集

        })
    </script>
</head>
<body>
    <div class="con">div容器
        <div>div1标签</div>
        <div>div2标签</div>
        <div class="box3">div3标签
            <p>p标签</p>
            <span>
                <a href="#">a标签</a>
            </span>
        </div>
        <div>div4标签</div>
        <div>div5标签</div>
    </div>
</body>
</html>

7、jQuery判断选择器是否选择到了标签

使用length()

 <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $lis = $('lia');

            // 如果length为0说明没有选择到标签
            alert($lis.length);
        })
    </script>

8、jQuery中的事件

在原生JavaScript中事件的定义都是通过特定的写法，如：obtn.onclick=function(){执行代码}；

而在jQuery中，写法会有些不同，如: $btn.click(function(){执行代码}); 在这里把click()看做一个方法，然后把匿名函数放在方法里面执行代码

由于jQuery中获取标签对象返回的是包含标签对象的数组，那么当触发事件的时候，如果不限制执行事件的对象，那么每次触发事件数组里面的所有对象都会去执行事件代码，因此就要用到this来限制当前是哪个对象要执行事件代码，这样就不会产生所有对象都去执行事件代码的现象。比如，给所有按钮增加点击事件，如果点击其中任意一个按钮，而不限制执行事代码的对象，那么其他所有的按钮都会执行事件代码，使用this可以定位到当前是谁在被点击，即能定位到正确的活动对象

<!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>09-jQuery中的事件</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $btn = $('.input');
            console.log($btn);
            // 原生js写法
            /* obtn.onclick = function () {
               执行代码
            } */
            $btn.click(function () {
               alert('这是jQuery写法！'); 
            })

            var $lis = $('li');

            // this 在事件中 它表示谁触发的事件就表示谁 默认是js对象
            // 把js对象转成jQuery中的对象  用$() 包装就可以
            $lis.click(function () {
                $(this).css({'color':'red'}); 
                // index() 从每一个嵌套关系中 都是从0开始 与eq不一样index只是返回当前对象在父标签中是第几个
                // index() 获取当前标签在它的直接父级中它是第几个儿子 从0开始
               alert($(this).index());
           
            //    $lis.eq($(this).index()+8).css({'color':'red'});

            })
        })      
    </script>
</head>
<body>
    <input type="button" value="按钮" class="input">

    <ul class="list">
        <li>li标签1</li>
        <li>li标签2</li>
        <li>li标签3</li>
        <li>li标签4</li>
        <li>li标签5</li>
        <li>li标签6</li>
        <li>li标签7</li>
        <li>li标签8</li>
    </ul>

    <ul class="list">
            <li>li标签1</li>
            <li>li标签2</li>
            <li>li标签3</li>
            <li>li标签4</li>
            <li>li标签5</li>
            <li>li标签6</li>
            <li>li标签7</li>
            <li>li标签8</li>
        </ul>
    
</body>
</html>

在这里还是要在此强调一下eq和index的区别：

eq是在选择集过滤中使用的，它的所以不依赖与对象原先存在的关系中，而是在数组中重新整合出来的新索引，从零开始

而index是表明当前活动的对象是在自己原先存在的父子关系中的序号，序号从零开始，并不是在返回的包含对象的数组中的序号。

9、jQuery操作标签的类名

（1）、给标签增加类名，不会覆盖原来存在的类名

标签对象.addClass('类名')；

（2）、删除标签中的类

标签对象.removeClass('类名');

（3）、如果有此类名就删除，没有就添加

标签对象.toggleClass('类名');

<script>
        $(function () {
            var $div = $('div');

            // 给标签添加类 不覆盖原有类名
            // $div.addClass('box');

                // 删除标签中的类
            // $div.removeClass('con');

            // 如果已经有此类就删除,如果没有 就添加
            $div.toggleClass('box');
        })
    </script>