jQuery基础入门

目录

一，jQuery的概念

二，jQuery的作用

三，jQuery的使用步骤

1.下载jQuery库

2.引入jQuery：将JS文件复制到项目中

3.开始使用

四，jQuery选择器

1.基本选择器

2，层次选择器

3，过滤选择器

---

一，jQuery的概念

jQuery：通俗的讲，就是封装了很多JS代码的代码库，它不是一门语言，而是js的框架

JavaScript：包含了90%的jQuery和10%的Ext JS（其他的JS）

jQuery的官方地址：http://jquery.com/  在官网中有很多关于jQuery的用法哦，感兴趣的读者也可以去官网看看，了解一下jQuery的使用哦

---

二，jQuery的作用

大家肯定都会好奇，学习jQuery到底有什么用呢？在上面我也给大家介绍了一下jQuery的一些基本概念，现在来给大家介绍一下 jQuery 到底有哪些作用吧。

如果大家进入过jQuery的官网，就会发现，jQuery的官网上写着这样几个词：write less，do more

写的更少，做得更多。就是这样简单的一句话，就概括了jQuery的作用，其实它就相当于是一个框架基础，可以让大家用更少的代码来做出自己想要的效果。

---

三，jQuery的使用步骤

1.下载jQuery库

jQuery有两个版本，一个是主要提供给开发使用的js版本，

另一个时主要提供给上市使用的min.js版本 这种版本所占资源较少。

 

---

2.引入jQuery：将JS文件复制到项目中

在html中新建一个目录 用来装载jQuery 然后将jQuery文件复制粘贴到目录中去

然后引入jQuery

其中的JS是目录名，可以自定义，jquery-3.5.1.js是jQuery的文件名。

注意 引入jQuery时需要把引入代码放在 head部位，否则可能出现报错现象。

  

3.开始使用

在引入jQuery后就可以开始正常使用，下面来给大家做一个简单的例子来对比一下JS和jQuery的不同之处。

同样给div修改颜色：

	
		
		
		
		
		
	
	
		

		

		

		

		

		点我更换颜色
		
	

有没有感觉用了jQuery后代码变得简洁了很多，效果也与js是一样的，用jQuery写出的代码不仅简洁，且方便记忆，那接下来就给大家介绍一下jQuery的一些基本用法。

---

四，jQuery选择器

1.基本选择器

ID选择器：#ID

类选择器：.class

元素选择器:element

通配符：*

这些基本选择器就可以运用在刚刚教大家的简单案例上。

2，层次选择器

parent > child：在给定的父元素下匹配所有的子元素

  Name:
  
  

      Newsletter:
      
 

3，过滤选择器

获取第一个元素:first

最后一个元素:last

获取偶数下标的元素:even

获取奇数下标的元素:odd

过滤选择器：

                    1.gt大于

                    2.lt小于

示例：

    
    
    
    


    

        

            
商品名字
            
商品价格
            
商品编号
            
商品描述
        
        

            

            
$99.0
            
10001
            
无敌好吃
        
            

            

            
$99.0
            
10001
            
无敌好吃
        
            

            
无敌大苹果
            
$99.0
            
10001
            
无敌好吃
        
            

            

            
$99.0
            
10001
            
无敌好吃
        
            

            

            
$99.0
            
10001
            
无敌好吃
        
            

            

            
$99.0
            
10001
            
无敌好吃
        
    
    

---

今天的jQuery小知识就分享到这里啦，想要了解更多的代码小知识，精彩下期继续 。