JQuery入门

• • dom对象转jquery对象----》$(dom对象)

• jquery对象转dom对象----》jquery对象[0]

• • jquery查找出来的对象，返回的都是原始的dom对象数组，即使只找到一个。 因此我们需要用数组下标去取出来

• 按钮变色小案例

• 选择器

• • 多个属性选择器并排写，选取结果为取交集。
• • 子元素过滤器里面nth-child(2n-1),这里的n是从1开始取值

• 表单里面的button标签，会被默认作为submit提交按钮

• jquery里面提供的增强for循环.each方法

• 对选择器的小总结

• 元素筛选方法----对选择器筛选后的方法，再次进行筛选

• • next筛选出来的是下一个紧邻元素，如果$(“#one”).next(“span”)那么下一个紧邻元素必须是span标签，否则查找不到

• next选出来的是兄弟元素，不会选出子元素

• 基本过滤器中的:eq(index)包含儿子和后代，而:nth–child()只会找儿子，不包括后代

• Dom属性操作

• • 注意:JS中attr和prop区别

Jquery cdn加速

===========================================================================

Jquery cdn加速

快速入门

===================================================================

1.先引入依赖

---

org.webjars

jquery

3.3.1-2

2.使用script标签引入

---

3.编写jquery代码VS javaScript代码

---

js:

<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

<% pageContext.setAttribute(“ctx”,request.getContextPath());%>

SayHello

jq:

<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

<% pageContext.setAttribute(“ctx”,request.getContextPath());%>

SayHello

---

重点1：$ (): 调用方法$ ()---->叫做jquery的核心函数,为$ ()方法传入一个function() {} 作为参数，就相当于window.οnlοad=function(){写代码}

---

重点2：使用$ {}查找元素，使用.click()来绑定点击响应函数，把单击响应函数作为click()的参数传入即可

---

重点3：$本质是一个function方法

---

---

核心函数$ ()的四种用法

============================================================================

---

1.传入参数为函数时，文档加载完成就执行该函数

---

---

2.传入参数html字符串时，根据这个字符串创建元素节点对象----apppendTo方法

---

• 相机

• 

  ---

  3.传入参数为选择器字符串时，根据这个字符串查找元素节点对象

  ---

  <%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

  <% pageContext.setAttribute(“ctx”,request.getContextPath());%>

  <%–#是链接到本页面–%>

  你好

  

  ---

  4.传入参数为DOM对象时，将DOM对象包装成JQuery对象返回

  ---

  

  dom对象转jquery对象----》$(dom对象)

  <%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

  <% pageContext.setAttribute(“ctx”,request.getContextPath());%>

  你好

  

  jquery对象转dom对象----》jquery对象[0]

  jquery查找出来的对象，返回的都是原始的dom对象数组，即使只找到一个。 因此我们需要用数组下标去取出来

  <%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

  <% pageContext.setAttribute(“ctx”,request.getContextPath());%>

  框架相关

  原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

  在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

  Vue框架

  知识要点：
  1. vue-cli工程
  2. vue核心知识点
  3. vue-router
  4. vuex
  5. http请求
  6. UI样式
  7. 常用功能
  8. MVVM设计模式

  

  React框架

  知识要点：
  1. 基本知识
  2. React 组件
  3. React Redux
  4. React 路由

  

  门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

  在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

  Vue框架

  知识要点：
  1. vue-cli工程
  2. vue核心知识点
  3. vue-router
  4. vuex
  5. http请求
  6. UI样式
  7. 常用功能
  8. MVVM设计模式

  [外链图片转存中…(img-ZkH6e9Yx-1718038357101)]

  React框架

  知识要点：
  1. 基本知识
  2. React 组件
  3. React Redux
  4. React 路由

  [外链图片转存中…(img-qQTzKm0u-1718038357102)]