jquery菜鸟教程-jquery教程chm 收藏 0

万字SpringBoot学习笔记｜菜鸟版

Spring Boot是Pivotal团队在Spring的基础上提供的一套全新的开源框架，其目的是为了简化Spring应用的搭建和开发过程。Spring Boot去除了大量的XML配置文件，简化了复杂的依赖管理。

Spring Boot是简化Spring应用开发的一个框架、整个Spring技术栈的一个大整合（Spring全家桶时代）、J2EE开发的一站式解决方案（Spring Cloud是分布式整体解决方案）。优点：– 快速创建独立运行的Spring项目以及与主流框架集成– 使用嵌入式的Servlet容器，应用无需打成WAR包– starters自动依赖与版本控制– 大量的自动配置，简化开发，也可修改默认值– 无需配置XML，无代码生成，开箱即用– 准生产环境的运行时应用监控– 与云计算的天然集成

– 单体应用：ALL IN ONE（所有内容都在一个应用里面）– 微服务：每一个功能元素最终都是一个可独立替换和独立升级的软件单元微服务是一种架构风格(服务微化)，一个应用应该是一组小型服务，可以通过HTTP的方式进行互通

工程创建及案例可以参考文章进行操作：在IDEA中创建SpringBoot项目

父项目是Spring Boot的版本仲裁中心（他来真正管理Spring Boot应用里面的所有依赖版本），以后我们导入依赖默认是不需要写版本（没有在dependencies里面管理的依赖自然需要声明版本号）

启动器 spring-boot-starter（spring-boot场景启动器），spring-boot-starter-web 帮我们导入了web模块正常运行所依赖的组件。

Spring Boot将所有的功能场景都抽取出来，做成一个个的starters(启动器)，只需要在项目里面引入这些starter相关场景的所有依赖都会导入进来。要用什么功能就导入什么场景的启动器。

@SpringBootApplication: Spring Boot应用标注在某个类上说明这个类是SpringBoot的主配置类，SpringBoot 就应该运行这个类的main方法来启动SpringBoot应用。

SpringBoot使用一个全局的配置文件，配置文件名固定：application.properties 或者 application.yml。配置文件放在 src/main/resources目录 或者 类路径/config 下。作用是修改SpringBoot自动配置的默认值。

YAML(YAML Ain\’t Markup Language)，.yml为结尾，以数据为中心，比json、xml等更适合做配置文件。

【语法】key: value(注意冒号后面有个空格)以空格的缩进来控制层级关系，只要是左对齐的一列数据，都是同一个层级

【值写法】

（1）字面量：普通的值(数字，字符串，布尔)

• k: v，字面量直接写
• 字符串默认不用加上单引号或者双引号
• \”\”（双引号），name: \”zhangsan \\n lisi\” 会输出 zhangsan 换行 lisi
• \’\’（单引号），name: \’zhangsan \\n lisi\’ 会输出 zhangsan \\n lisi

（2）对象、Map

• k: v，在下一行来写对象的属性和值

（3）数组(List、Set)

• 用- 值表示数组中的一个元素

1）导入配置文件处理器

2）javaBean对象@ConfigurationProperties(prefix = \”person\”) 会将配置文件和类进行绑定：

3）配置文件 application.yml

或者配置文件application.properties

乱码问题还需要配置：

4）单元测试，先将内容注入（@Autowired）然后使用

@ConfigurationProperties 与 @Value 的区别：

• @ConfigurationProperties 是批量注入配置文件中的属性，@Value 是一个个指定
• @ConfigurationProperties 支持松散绑定(松散语法) 、不支持SpEL(表达式如#{2*4})、支持JSR303数据校验 、支持复杂类型封装(如map)
• @Value 不支持松散绑定(松散语法) 、支持SpEL、不支持JSR303数据校验 、不支持复杂类型封装

松散绑定：– person.firstName：使用标准方式– person.first-name：大写用-– person.first_name：大写用_– PERSON_FIRST_NAME：推荐系统属性使用这种写法JSR303数据校验：

使用规则：

• 如果说，我们只是在某个业务逻辑中需要获取一下配置文件中的某项值，使用@Value

• 如果说，我们专门编写了一个javaBean来和配置文件进行映射，我们就直接使用@ConfigurationProperties

@PropertySource：加载指定的配置文件

@ImportResource：导入Spring的配置文件，让配置文件里面的内容生效–标注在一个配置类上如下我们自己编写的配置文件：

我们可以标注在主配置类上：

测试：

SpringBoot推荐给容器中添加组件的方式，推荐使用全注解的方式 @Configuration

随机数

占位符获取之前配置的值，如果没有可以是用:指定默认值

Profile是Spring对不同环境提供不同配置功能的支持，可以通过激活、指定参数等方式快速切换环境。 多profile文件形式格式如：application-{profile}.properties/yml，如 application-dev.properties、application-prod.properties

默认使用application.properties的配置

激活方式：

• 命令行 –spring.profiles.active=dev java -jar spring-boot-02-config-0.0.1-SNAPSHOT.jar –spring.profiles.active=dev;
• 配置文件 spring.profiles.active=dev
• jvm参数 –Dspring.profiles.active=dev

yml支持多文档块方式：

spring boot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件

1. file:./config/
2. file:./
3. classpath:/config/
4. classpath:/

以上是按照优先级从高到低的顺序，所有位置的文件都会被加载，高优先级配置内容会覆盖低优先级配置内容。 可以通过配置spring.config.location来改变默认配置。项目打包好以后，可以使用命令行参数的形式，启动项目的时候来指定配置文件的新位置；指定配置文件和默认加载的这些配置文件共同起作用形成互补配置：java -jar spring-boot-02-config-02-0.0.1-SNAPSHOT.jar –spring.config.location=G:/application.properties

Spring Boot支持多种外部配置方式，优先级从高到低。高优先级的配置覆盖低优先级的配置，所有的配置会形成互补配置：

1. 命令行参数 所有的配置都可以在命令行上进行指定：java -jar spring-boot-02-config-02-0.0.1-SNAPSHOT.jar –server.port=8087 –server.context-path=/abc 多个配置用空格分开; –配置项=值
2. 来自java:comp/env的JNDI属性
3. Java系统属性(System.getProperties())
4. 操作系统环境变量
5. RandomValuePropertySource配置的random.*属性值

由jar包外向jar包内进行寻找。优先加载带profile：

1. jar包外部的application-{profile}.properties或application.yml(带spring.profile)配置文件
2. jar包内部的application-{profile}.properties或application.yml(带spring.profile)配置文件

再来加载不带profile：

1. jar包外部的application.properties或application.yml(不带spring.profile)配置文件
2. jar包内部的application.properties或application.yml(不带spring.profile)配置文件
3. @Configuration注解类上的@PropertySource
4. 通过SpringApplication.setDefaultProperties指定的默认属性

自动配置原理：1）Spring Boot启动时加载主配置类（带有@SpringBootApplication），其里面开启了自动配置功能@EnableAutoConfiguration。

2）@EnableAutoConfiguration利用@Import(AutoConfigurationImportSelector.class)给容器导入一些组件。导入的组件是通过List configurations = getCandidateConfigurations(annotationMetadata, attributes);获取到的。里面通过SpringFactoriesLoader.loadFactoryNames 扫描所有jar包类路径下\”META-INF/spring.factories\”，把扫描到的这些文件的内容包装成properties对象，从properties中获取到EnableAutoConfiguration.class类(类名)对应的值，然后把他们添加在容器中。其实就是将类路径下 META-INF/spring.factories 里面配置的所有EnableAutoConfiguration的值加入到了容器中。每一个这样的 xxxAutoConfiguration 类都是容器中的一个组件，都加入到容器中；用他们来做自动配置。

3）每一个自动配置类进行自动配置功能 4）以HttpEncodingAutoConfiguration配置类进行分析：

根据当前不同的条件判断，决定这个配置类是否生效一但这个配置类生效，这个配置类就会给容器中添加各种组件，这些组件的属性是从对应的properties类中获取的，这些类里面的每一个属性又是和配置文件绑定的 5)、所有在配置文件中能配置的属性都是在xxxxProperties类中封装着，配置文件能配置什么就可以参照某个功能对应的这个属性类

使用精髓: 1)、SpringBoot启动会加载大量的自动配置类 ；2)、我们看我们需要的功能有没有SpringBoot默认写好的自动配置类；3)、我们再来看这个自动配置类中到底配置了哪些组件(只要我们要用的组件有，我们就不需要再来配置了) 4)、给容器中自动配置类添加组件的时候，会从properties类中获取某些属性。我们就可以在配置文件中指定这些属性的值; xxxxAutoConfigurartion：自动配置类; 给容器中添加组件xxxxProperties：封装配置文件中相关属性

作用：必须是@Conditional指定的条件成立，才给容器中添加组件，配置配里面的所有内容才生效也就是说，自动配置类必须在一定的条件下才能生效

想要查看生效的自动配置类，可以在配置文件中配置debug=true，positive为启动的，negative没启用的

市场上存在非常多的日志框架：JUL(java.util.logging)，JCL(Apache Commons Logging)，Log4j，Log4j2，Logback、SLF4j、jboss-logging等。 Spring Boot在框架内容部使用JCL，spring-boot-starter-logging采用了 slf4j+logback的形式，Spring Boot也能自动适配(jul、log4j2、logback) 并简化配置 SpringBoot底层是Spring框架，Spring框架默认是用JCL。SpringBoot选用SLF4j（日志抽象层）和logback（日志实现）

开发时日志记录方法的调用，不应该来直接调用日志的实现类，而是调用日志抽象层里面的方法：

每一个日志的实现框架都有自己的配置文件。使用slf4j以后，配置文件还是做成日志实现框架自己本身的配置文件。如何让系统中所有的日志都统一到slf4j：

1. 将系统中其他日志框架先排除出去
2. 用中间包来替换原有的日志框架
3. 我们导入slf4j其他的实现

添加依赖：

SpringBoot能自动适配所有的日志，而且底层使用slf4j+logback的方式记录日志，引入其他框架的时候，只需要把这个框架依赖的日志框架排除掉即可

日志级别由低到高：trace<debug<info<warn<errorSpringBoot默认给我们使用的是info级别的（日志就只会在这个级别及以后的高级别生效），没有指定级别的就用SpringBoot默认规定的级别。日志输出格式：

• %d –表示日期时间
• %thread –表示线程名
• %‐5level –级别从左显示5个字符宽度
• %logger{50} –表示logger名字最长50个字符，否则按照句点分割
• %msg –日志消息
• %n –是换行符

修改默认级别：

日志配置：

给类路径下放上每个日志框架自己的配置文件即可，SpringBoot就不使用他默认配置的了

logback.xml：直接就被日志框架识别了; logback-spring.xml：日志框架就不直接加载日志的配置项，由SpringBoot解析日志配置，可以使用SpringBoot的高级Profile功能（激活对应环境下生效）

1）所有 /webjars/** ，都去 classpath:/META-INF/resources/webjars/ 找资源

webjars：是以jar包的方式引入静态资源（网址：www.webjars.org/）

引入后访问：http://localhost:8080/webjars/jquery/3.3.1/src/jquery.js，就可以找到资源：

2） /** 访问当前项目的任何资源，都去「静态资源的文件夹」找映射

• \”classpath:/META‐INF/resources/\”
• \”classpath:/resources/\”
• \”classpath:/static/\”
• \”classpath:/public/\”
• \”/\”：当前项目的根路径

如，localhost:8080/abc，会去静态资源文件夹里面找abc

3）首页映射，静态资源文件夹下的所有index.html页面，被\”/**\”映射 localhost:8080/ ，会找index页面

4）所有的 **/favicon.ico 都是在静态资源文件下找

默认规则：只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染

第一步）添加依赖

第二步）属性配置

第三步）创建thymeleaf模板文件创建success.html，放入classpath:/templates/文件夹下

第四步）编写控制器

第五步）访问页面访问http://localhost:8080/api/success，可以看到html页面内容

1）th:text：改变当前元素里面的文本内容（th:任意html属性：来替换原生属性的值）

2）表达式

Spring Boot 自动配置好了SpringMVC。以下是SpringBoot对SpringMVC的默认配置(WebMvcAutoConfiguration)：

• Inclusion of ContentNegotiatingViewResolver and BeanNameViewResolver beans 自动配置了ViewResolver（视图解析器：根据方法的返回值得到视图对象(View)，视图对象决定如何渲染(转发或重定向)） ContentNegotiatingViewResolver：组合所有的视图解析器的 如果需要定制视图解析器：我们可以自己给容器中添加一个视图解析器，ContentNegotiatingViewResolver会自动的将其组合进来；
• Support for serving static resources, including support for WebJars 静态资源文件夹路径、webjars
• Static index.html support 静态首页访问
• Custom Favicon support favicon.ico
• 自动注册了 Converter , GenericConverter , Formatter beans. Converter：转换器，public String hello(User user):类型转换使用Converter Formatter：格式化器，2017.12.17===Date; 自己添加的格式化器转换器，我们只需要放在容器中即可（使用@Bean）
• Support for HttpMessageConverters HttpMessageConverter：SpringMVC用来转换Http请求和响应的;User—Json; HttpMessageConverters是从容器中确定，获取所有的HttpMessageConverter; 自己给容器中添加HttpMessageConverter，只需要将自己的组件注册容器中(**@Bean 或 @Component**)
• Automatic registration of MessageCodesResolver：定义错误代码生成规则
• Automatic use of a ConfigurableWebBindingInitializer bean 初始化web数据绑定器的，WebDataBinder。他的作用是把请求数据转换为JavaBean 我们可以配置一个ConfigurableWebBindingInitializer来替换默认的；(添加到容器)

扩展方式：编写一个配置类(@Configuration)，是WebMvcConfigurerAdapter类型，不能标注@EnableWebMvc。既保留了所有的自动配置，也能用我们扩展的配置（SpringMVC的自动配置和我们的扩展配置都会起作用）

浏览器访问 http://localhost:8080/other ， 可以看到成功映射到了success页面

@EnableWebMvc（不推荐使用）SpringBoot对SpringMVC的自动配置不需要了，所有都是我们自己配置。所有的SpringMVC的自动配置都失效了。我们需要在配置类中添加@EnableWebMvc即可

接管前通过http://localhost:8080/static.html可以访问静态页面，全面接管后静态页面的规则就失效了，我们就无法直接访问了

模式: 1)、SpringBoot在自动配置很多组件的时候，先看容器中有没有用户自己配置的 (@Bean、@Component)。如果有就用用户配置的，如果没有才自动配置。如果有些组件可以有多个(如ViewResolver)，则将用户配置的和自己默认的组合起来；2)、在SpringBoot中会有非常多的xxxConfigurer帮助我们进行扩展配置3)、在SpringBoot中会有很多的xxxCustomizer帮助我们进行定制配置

方法1：在controller中添加访问路径的匹配规则

方法2：在配置类中注册组件到容器

第一步：编写国际化配置文件，抽取页面需要显示的国际化消息

第二步：SpringBoot自动配置好了管理国际化资源文件的组件我们的配置文件可以直接放在类路径下叫messages.properties，或者在application.properties里配置路径

第三步：使用#{}可以在页面上获取国际化的值

第四步：点击链接切换国际化

自己实现一个LocaleResolver，然后在配置类中注册组件到容器

实现效果：

配置类中添加一个试图映射

错误消息显示：

注册

三种引入公共片段的th属性:

• th:insert:将公共片段整个插入到声明引入的元素中
• th:replace:将声明引入的元素替换为公共片段
• th:include:将被引入的片段的内容包含进这个标签中

请求添加页面

添加页面的表单（见下方修改）员工添加功能

查询员工信息并回显

修改和添加是同一个页面：

修改功能

删除功能方法：

浏览器返回一个默认的错误页面

客户端请求默认返回JSON数据提示错误

一但系统出现4xx或者5xx之类的错误，ErrorPageCustomizer就会生效（定制错误的响应规则），就会来到/error请求，就会被BasicErrorController处理

1）有模板引擎的情况下：error/状态码。将错误页面命名为 错误状态码.html 放在模板引擎文件夹里面的error文件夹下，发生此状态码的错误就会来到对应的页面；我们可以使用 4xx 和 5xx 作为错误页面的文件名来匹配这种类型的所有错误。精确优先（优先寻找精确的状态码.html）页面能获取的信息：timestamp：时间戳、status：状态码、error：错误提示、exception：异常对象、message：异常消息、errors：JSR303数据校验的错误都在这里2）没有模板引擎（模板引擎找不到这个错误页面），静态资源文件夹下找；3）以上都没有错误页面，就是默认来到SpringBoot默认的错误提示页面；

1、方式1：自定义异常处理&返回定制json数据

缺点：没有自适应效果（浏览器和客户端请求返回的都是JSON数据）

2、转发到/error进行自适应响应效果处理

SpringBoot默认使用Tomcat作为嵌入式的Servlet容器

方式1：修改和server有关的配置(ServerProperties【本质也是EmbeddedServletContainerCustomizer】)

方式2：编写一个EmbeddedServletContainerCustomizer：嵌入式的Servlet容器的定制器，来修改Servlet容器的配置

由于SpringBoot默认是以jar包的方式启动嵌入式的Servlet容器来启动SpringBoot的web应用，没有web.xml文件。 注册三大组件（Servlet、Filter、Listener）用以下方式：ServletRegistrationBean

FilterRegistrationBean

ServletListenerRegistrationBean

Tomcat（默认使用）

Jetty（开发长连接应用）

Undertow（不支持JSP）

Docker是一个开源的应用容器引擎，是一个轻量级容器技术。Docker支持将软件编译成一个镜像，然后在镜像中各种软件做好配置，将镜像发布出去，其他使用者可以直接使用这个镜像；运行中的这个镜像称为容器，容器启动是非常快速的。

• docker镜像(Images)：Docker镜像是用于创建Docker容器的模板
• docker容器(Container)：容器是独立运行的一个或一组应用
• docker客户端(Client)：客户端通过命令行或者其他工具使用Docker API(docs.docker.com/reference/a…) 与 Docker 的守护进程通信，即：连接docker主机进行操作
• docker主机(Host)：一个物理或者虚拟的机器用于执行Docker守护进程和容器。即：安装了Docker程序的机器（Docker直接安装在操作系统之上）
• docker仓库(Registry)：Docker仓库用来保存镜像，可以理解为代码控制中的代码仓库。Docker Hub(hub.docker.com) 提供了庞大的镜像集合供使用。

使用Docker的步骤:1）安装Docker2）去Docker仓库找到这个软件对应的镜像3）使用Docker运行这个镜像，这个镜像就会生成一个Docker容器4）对容器的启动停止就是对软件的启动停止

安装教程可参考：www.runoob.com/docker/maco…

流程：软件镜像(QQ安装程序)–>运行镜像–>产生一个容器(正在运行的软件，运行的QQ)

更多命令可查看：docs.docker.com/engine/refe…

示例（tomcat）：

示例（mysql）：

对于数据访问层，无论是SQL还是NOSQL，Spring Boot默认采用整合Spring Data的方式进行统一处理，添加大量自动配置，屏蔽了很多设置。引入各种xxxTemplate、xxxRepository来简化我们对数据访问层的操作。对我们来说只需要进行简单的设置即可。JDBC、MyBatis、JPA

配置：

测试代码：

数据源的相关配置都在DataSourceProperties源代码里面

SpringBoot默认可以支持：org.apache.tomcat.jdbc.pool.DataSource、HikariDataSource、BasicDataSource、自定义数据源类型。

配置文件里增加如下配置：

编写SQL并放在resources文件夹下面

启动springboot工程，刷新数据库，可以看到表成功创建（下次启动还是会创建，所以最好创建完毕后删除sql文件）

编写测试查询代码

引入依赖

修改配置文件

测试代码

配置生效：

引入上方的druid数据源配置文件：

建表语句：

创建JavaBean：Employee & Department

测试验证：

如果此时数据库里字段是（department_name），查询结果就展示不出来名字了：{\”id\”:1,\”departmentName\”:null}。如何开启驼峰命名法配置？方法是自定义MyBatis的配置规则，给容器中添加一个ConfigurationCustomizer：

另一个问题是，每个mapper上都需要标注@Mapper注解，自动扫描配置呢？

mybatis配置文件：

修改Spring配置文件增加如下内容：

测试方法：

使用参考：mybatis.org/spring-boot…

Spring Data 项目的目的是为了简化构建基于 Spring 框架应用的数据访问技术，包括非关系数据库、 Map-Reduce 框架、云数据服务等等，另外也包含对关系数据库的访问支持。SpringData 为我们提供使用统一的API来对数据访问层进行操作，这主要是Spring Data Commons项目来实现的。Spring Data Commons让我们在使用关系型或者非关系型数据访问技术时都基于Spring提供的统一标准，标准包含了CRUD(创建、获取、更新、删除)、查询、 排序和分页的相关操作。

统一的Repository接口：

• Repository<T, ID extends Serializable>：统一接口
• RevisionRepository<T, ID extends Serializable, N extends Number & Comparable>：基于乐观锁机制
• CrudRepository<T, ID extends Serializable>：基本CRUD操作
• PagingAndSortingRepository<T, ID extends Serializable>：基本CRUD及分页

提供数据访问模板类 xxxTemplate，如：MongoTemplate、RedisTemplate等

1)、编写一个bean实体类和数据表进行映射，并且配置好映射关系；

2）、编写一个Dao接口来操作实体类对应的数据表(Repository)

3）、基本的配置

4）、启动工程，自动生成数据表：

5）、测试

请求http://localhost:8080/user?name=haha&email=qqqq@qq.com会进行日志输出：Hibernate: insert into tbl_user (email, name) values (?, ?)

SpringApplication.run（主程序类）1、 创建SpringApplication对象；这一步主要是加载并保存所有的 ApplicationContextInitializer 和 ApplicationListener，并获取到主程序类2、运行run()方法；回调所有的SpringApplicationRunListener的starting、准备环境、创建ioc容器对象（web环境容器和普通环境容器）

1、准备环境

• 执行ApplicationContextInitializer. initialize()
• 监听器SpringApplicationRunListener回调contextPrepared
• 加载主配置类定义信息
• 监听器SpringApplicationRunListener回调contextLoaded

2、刷新启动IOC容器

• 扫描加载所有容器中的组件
• 包括从META-INF/spring.factories中获取的所有EnableAutoConfiguration组件

3、回调容器中所有的ApplicationRunner、CommandLineRunner的run方法

4、监听器SpringApplicationRunListener回调finished

编写自动配置：

设计模式：启动器starter只用来做依赖导入；专门写一个自动配置模块，启动器依赖这个自动配置模块；自定义启动器名-spring-boot-starter

手把手带你快速入门jQuery（建议收藏！！！）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

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

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com