MyBatis零基础入门实践

Posted 2023-04-05 虚神公子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MyBatis零基础入门实践相关的知识，希望对你有一定的参考价值。

MyBatis

一、MyBatis简介
- 1、MyBatis历史
- 2、MyBatis特性
- 3、MyBatis下载
- 4、和其它持久化层技术对比
二、搭建MyBatis
- 1、开发环境
- 2、创建maven工程
- 3、创建MyBatis的核心配置文件
- 4、创建mapper接口
- 5、创建MyBatis的映射文件
- 6、通过junit测试功能
- 7、加入log4j日志功能
三、核心配置文件详解
四、MyBatis的增删改查
五、MyBatis获取参数值的两种方式（重点）
- 1、单个字面量类型的参数
- 2、多个字面量类型的参数
- 3、map集合类型的参数
- 4、实体类类型的参数
- 5、使用@Param标识参数
六、MyBatis的各种查询功能
- 1、查询一个实体类对象
- 2、查询一个list集合
- 3、查询单个数据
- 4、查询一条数据为map集合
- 5、查询多条数据为map集合
七、特殊SQL的执行
- 1、模糊查询
- 2、批量删除
- 3、动态设置表名
- 4、添加功能获取自增的主键
八、自定义映射resultMap
- 1、resultMap处理字段和属性的映射关系
- 2、多对一映射处理
- 3、一对多映射处理
九、动态SQL
十、MyBatis的缓存
- 1、MyBatis的一级缓存
- 2、MyBatis的二级缓存
- 3、二级缓存的相关配置
- 4、MyBatis缓存查询的顺序
- 5、整合第三方缓存EHCache
十一、MyBatis的逆向工程
- 1、创建逆向工程的步骤
- 2、QBC查询
十二、分页插件
- 1、分页插件使用步骤
- 2、分页插件的使用

MyBatis资料

链接：https://pan.baidu.com/s/1_Gr1QdfxsVTFGJC6V3i00Q?pwd=1tc5 
提取码：1tc5

一、MyBatis简介

1、MyBatis历史

MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code。随着开发团队转投Google Code旗下， iBatis3.x正式更名为MyBatis。代码于2013年11月迁移到Github。
iBatis一词来源于“internet”和“abatis”的组合，是一个基于Java的持久层框架。 iBatis提供的持久层框架包括SQL Maps和Data Access Objects（DAO）。

2、MyBatis特性

1） MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架
2） MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集
3） MyBatis可以使用简单的XML或注解用于配置和原始映射，将接口和Java的POJO（Plain Old Java
Objects，普通的Java对象）映射成数据库中的记录
4） MyBatis 是一个半自动的ORM（Object Relation Mapping）框架

3、MyBatis下载

MyBatis下载地址：https://github.com/mybatis/mybatis-3

4、和其它持久化层技术对比

JDBC
SQL 夹杂在Java代码中耦合度高，导致硬编码内伤
维护不易且实际开发需求中 SQL 有变化，频繁修改的情况多见
代码冗长，开发效率低
Hibernate 和 JPA
操作简便，开发效率高
程序中的长难复杂 SQL 需要绕过框架
内部自动生产的 SQL，不容易做特殊优化
基于全映射的全自动框架，大量字段的 POJO 进行部分映射时比较困难。
反射操作太多，导致数据库性能下降
MyBatis
轻量级，性能出色
SQL 和 Java 编码分开，功能边界清晰。Java代码专注业务、SQL语句专注数据
开发效率稍逊于HIbernate，但是完全能够接受

二、搭建MyBatis

1、开发环境

IDE：idea 2020.3
构建工具：maven 3.6.1
mysql版本：MySQL 5.7
MyBatis版本：MyBatis 3.5.7

2、创建maven工程

a>打包方式：jar
b>引入依赖

       <!-- Mybatis核心 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.7</version>
        </dependency>
        <!-- junit测试 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <!-- MySQL驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

3、创建MyBatis的核心配置文件

习惯上命名为mybatis-config.xml，这个文件名仅仅只是建议，并非强制要求。将来整合Spring之后，这个配置文件可以省略，所以大家操作时可以直接复制、粘贴。
核心配置文件主要用于配置连接数据库的环境以及MyBatis的全局配置信息核心配置文件存放的位置是src/main/resources目录下

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<!--设置连接数据库的环境-->
	<environments default="development">
	<environment id="development">
	<transactionManager type="JDBC"/>
	<dataSource type="POOLED">
	<property name="driver" value="com.mysql.jdbc.Driver"/>
	<property name="url"
	value="jdbc:mysql://localhost:3306/MyBatis"/>
	<property name="username" value="root"/>
	<property name="password" value="123456"/>
	</dataSource>
	</environment>
	</environments>
	<!--引入映射文件-->
	<mappers>
	<mapper resource="mappers/UserMapper.xml"/>
	</mappers>
</configuration>

4、创建mapper接口

public interface UserMapper 
/**
* 添加用户信息
*/
int insertUser();

5、创建MyBatis的映射文件

相关概念：ORM（Object Relationship Mapping）对象关系映射。
对象：Java的实体类对象
关系：关系型数据库
映射：二者之间的对应关系

1、映射文件的命名规则：
表所对应的实体类的类名+Mapper.xml
例如：表t_user，映射的实体类为User，所对应的映射文件为UserMapper.xml
因此一个映射文件对应一个实体类，对应一张表的操作
MyBatis映射文件用于编写SQL，访问以及操作表中的数据
MyBatis映射文件存放的位置是src/main/resources/mappers目录下
2、MyBatis中可以面向接口操作数据，要保证两个一致：
a>mapper接口的全类名和映射文件的命名空间（namespace）保持一致
b>mapper接口中方法的方法名和映射文件中编写SQL的标签的id属性保持一致

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xusheng.mybatis.mapper.UserMapper">

    <!--int insertUser();-->
    <insert id="insertUser">
        insert into t_user values(null,'admin','123456',23,'男','12345@qq.com')
    </insert>

</mapper>

6、通过junit测试功能

package com.xusheng.mybatis.test;

import com.xusheng.mybatis.mapper.UserMapper;
import com.xusheng.mybatis.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.junit.Test;

import java.io.IOException;
import java.io.InputStream;
import java.util.List;
public class MyBatisTest 
    /**
     * SqlSession默认不自动提交事务，若需要自动提交事务
     * 可以使用SqlSessionFactory.openSession(true);
     */
    @Test
    public void testMyBatis() throws IOException 
        //加载核心配置文件
        InputStream is = Resources.getResourceAsStream("mybatis-config.xml");
        //获取SqlSessionFactoryBuilder
        SqlSessionFactoryBuilder sqlSessionFactoryBuilder = new SqlSessionFactoryBuilder();
        //获取sqlSessionFactory
        SqlSessionFactory sqlSessionFactory = sqlSessionFactoryBuilder.build(is);
        //获取SqlSession
        //创建SqlSession对象，此时通过SqlSession对象所操作的sql都必须手动提交或回滚事务
        //SqlSession sqlSession = sqlSessionFactory.openSession();
        //创建SqlSession对象，此时通过SqlSession对象所操作的sql都会自动提交
        SqlSession sqlSession = sqlSessionFactory.openSession(true);
        //获取mapper接口对象
        //调用UserMapper接口中的方法，就可以根据UserMapper的全类名匹配元素文件，通过调用的方法名匹配映射文件中的SQL标签，并执行标签中的SQL语句
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        //测试功能
        int result = mapper.insertUser();
        //提交事务
        //sqlSession.commit();
        System.out.println("result:"+result);

SqlSession：代表Java程序和数据库之间的会话。（HttpSession是Java程序和浏览器之间的会话）
SqlSessionFactory：是“生产”SqlSession的“工厂”。
工厂模式：如果创建某一个对象，使用的过程基本固定，那么我们就可以把创建这个对象的相关代码封装到一个“工厂类”中，以后都使用这个工厂类来“生产”我们需要的对象。

7、加入log4j日志功能

a>加入依赖

 <!-- log4j日志 -->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>

b>加入log4j的配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE log4j:configuration SYSTEM "log4j.dtd">

<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/">

    <appender name="STDOUT" class="org.apache.log4j.ConsoleAppender">
        <param name="Encoding" value="UTF-8" />
        <layout class="org.apache.log4j.PatternLayout">
            <param name="ConversionPattern" value="%-5p %dMM-dd HH:mm:ss,SSS %m  (%F:%L) \\n" />
        </layout>
    </appender>
    <logger name="java.sql">
        <level value="debug" />
    </logger>
    <logger name="org.apache.ibatis">
        <level value="info" />
    </logger>
    <root>
        <level value="debug" />
        <appender-ref ref="STDOUT" />
    </root>
</log4j:configuration>

三、核心配置文件详解

核心配置文件中的标签必须按照固定的顺序：
properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrapperFactory?,reflectorFactory?,plugins?,environments?,databaseIdProvider?,mappers?

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--
        MyBatis核心配置文件中，标签的顺序：
        properties?,settings?,typeAliases?,typeHandlers?,
        objectFactory?,objectWrapperFactory?,reflectorFactory?,
        plugins?,environments?,databaseIdProvider?,mappers?
    -->
    <!--引入properties文件-->
    <properties resource="jdbc.properties" />
    <settings>
        <!--将表中字段的下划线自动转换为驼峰-->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
        <!--开启延迟加载-->
        <setting name="lazyLoadingEnabled" value="true"/>
    </settings>
    <!--设置类型别名-->
    <typeAliases>
        <!--
           typeAlias：设置某个类型的别名
           属性：useUnicode=true&amp;useSSL=false
               type：设置需要设置别名的类型
               alias：设置某个类型的别名，若不设置该属性，那么该类型拥有默认的别名，即类名且不区分大小写
       -->
        <!--<typeAlias type="com.atguigu.mybatis.pojo.User"></typeAlias>-->
        <!--以包为单位，将包下所有的类型设置默认的类型别名，即类名且不区分大小写-->
        <package name="com.xusheng.mybatis.pojo"/>
    </typeAliases>


    <!--设置连接数据库的环境-->
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <!--
                dataSource：设置数据源
                属性：
                type：设置数据源的类型，type="POOLED|UNPOOLED|JNDI"
                type="POOLED"：使用数据库连接池，即会将创建的连接进行缓存，下次使用可以从
                缓存中直接获取，不需要重新创建
                type="UNPOOLED"：不使用数据库连接池，即每次使用连接都需要重新创建
                type="JNDI"：调用上下文中的数据源
-->
            <dataSource type="POOLED">
                <!--设置连接数据库的驱动-->
                <property name="driver" value="$jdbc.driver"/>
                <!--设置连接数据库的连接地址-->
                <property name="url" value="$jdbc.url"/>
                <!--设置连接数据库的用户名-->
                <property name="username" value="$jdbc.username"/>
                <!--设置连接数据库的密码-->
                <property name="password" value="$jdbc.password"/>
            </dataSource>
        </environment>
    </environments>
    <!--引入映射文件-->
    <mappers>
       <!-- <mapper resource="mapper/UserMapper.xml"/>-->
        <!--
            以包为单位引入映射文件
            要求：
            1、mapper接口所在的包要和映射文件所在的包一致
            2、mapper接口要和映射文件的名字一致
        -->
        <package name="com.xusheng.mybatis.mapper"/>
    </mappers>
</configuration>

四、MyBatis的增删改查

1、添加

<!--int insertUser();-->
    <insert id="insertUser">
        insert into t_user values(null,'admin','123456',23,'男','12345@qq.com')
    </insert>

2、删除

 <!--void deleteUser();-->
    <delete id="deleteUser">
        delete from t_user where id = 5
    </delete>

3、修改

<!--void updateUser();-->
    <update id="updateUser">
        update t_user set username = '张三' where id = 4
    </update>

4、查询一个实体类对象

 <!--User getUserById();-->
    <!--
        查询功能的标签必须设置resultType或resultMap
        resultType：设置默认的映射关系
        resultMap：设置自定义的映射关系
    -->
    <select id="getUserById" resultType="com.xusheng.mybatis.pojo.User">
        select * from t_user where id = 3
    </select>

5、查询集合

  <!--List<User> getAllUser();-->
    <select id="getAllUser"  resultType="com.xusheng.mybatis.pojo.User">
        select * from t_user
    </select>

注意：
1、查询的标签select必须设置属性resultType或resultMap，用于设置实体类和数据库表的映射关系
resultType：自动映射，用于属性名和表中字段名一致的情况
resultMap：自定义映射，用于一对多或多对一或字段名和属性名不一致的情况
2、当查询的数据为多条时，不能使用实体类作为返回值，只能使用集合，否则会抛出异常
TooManyResultsException；但是若查询的数据只有一条，可以使用实体类或集合作为返回值

五、MyBatis获取参数值的两种方式（重点）

MyBatis获取参数值的两种方式：$和#
$的本质就是字符串拼接，#的本质就是占位符赋值
$使用字符串拼接的方式拼接sql，若为字符串类型或日期类型的字段进行赋值时，需要手动加单引号；但是#使用占位符赋值的方式拼接sql，此时为字符串类型或日期类型的字段进行赋值时，可以自动添加单引号

1、单个字面量类型的参数

若mapper接口中的方法参数为单个的字面量类型
此时可以使用 $KaTeX parse error: Expected 'EOF', got '#' at position 4: 和#̲以任意的名称获取参数的值，\dots$ 需要手动加单引号

2、多个字面量类型的参数

若mapper接口中的方法参数为多个时
此时MyBatis会自动将这些参数放在一个map集合中，以arg0,arg1…为键，以参数为值；以
param1,param2…为键，以参数为值；因此只需要通过 $KaTeX parse error: Expected 'EOF', got '#' at position 4: 和#̲访问map集合的键就可以获\dots$ 需要手动加单引号

3、map集合类型的参数

若mapper接口中的方法需要的参数为多个时，此时可以手动创建map集合，将这些数据放在map中
只需要通过 $KaTeX parse error: Expected 'EOF', got '#' at position 4: 和#̲访问map集合的键就可以获\dots$ 需要手动加单引号

4、实体类类型的参数

若mapper接口中的方法参数为实体类对象时
此时可以使用 $KaTeX parse error: Expected 'EOF', got '#' at position 4: 和#̲，通过访问实体类对象中的属\dots$ 需要手动加单引号

5、使用@Param标识参数

可以通过@Param注解标识mapper接口中的方法参数
此时，会将这些参数放在map集合中，以@Param注解的value属性值为键，以参数为值；以
param1,param2…为键，以参数为值；只需要通过 $KaTeX parse error: Expected 'EOF', got '#' at position 4: 和#̲访问map集合的键就可以获\dots$ 需要手动加单引号

六、MyBatis的各种查询功能

1、查询一个实体类对象

/**
* 根据用户id查询用户信息
* @param id
* @return
*/
User getUserById(@Param("id") int id);

<!--User getUserById(@Param("id") int id);-->
<select id="getUserById" resultType="User">
	select * from t_user where id = #id
</select>

2、查询一个list集合

/**
* 查询所有用户信息
* @return
*/
List<User> getUserList();

<!--List<User> getUserList();-->
<select id="getUserList" resultType="User">
	select * from t_user
</select>

3、查询单个数据

/**
* 查询用户的总记录数
* @return
* 在MyBatis中，对于Java中常用的类型都设置了类型别名
* 例如：java.lang.Integer-->int|integer
* 例如：int-->_int|_integer
* 例如：Map-->map,List-->list
*/
int getCount();

<!--int getCount();-->
<select id="getCount" resultType="_integer">
	select count(id) from t_user
</select>

4、查询一条数据为map集合

/**
* 根据用户id查询用户信息为map集合
* @param id
* @return
*/
Map<String, Object> getUserToMap(@Param("id") int id);

<!--Map<String, Object> getUserToMap(@Param("id") int id);-->
<select id=零基础学前端.jQuery入门与实践教程


        
                
                    
                     
学习目标: 
掌握编程jQuery的基本使用
掌握jQuery插件的使用
能够开发jQuery插件
选择器、属性操作、样式操作、节点操作、动画、事件、插件
 typora-copy-images-to: media 
 
复习： 
原生js的优缺点： 
优点： 
 所有前端框架的基础，类似于Java、C语言的大基础； 
缺点： 
 1.不能添加多个入口函数，如果有，则后面会把前面的给覆盖掉； 
 2.原生js的API名字太长，不好记； 
 3.原生js有些属性后者方法，有浏览器兼容问题； 
 4.原生js容错率太低，即前面的代码一旦出错，后续所有代码不再执行； 
jQuery 
一.jQuery简介 
1.JavaScript库的概念 
JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。 
把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js） 
常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个。 
jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。 
2.jQuery的优点好处 
jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。
 
3.jQuery的版本 
jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
发现：京东、新浪大厂，都有jquery的使用，但是一些大厂还在用，并且发现大厂用的时候，版本比较低，考虑很多客户广泛性。
注意：开发版本和生产版本
https://jquery.com/
https://code.jquery.com/
国内多数网站还在使用1.x的版本
 
4.体验jQuery 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwyqHBD9-1628145022876)(C:\\Users\\teayear\\Desktop\\深圳\\jquery(1)]\\jquery\\media\\image-20210802093229514.png) 
案例：让div显示与设置内容 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4k2zQBm-1628145022879)(C:\\Users\\teayear\\Desktop\\深圳\\jquery(1)]\\jquery\\media\\image-20210802095031470.png) 
使用JavaScript开发过程中，有许多不便之处 
-查找元素的方法太少，麻烦。
-遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
-有兼容性问题。
-想要实现简单的动画效果，也很麻烦
-代码冗余。
 
$(document).ready(function () {
    $('#btn1').click(function () {
      	// 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
        $('div').show(200);
    });

    $('#btn2').click(function () {
        $('div').text('我是内容');
    });
});
 
优点总结： 
-查找元素的方法多种多样，非常灵活
-拥有隐式迭代特性，因此不再需要手写for循环了。
-完全没有兼容性问题。
-实现动画非常简单，而且功能更加的强大。
-代码简单、粗暴。
 
5.jQuery中顶级对象 
jQuery中的顶级对象是jQuery,$是jQuery的简写； 
获取jQuery对象
入口函数
高级功能
 
注意：jQuery中的$和JQuery关键字本身为同一对象； 
6.jQuery中页面加载事件 
使用jQuery的三个步骤： 
引入jQuery文件;后续所有的库文件都是这样滴Mui/Layui/vue.js。。。
入口函数
功能实现；重点--->又有三个步骤;
 
关于jQuery的入口函数： 
// 第一种写法
$(document).ready(function() {
	
});
// 第二种写法
$(function() {
	
});
 
jQuery入口函数与window.onload的对比 
a.window.onload只能有一个，jQuery的入口函数可以是多个；
b.执行时机不同,jQuery的效率高于系统默认的入口函数;
   1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
   2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
 
二.jQuery对象和DOM对象 
jQuery对象和DOM对象的区别 
1.DOM对象 
用原生JavaScript获取的DOM对象
	通过document.getElementById()  反馈的是元素(DOM对象)
通过document.getElementsByTagName()获取到的是什么？
	伪数组(集合)，集合中的每一个对象是DOM对象
 
2.jQuery对象 
jQuery对象用$()的方式获取的对象
jQuery对象又可以叫做包装集(包装的DOM对象的集合)
 
3.区别 
jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员 
// DOM对象
var box = document.getElementById('box');
// 错误
box.text('hello');
// 正确 Dom对象.属性=值;
box.innerText = 'hello';

// jQuery对象，jQuery对象加前缀$，用以区分DOM对象
var $box = $('#box');
// 错误 dom对象;
$box.innerText = 'hello';
// 正确
$box.text('hello');
 
4.相互转换 
jQuery对象转换成DOM对象：   
	jQuery对象.get(索引值); 
	jQuery对象[索引值] 
    	jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：   
	$(DOM对象) 只有这一种方法;
 
5.案例 
开关灯 [01-开关灯.html] 
// 仅仅演示对象之间的转换，代码不推荐这么写
jQuery(document).ready(function () {
  // 获取元素；
  var inpArr = document.getElementsByTagName('input');
  // 获取第一个按钮，然后绑定事件；
  $(inpArr[0]).click(function () {
    // 设置body的背景色
    $('body')[0].style.background = '#fff';
  });
  // 获取第二个按钮，然后绑定事件；
  $(inpArr[1]).click(function () {
    // 设置body的背景色
    $('body').get(0).style.background = '#000';
  });
});
 
三.选择器 
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。 
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。（查看jQuery文档） 
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 
1.jQuery基本选择器 
名称 用法 描述
ID选择器 $(’#id’); 获取指定ID的元素
类选择器 $(’.class’); 获取同一类class的元素
标签选择器 $(‘div’); 获取同一类标签的所有元素
并集选择器 $(‘div,p,li’); 使用逗号分隔，只要符合条件之一就可。
交集选择器 $(‘div.redClass’); 获取class为redClass的div元素
总结：跟css的选择器用法一模一样。 
2.jQuery层级选择器 
名称 用法 描述
子代选择器 $(‘ul > li’); 使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 $(‘ul li’); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
跟CSS的选择器一模一样,可以测试个数输出。 
3.jQuery过滤选择器 
这类选择器都带冒号: 
名称 用法 描述
:eq（index） $(‘li:eq(2)’).css(‘color’, ‘red’); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd $(‘li:odd’).css(‘color’, ‘red’); 获取到的li元素中，选择索引号为奇数的元素
:even $(‘li:even’).css(‘color’, ‘red’); 获取到的li元素中，选择索引号为偶数的元素
4.jQuery筛选选择器(方法) 
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。 
名称 用法 描述
children(selector) $(‘ul’).children(‘li’) 相当于$(‘ul-li’),子类选择器
find(selector) $(‘ul’).find(‘li’); 相当于$(‘ul li’),后代选择器
siblings(selector) $(’#first’).siblings(‘li’); 查找兄弟节点，不包括自己本身。
parent() $(’#first’).parent(); 查找父亲
eq(index) $(‘li’).eq(2); 相当于$(‘li:eq(2)’),index从0开始
next() $(‘li’).next() 找下一个兄弟
first() $(‘li’).first() 第一个
last() $(‘li’).last() 最后一个
prev() $(‘li’).prev() 找上一次兄弟
5.案例 
鼠标放上突出展示 [02-突出展示.html]
鼠标进入高亮显示 [03-鼠标进入高亮显示.html]
下拉菜单 [04-下拉菜单.html] √
手风琴 [05-手风琴.html]
淘宝服饰精品 [06-淘宝服饰精品.html] 
四.jQuery操作样式 
1.CSS操作 
 功能：设置或者修改样式，操作的是style属性。
 
 操作单个样式
  
// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 将背景色修改为灰色
 
设置多个样式 
// 参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$('#one').css({
    'background':'gray',
    'width':'400px',
    'height':'200px'
});
 
获取样式 
// name:需要获取的样式名称
$obj.css(name);
// 案例
$('div').css('background-color');
 
注意：获取样式操作只会返回第一个元素对应的样式值。 
隐式迭代： 
设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。 
2.class操作 
添加样式类 
// name：需要添加的样式类名，注意参数不要带点.
$obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');
 
移除样式类 
// name:需要移除的样式类名
$obj.removeClass('name');
// 例子，移除div中one的样式类名
$('div').removeClass('one');
 
判断是否有某个样式类 
// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name)
// 例子，判断第一个div是否有one的样式类
$('div').hasClass('one');
 
切换样式类 
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');
 
3.案例 
tab栏切换案例 
五.jQuery动画 
jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。
演示动画效果 
1.三组基本动画 
显示(show)与隐藏(hide)是一组动画：
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle) 
$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
	 // 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
	 // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     // 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理
 
2.自定义动画 
CSS3学过；语法格式：animation,transform rotate等结合。 
animate: 自定义动画 
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性left top width height，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动）  可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
 
3.动画队列与停止动画 
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。 
// stop方法：停止动画效果
stop(stopAll, goToEnd);
// 第一个参数：是否清除队列
// 第二个参数：是否跳转到最终效果
 
4.案例 
开机动画案例 [09-开关机动画.html]
下拉菜单-动画 [10-下拉菜单-动画.html] 
六.jQuery节点操作 
1.创建节点 
// $(htmlStr)
// htmlStr：html格式的字符串
$('<span-这是一个span元素</span-');
 
2.添加节点 
append  appendTo	在被选元素的结尾插入内容
prepend prependTo	在被选元素的开头插入内容
before				在被选元素之后插入内容
after				在被选元素之前插入内容
 
3.清空节点与删除节点 
empty：清空指定节点的所有元素，自身保留(清理门户) 
$('div').empty(); // 清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
$('div').html('');// 使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
 
remove：相比于empty，自身也删除（自杀） 
$('div').remove();
 
4.克隆节点 
作用：复制匹配的元素 
// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();
 
5.案例 
城市选择 [11-城市选择案例.html]
删除表格 [12 表格删除案例.html]
根据数据生成表格 [13-表格生成案例.html]
添加和删除表格数据 [14-动态数据添加和删除.html] 
七.jQuery操作属性 
1.attr操作 
设置单个属性 
// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
$obj.attr(name, value);
// 用法举例
$('img').attr('title','哎哟，不错哦');
$('img').attr('alt','哎哟，不错哦');
 
设置多个属性 
// 参数是一个对象，包含了需要设置的属性名和属性值
$obj.attr(obj)
// 用法举例
$('img').attr({
    title:'哎哟，不错哦',
    alt:'哎哟，不错哦',
    style:'opacity:.5'
});
 
获取属性 
// 传需要获取的属性名称，返回对应的属性值
$obj.attr(name)
// 用法举例
var oTitle = $('img').attr('title');
alert(oTitle);
 
移除属性 
// 参数：需要移除的属性名，
$obj.removeAttr(name);
// 用法举例
$('img').removeAttr('title');
 
2.prop操作 
在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。 
// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false
 
本质原因：****property**** : 原生JS对对象的属性称之为 property 。 
*attribute* ：HTML元素标签上的属性称之为attribute。 
使用jQuery操作的元素属性时：布尔值属性：使用prop() ，非布尔值属性：使用attr() 。 
总结： 
*attribute 与 **property** **同步关系*** 
非布尔值属性：实时同步。 
布尔值属性： 
property 永远不会同步至attribute 
3.val()/text/()html() 
$obj.val()		获取或者设置表单元素的value属性的值
$obj.html() 	对应innerHTML
$obj.text()		对应innerText/textContent，处理了浏览器的兼容性
 
4.案例 
表格全选反选 [15-表格全选反选.html]
打字效果 [16-打字效果.html] 
八.jQuery尺寸和位置操作 
1.width方法与height方法 
设置或者获取高度，不包括内边距、边框和外边距 
// 带参数表示设置高度
$('img').height(200);
// 不带参数获取高度
$('img').height();
 
获取网页的可视区宽高 
// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();
 
2.innerWidth/innerHeight/outerWidth/outerHeight 
innerWidth()/innerHeight()	方法返回元素的宽度/高度（包括内边距）。
outerWidth()/outerHeight()  方法返回元素的宽度/高度（包括内边距和边框）。
outerWidth(true)/outerHeight(true)  方法返回元素的宽度/高度（包括内边距、边框和外边距）。
 
3.scrollTop与scrollLeft 
设置或者获取垂直滚动条的位置 
// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();
 
4.offset方法与position方法 
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParent)的位置。 
// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();
 
案例：固定导航栏 [17-固定导航栏.html]
 案例：电梯导航 [18-电梯导航.html] 
九.jQuery事件机制 
 
 JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。 
 
1.jQuery事件发展历程(了解) 
简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 
简单事件注册 
click(handler)			单击事件
mouseenter(handler)		鼠标进入事件
mouseleave(handler)		鼠标离开事件
 
缺点：不能同时注册多个事件 
bind方式注册事件 
// 第一个参数：事件类型
// 第二个参数：事件处理程序
$('p').bind('click mouseenter', function(){
    // 事件响应方法
});
 
缺点：不支持动态事件绑定 
delegate注册委托事件 
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$('.parentBox').delegate('p', 'click', function(){
    // 为 .parentBox下面的所有的p标签绑定事件
});
 
缺点：只能注册委托事件，因此注册时间需要记得方法太多了 
on注册事件 
2.on注册事件(重点) 
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。 
on注册简单事件 
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( 'click', function() {});
 
on注册事件委托 
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on('click','span', function() {});
 
事件委托原理 
// 事件委托的原理
var ul = document.querySelector('#ul');
ul.onclick = function (e) {
  // console.log(e.target.tagName);
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target);
  }
}
 
on注册事件的语法： 
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
 
通过源码查看 bind click delegate on 注册事件的区别 
3.事件解绑 
unbind方式（不用） 
$(selector).unbind(); // 解绑所有的事件
$(selector).unbind('click'); // 解绑指定的事件
 
undelegate方式（不用） 
$( selector ).undelegate(); // 解绑所有的delegate事件
$( selector).undelegate( 'click' ); // 解绑所有的click事件
 
off方式（推荐） 
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');
 
4.触发事件 
$(selector).click(); // 触发 click事件
$(selector).triggerSSM框架专题-MyBatis框架从零入门老杜版笔记（上）
 Mybatis-plus:入门
 myBatis框架之入门
 MyBatis从入门到精通
 手把手从零开始学习入门mybatis
 Mybatis学习系列 –– 入门简介

名称	用法	描述
ID选择器	$(’#id’);	获取指定ID的元素
类选择器	$(’.class’);	获取同一类class的元素
标签选择器	$(‘div’);	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(‘div.redClass’);	获取class为redClass的div元素

名称	用法	描述
子代选择器	$(‘ul > li’);	使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(‘ul li’);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

名称	用法	描述
:eq（index）	$(‘li:eq(2)’).css(‘color’, ‘red’);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(‘li:odd’).css(‘color’, ‘red’);	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’).css(‘color’, ‘red’);	获取到的li元素中，选择索引号为偶数的元素

名称	用法	描述
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul-li’),子类选择器
find(selector)	$(‘ul’).find(‘li’);	相当于$(‘ul li’),后代选择器
siblings(selector)	$(’#first’).siblings(‘li’);	查找兄弟节点，不包括自己本身。
parent()	$(’#first’).parent();	查找父亲
eq(index)	$(‘li’).eq(2);	相当于$(‘li:eq(2)’),index从0开始
next()	$(‘li’).next()	找下一个兄弟
first()	$(‘li’).first()	第一个
last()	$(‘li’).last()	最后一个
prev()	$(‘li’).prev()	找上一次兄弟