jQuery 基础知识(一)

前面已经介绍HTML、CSS和javaScript，这三个前端语言，俗称前端三剑客。下面来学习一个javaScript简化并封装好的库——jQuery库。

01 - jQuery介绍

前端必须学习的jQuery库。

• jQuery的定义

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

• jQuery的作用

jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

• jQuery的优点

• jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。

• jQuery简化了 JavaScript 编程，代码编写更加简单。

说明：

• jQuery是一个免费、开源的JavaScript函数库

• jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。

• jQuery的优点就是兼容主流、浏览器，代码编写更加简单。

02 - jQuery的用法

• jQuery的引入
  

jQuery本身是对javascript的封装，所以使用它，就引入的文件也就是.js文件。如：

?

1	<script src="./node_modules/jquery/dist/jquery.min.js"></script>

• jQuery的入口函数
  

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

入口函数示例代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<script src="js/jquery-1.12.4.min.js"></script> <script>     window.onload = function(){         var oDiv = document.getElementById('div01');         alert('原生就是获取的div：' + oDiv);     };     $(document).ready(function(){         var $div = $('#div01');         alert('jquery获取的div：' + $div);     }); </script>   <div id="div01">这是一个div</div>

入口函数的简写示例代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script src="js/jquery-1.12.4.min.js"></script> <script>     window.onload = function(){         var oDiv = document.getElementById('div01');         alert('原生就是获取的div：' + oDiv);     };       /*     $(document).ready(function(){         var $div = $('#div01');         alert('jquery获取的div：' + $div);     });     */       // 上面ready的写法可以简写成下面的形式：     $(function(){         var $div = $('#div01');         alert('jquery获取的div：' + $div);     }); </script>   <div id="div01">这是一个div</div>

说明：

• 引入jQuery

• 获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快

• jQuery入口函数有两种写法:
  
  

?

1 2 3 4 5 6 7 8 9

// 完整写法 $(document).ready(function(){      ... });   // 简化写法 $(function(){      ... });

03 - jQuery的选择器

我们在讲CSS的时候讲过选择器，CSS中选择器介绍了6种，标签、层级、类、id、组和伪类选择器。选择器就是通过标签和标签的属性来定位到标签，以选择所需标签来操作标签的属性值。而jQuery也是有选择器的，下面介绍jQuery选择器的使用。

• jQuery选择器的介绍

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

• jQuery选择器的种类
  

1. 标签选择器

2. 类选择器

3. id选择器

4. 层级选择器

5. 属性选择器

示例代码：

?

1 2 3 4 5 6 7 8 9

$('#myId') //选择id为myId的标签 $('.myClass') // 选择class为myClass的标签 $('li') //选择所有的li标签 $('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签 $('input[name=first]') // 选择name属性等于first的input标签   <div id="div1" class='myClass'>这是一个div元素</div> <input type="text" name="first" id="input1" value="20px"> <a href="#" id="myId" class="sty01">这是一个链接</a>

说明：
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

?

1 2 3 4

$(function(){     result = $("div").length;     alert(result); });

备注：

• jQuery选择器就是选择标签的

• 标签选择器是根据标签名来选择标签

• 类选择器是根据类名来选择标签

• id选择器是根据id来选择标签

• 层级选择器是根据层级关系来选择标签

• 属性选择器是根据属性名来选择标签
  

 

• 知识点回顾
  

本节介绍了jQuery的定义、引入，以及选择器的使用。

1、jQuery是对javascript的封装，简化了javascript的编程

2、通过<script></script>标签中src属性来引用

3、jQuery同CSS一样拥有选择器，可以通过选择器来操作标签的属性及属性值，一共介绍5种选择器：
    1.标签选择器
    2.类选择器
    3.id选择器
    4.层级选择器
    5.属性选择器

 

工欲善其事，必先利其器！