jQuery简单学习，看这篇就够了！

Love The Way You Lie 2023-07-09 07:24 12阅读 0赞

### 文章目录 ###

*  1 jQuery
 *   *  1.1 什么jQuery
     *  1.2 JQ的入门
     *  1.3 JQuery中的选择器
     *   *  1.3.1 JQ中的基本选择器
         *   *  1.3.1.1 基本选择器的案例
         *  1.3.2 JQ中的层级选择器
         *   *  1.3.2.1 层级选择器的案例
         *  1.3.3 JQ中的基本过滤器
         *  1.3.4 JQ中的属性选择器
         *  1.3.5 JQ中的表单过滤器
     *  1.4 JQ和JS之间的转换
     *  1.5 JQ中的动画效果
     *  1.6 JQ常用函数
     *  1.7 JQ的开发步骤

--------------------

# 1 jQuery #

## 1.1 什么jQuery ##

1.  jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(*或JavaScript框架*)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.  jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
3.  jQuery的作用:
    
    1.  写更少的代码,做更多的事情: write Less, Do more
    2.  将我们页面的JS代码和HTML页面代码进行分离

## 1.2 JQ的入门 ##

## 1.3 JQuery中的选择器 ##

### 1.3.1 JQ中的基本选择器 ###

*  ID选择器: \#ID的名称
 *  类选择器: 以 . 开头 .类名
 *  元素选择器: 标签的名称
 *  通配符选择器: \*
 *  选择器,选择器: 选择器1, 选择器2

#### 1.3.1.1 基本选择器的案例 ####

### 1.3.2 JQ中的层级选择器 ###

*  子元素选择器: 选择器1 > 选择器2
 *  后代选择器: 选择器1 儿孙
 *  相邻兄弟选择器: 选择器1 + 选择器2: 找出紧挨着的一个弟弟
 *  找出所有弟弟: 选择器1~选择器2: 找出所有的弟弟

#### 1.3.2.1 层级选择器的案例 ####

### 1.3.3 JQ中的基本过滤器 ###

> 选择器:过滤器 $(“div:first”)  
> :first 找出第一个元素  
> :last 找出最后一个元素  
> :even 找出偶数索引  
> :odd 找出奇数  
> :gt(index) greater-than大于  
> :lt(index) 小于  
> :eq(index) 等于

### 1.3.4 JQ中的属性选择器 ###

1.  选择器\[属性名称\]

选择器[属性名称][属性名称]
    选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']

### 1.3.5 JQ中的表单过滤器 ###

1.  表单选择器:  
    :input 找出所有的输入项 : 不单单找出input textarea select  
    :text 找出type类型为 text  
    :password 找出type类型为 password
2.  常用表单对象属性的过滤器  
    :selected  
    :checked

## 1.4 JQ和JS之间的转换 ##

*  JQ对象: 只能调用JQ的属性和方法
 *  JS对象: 只能调用JS的属性和方法

## 1.5 JQ中的动画效果 ##

show(): 显示隐藏的匹配元素
    hide(): 隐藏匹配的元素
    slideUp(): 用滑动动画隐藏一个匹配元素
    slideDown(): 用滑动动画显示一个匹配元素
    fadeIn(): 通过淡入的方式显示匹配元素
    fadeOut(): 通过淡出的方式隐藏匹配元素
    animate(): 自定义动画

## 1.6 JQ常用函数 ##

> $(function): 文档加载完成的事件  
> css(): 修改css样式  
> prop(): 修改属性/获取属性  
> html(): 修改innerHTML  
> attr(): 操作一些自定义的属性  
> addClass(): 添加一个class样式  
> removeClass(): 移除  
> blur: 绑定失去焦点  
> focus: 绑定获得焦点事件  
> click: 鼠标按键被按下和释放时候  
> dblclick: 双击  
> change: 元素的值改变—>下拉选择框，复选框和单选按钮

> append: 给自己添加子节点  
> appendTo: 将自己添加到别人家,给自己找一个爹  
> prepend: 在自己最前面添加子节点  
> after: 在自己后面添加一个兄弟  
> empty: 清空所有子节点

## 1.7 JQ的开发步骤 ##

将我们页面的JS代码和HTML页面代码进行分离)

1.  导入JQ相关的文件
2.  文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3.  确定相关操作的事件
4.  事件触发函数
5.  函数里面再去操作相关的元素