Jquery笔记(上)

共计 6537 个字符,预计需要花费 17 分钟才能阅读完成。

概述

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

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

一、导入jquery

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

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery的口号和愿望 Write Less, Do More(写得少,做得多)

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

二. 使用 jquery 加载代码

不适用 jquery

我们不适用 jquery 时导入文件的方式:

<head>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('app')
            oDiv.innerHTML = 'hello world'
        }
    </script>
</head>
<body>
    <div id="app"></div>
</body>

使用 jquery

将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

使用格式:

$(document).ready(function(){
    ...
})

例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function(){
            var $div = $('#app')
            $div.html('hello world')
        })
    </script>
</head>
<body>
    <div id="app"></div>
</body>

可以简写为:

使用格式:

$(function(){
    ...
})
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#app')
            $div.html('hello world')
        })
    </script>
</head>
<body>
    <div id="app"></div>
</body>

总结:

  • 使用 jquery 能够简化我们书写的代码
  • jquery 的 ready 调用方法比我们之前接触的 window.onload 方法调用的要早: ready 是html加载完毕之后就调用, onload是在资源文件也加载完毕之后才调用.
  • jquery 的 ready 有简略写法, 我们往往使用它的简略写法.

三. jquery选择器

jquery使用思想

先, 选择某个网页元素,然后, 对它进行某种操作

jquery选择器

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

$('#myId')                  // 选择id为myId的网页元素
$('.myClass')              // 选择class为myClass的元素
$('li')                 // 选择所有的li元素
$('#ul1 li span')        // 选择id为为ul1元素下的所有li下的span元素
$('input[name="first"]')   // 选择name属性等于first的input元素

例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#app')
            $div.html('hello!!')

            var $div1 = $('.box')
            $div1.html('box登场')

            var $div2 = $('#divbox')
            $div2.html('会不会把p标签给替换掉?')

            var $span = $('ul li p span')
            $span.html('强调强调强调')

            var $a = $('a[href="www"]')
            $a.html('a标签修改的文字')
        })
    </script>
</head>
<body>
    <div id="app">nihao</div>
    <div class="box"></div>
    <div id="divbox">
        <p>哈哈,这里是p标签的主场</p>
    </div>
    <a href="com">这是第一个a标签</a>
    <a href="www">这是第二个a标签</a>
    <ul>
        <li>
            <p>这里是p标签内部,添加了<span>强调的字体</span></p>
        </li>
    </ul>
</body>

对选择集进行过滤

我们可以剔除一些不需要的,保留需要的元素

$('div').has('p');             // 选择包含p元素的div元素
$('div').not('.myClass');    // 选择class不等于myClass的div元素
$('div').eq(5);             //   选择第6个div元素

例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('div').has('p')
            $div.html('哈哈,选中的')
            var $p = $('p').not('.pbox')
            $p.html('更改的是p标签里面的东西')
            var $li = $('li').eq(2)
            $li.html('hahhaa')
        })
    </script>
</head>
<body>
    <div>
        <p>div中的p标签</p>
    </div>
    <div>哈哈哈哈哈</div>
    <p class="pbox">含有pbox的p标签</p>
    <p>纯粹的p标签</p>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
</body>

效果:

Jquery笔记(上)

选择集转移

$('#box').prev();              //  选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll();         //  选择id是box的元素之前所有的同辈元素
$('#box').next();             //  选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll();         //  选择id是box的元素后面所有的同辈元素
$('#box').parent();         //  选择id是box的元素的父元素
$('#box').children();         //  选择id是box的元素的所有子元素
$('#box').siblings();         //  选择id是box的元素的同级元素
$('#box').find('.myClass'); //    选择id是box的元素内的class等于myClass的元素

例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('.box')
            $div1.html('哈哈')  

            var $div2 = $('.box').prev()
            $div2.html('嘿嘿')

            var $div3 = $('.box').next()
            $div3.html('呵呵')

            var $div4 = $('.box').parent()
            $div4.append('哇哇')
        })
    </script>
</head>
<body>
    <div>
        <div>第一个div标签</div>
        <div>第二个div标签</div>
        <div class="box">
            <p>div.box中的p标签</p>
        </div>
        <div>下面倒数第二个div标签</div>
        <div>下面倒数第一个div标签</div> 
    </div>
</body>

结果:

Jquery笔记(上)

再例如:

<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="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div5 = $('.box').siblings()
            $div5.html('good')

            var $div6 = $('.box').find('.pbox')
            $div6.html('呜啊呜啊')
        })
    </script>
</head>
<body>
    <div>
        <div>第一个div标签</div>
        <div>第二个div标签</div>
        <div class="box">
            <p class="pbox">div.box中添加有class的p标签</p>
            <p>div.box中没有添加class的p标签</p>
        </div>
        <div>下面倒数第二个div标签</div>
        <div>下面倒数第一个div标签</div> 
    </div>
</body>

结果:

Jquery笔记(上)

判断是否选择到了元素

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

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#div1')
            var $div2 = $('#div2')

            // 找到了,   length大于0
            console.log( $div1.length ) 
            // 没有找到, length等于0
            console.log( $div2.length )
        })
    </script>
</head>
<body>
    <div id="div1"></div>
</body>

结果:

1 
0

总结:

  • 通过使用 jquery 的选择器, 我们会发现选中元素变得更加简单
  • 通过这章,我们对标识符有了更深入的了解, js 中的标识符是可以包含 $ 的, 并且可以以它开头
  • 我们可以直接通过某些属性选中需要的元素, 也可以间接通过别的元素选中, 这样的选中方式就是我们说的选择集转移
  • 选择集过滤, 是为了剔除有相同属性的元素, 这样的技能需要掌握, 公司标签多的时候,会使用到.

四. jquery样式操作

jquery用法思想

使用同一个函数完成读取和赋值

操作样式

使用方法: 

// 获取div的样式
$("div").css("width");
$("div").css("color");

// 设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('div')
            $div.css('width','200px')
            $div.css('height','200px')
            // 需要注意: 多个属性同时设置,需要使用 {} 包裹
            $div.css({'background-color':'pink','color':'red'})
            $div.css({fontWeight:'bold',fontSize:'30px'})

            var width = $div.css('width')
            var height = $div.css('height')
            console.log(width)
            console.log(height)
        })
    </script>
</head>
<body>
    <div>这里有个div</div>
</body>

特别注意

如果使用选择器获取了多个元素,那么, 获取的信息是第一个元素的,比如:$(“li”).css(“width”),获取的是第一个 li 的 width。

操作额外样式

使用方法: 

$("#div1").addClass("divClass2")                 //  给id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")              //  移除div1的divClass的样式类名
$("#div1").removeClass("divClass divClass2")      //  移除多个样式
$("#div1").toggleClass("anotherClass")             //  重复切换anotherClass样式

例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#div1')
            $div.addClass('divClass2')
            // $div[0] 可以将jquery对象变为元素对象
            console.log($div[0])
        })
    </script>
</head>
<body>
    <div id="div1" class="divClass">hahha</div>
</body>

效果:

<div id="div1" class="divClass divClass2">hahha</div>

再例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#div1')
            $div.removeClass('divClass')
            console.log($div[0])
        })
    </script>
</head>
<body>
    <div id="div1" class="divClass">hahha</div>
</body>

结果:

<div id="div1" class="">hahha</div>

或者例如:

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#div1')
            $div.addClass('divClass2')
            $div.removeClass('divClass divClass2')
            console.log($div[0])
        })
    </script>
</head>
<body>
    <div id="div1" class="divClass">hahha</div>
</body>

结果:

<div id="div1" class="">hahha</div>

下一个例如:

<head>
    <script src="./jquery-1.12.4.min.js">
    </script>
    <style type="text/css">
        .c1 {
            color: red;
        }
    </style>
</head>

<body>
    <div id="div" class="c1">hello world</div>
    <button id="button"> click me</button>


    <script type="text/javascript">
        $('#button').click(function(){
            // 点击一个添加当前c1样式,再点击一次取消当前c1样式
            $("#div").toggleClass('c1');
        })
    </script>
</body>

总结:

  • 使用 jquery 获取当前的标签, 得到标签之后,如果要对标签进行CSS样式的修改,直接调用 .css( ) 方法即可.
  • .css( ) 方法, 可以当做 读取css样式值 来使用, 也可以当做 设置css样式值来使用
  • 额外操作样式的方法就三个: addClass( ) removeClass( ) toggleClass( )
正文完
 
Dustin
版权声明:本站原创文章,由 Dustin 2019-09-23发表,共计6537字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。