①jQuery 介绍及基础知识（用jQuery修改样式）

阅读量：3965 次

发布时间：2019-05-24

本文共 3512 字，大约阅读时间需要 11 分钟。

jQuery

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

jQuery介绍

像之前使用JavaScript时，要想实现页面的动态交互，肯定会用到DOM和BOM。我们也知道DOM和BOM用起来，感觉还是麻烦一些，我在之前也写到了一些简便用法。所以肯定会有大佬将简便的用法包装起来，让DOM和BOM更易用（当然也还有其他的内容），所以jQuery也就应运而生。

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

虽然Vue和React可能更好，但是jQuery是最基本的东西。

初识jQuery ※

jQuery的不同版本：
①1.x：兼容老版本IE，文件更大
②2.x：部分IE8及以下不支持，文件小，执行效率更高
③3.x：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本。
（之后使用的jQuery库，大家需要自行下载。因为不同版本对普通学习者来说区别不大，之后使用1.x版本）

其中，带min的是压缩过的，不带min是没压缩过的。在测试阶段使用未压缩的，因为这样可以避免一些问题。在真正上线使用的时候，使用压缩过的，这样用户运行的比较快，而且很小。

在这里说一个有关分号的问题：在此之前，分号是必须要有的，当然在一些用法里，分号是一定要加的。但除此以外，以后再写JS代码时，可以省略有些确实有点多余的分号。
（有点python的感觉）

本地引入jQuery库：
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>

CDN远程引入jQuery库：
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
（项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担）

在这里插入图片描述

		
   	01_初识jQuery	
   		
   	
   		
   	
   						
   		用户名:

（也许看到这还不了解为什么这么用，就可以把它当作jQuery的固定用法，其实有一部分涉及到JS的高级用法，但是目前我还没有学到。之后还会遇到很多方法，建议去自行下载jQuery1.7 中文手册，或其他版本的，方便参考。因为如果遇到一些用法比较简单的，在这里不会过多赘述。）

jQuery的两把利器

在这里插入图片描述


   jQuery的二把利器

jQuery的核心函数 ※


   03_jQuery核心函数

jQuery对象 ※

在这里插入图片描述


   04_jQuery对象

选择器（用css()简单修改样式）

基本选择器

基本选择器和JavaScript一样。


   05_基本选择器	
   
    div1(class="box")
   
	
   
    div2(class="box")
   
	
   
    div3
   
	span(class="box")	
	
   		
    AAAAA
		
    BBBBB(title="hello")
		
    CCCCC(class="box")
		
    DDDDDD(title="hello")

层次选择器

在这里插入图片描述


   06_层次选择器	
   		
    AAAAA
		
    CCCCC
		
    BBBBB
		
    DDDD
		
    EEEEE

过滤选择器

在这里插入图片描述


   07_过滤选择器	
   
    class为box的div1
   
	
   
    class为box的div2
   
	
   
    div3
   
	class为box的span	
	
   		
    AAAAA
		
    BBBBB
		
    CCCCC
		
    DDDDDD
		
    BBBBB
		
    我本来是隐藏的

表单选择器


   08_表单选择器	
   
    		用户名: 
    		
    
 		密 码: 
    		
    
		爱 好: 		
    篮球 		
    足球 		
    羽毛球 		
    
		性 别: 		
    男 		
    女		
    
 		邮 箱: 
    		
    
 		所在地:

$工具方法 type() isArray() isFunction()

在这里插入图片描述


   09_$工具方法

属性相关方法 attr() removeAttr() prop()

在这里插入图片描述


   10_属性	
   
    class为box的div1
   
	
   
    class为box的div2
   
	
   
    div3
   
	class为box的span	
	
   		
    AAAAA
		
    BBBBB
		
    CCCCC
		
    DDDDDD
		
    BBBBB

与css样式有关的方法 ※

css()

之前有所提及。css()，可以设置css样式/读取css值。

11_css

尚硅谷的后裔

太阳的后裔

offset()和postion()

在这里插入图片描述


   12_offset和position	
   		
    
     测试offset

元素滚动 scrollTop()

在这里插入图片描述


   13_元素滚动	
   
    		This is some text. This is some text. This is some text. This is some		text. This is some text. This is some text. This is some text. This is		some text. This is some text. This is some text. This is some text.		This is some text. This is some text. This is some text. This is some		text. This is some text. This is some text. This is some text. This is		some text. This is some text. This is some text. This is some text.		This is some text. This is some text. his is some text.