JQuery入门,高级前端开发工程师

37 阅读3分钟

最后

为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。

开源分享:docs.qq.com/doc/DSmRnRG…

在这里插入图片描述

jq:

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

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

JQuery显示页面

SayHello

在这里插入图片描述


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


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


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



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

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

在这里插入图片描述


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



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


JQuery显示页面
  • 相机

在这里插入图片描述


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


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

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

JQuery显示页面

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

你好

在这里插入图片描述


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


在这里插入图片描述

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

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

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

JQuery显示页面

你好

在这里插入图片描述

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

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

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

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

JQuery显示页面

你好

在这里插入图片描述


按钮变色小案例

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

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

JQuery显示页面

变变变

使用原生Dom方法,改变颜色

将Dom对象转化为jquery对象,改变颜色

使用JQuery对象,改变颜色

将Jquery对象转化为dom对象,改变颜色

在这里插入图片描述


选择器

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

多个属性选择器并排写,选取结果为取交集。


基本选择器

基本选择器里面补充的组合选择器

层级选择器

在这里插入图片描述

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

在这里插入图片描述

在这里插入图片描述

子元素过滤器里面nth-child(2n-1),这里的n是从1开始取值

在这里插入图片描述

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

表单对象选择器

表单对象属性过滤选择器

表单选择器加表单对象属性过滤选择器完整版本

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

在这里插入图片描述


对选择器的小总结


选择器的小总结


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

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


jQuery选择器总结(选择器+元素筛选)

jQuery选择元素的方法补充

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】