Jquery简明教程（一）

发表于 | 分类于 | 热度: ℃ |
字数统计: 2,424字 | 阅读时长 ≈ 11分钟

概述

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文件就可以使用。

1
<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 时导入文件的方式: 

1
2
3
4
5
6
7
8
9
10
11
<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 更快。

1
2
3
4
5
使用格式:

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

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<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>

可以简写为：

1
2
3
4
5
使用格式:

$(function(){
	...
})
1
2
3
4
5
6
7
8
9
10
11
12
<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 属性判断是否选择成功。

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

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>

对选择集进行过滤

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

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

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

效果:

11

选择集转移

1
2
3
4
5
6
7
8
$('#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的元素

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>

结果:

再例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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 有容错机制，即使没有找到元素，也不会出错，可以用 length 属性来判断是否找到了元素, length 等于0，就是没选择到元素，length 大于0，就是选择到了元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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
2
1 
0

总结:

  • 通过使用 jquery 的选择器, 我们会发现选中元素变得更加简单

  • 通过这章,我们对标识符有了更深入的了解, js 中的标识符是可以包含 $ 的, 并且可以以它开头

  • 我们可以直接通过某些属性选中需要的元素, 也可以间接通过别的元素选中, 这样的选中方式就是我们说的选择集转移

  • 选择集过滤, 是为了剔除有相同属性的元素, 这样的技能需要掌握, 公司标签多的时候,会使用到.

四. jquery样式操作

jquery用法思想

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

操作样式

1
2
3
4
5
6
7
8
9
10
使用方法: 

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

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

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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。

操作额外样式

1
2
3
4
5
6
使用方法: 

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

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

效果: 

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

再例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

结果: 

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

或者例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

结果:

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

下一个例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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( )

    ​

------ 本文结束------
坚持原创技术分享，您的支持将鼓励我继续创作！
0%