jQuery入门

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的区别
jQueryJavaScript
$(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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值