前端知识点总结——jQuery

最新推荐文章于 2023-06-22 21:38:06 发布
最新推荐文章于 2023-06-22 21:38:06 发布
阅读量134 收藏
点赞数
文章标签： javascript 前端 ui ViewUI

前端知识点总结——JQ

1.什么是jQuery:

jQuery: 第三方的极简化的DOM操作的函数库
第三方: 下载
极简化: 是DOM操作的终极简化: 4个方面: 

1\. DOM: 增删改查
2\. 事件绑定:
3\. 动画效果:
4\. Ajax

DOM操作: 学习jQuery还是在学DOM，只不过API简化了
函数库: jQuery中都是函数，用函数来解决一切问题
为什么使用:

  1. DOM操作的终极简化
  2. 解决了大部分浏览器兼容性问题
    凡是jQuery让用的，都没有兼容性问题

2.如何使用:

下载: 版本:
1.x: 兼容旧浏览器 IE8 

1.x.js  未压缩版  
  优: 包含完备的注释，格式，变量名，可读性好
  缺: 体积大，不便于传输
 何时: 学习和开发阶段
1.x.min.js  压缩版
  优: 体积小，便于传输
  缺: 去掉注释，格式，极简化了变量名
      可读性差
 何时: 生产环境

2.x: 不再兼容旧浏览器
3.x: 不再兼容旧浏览器，提供了更多新特性:
鄙视: 3.x的新特性: 

1\. 所有代码运行在严格模式下
2\. 用for...of代替了forEach  $.each
3\. 新动画API: requestAnimationFrame()
4\. 支持promise
5\. ajax的API防备跨站点脚本(XSS)攻击

引入网页: 2种:

  1. 引入服务器本地的js文件: <script src="js/jquery-1.x.js"
  2. 引入CDN网络中，共享的js文件:

<script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js "

原理:
引入jquery-1.x.js其实是在全局添加了一种新类型jQuery
包括:
构造函数jQuery: 用于创建jQuery类型的子对象
原型对象jQuery.fn: 用于保存只有jQuery类型的子对象才能访问的共有方法
如何使用jQuery简化版API:
问题: DOM元素无法使用jQuery简化版API
解决: 要想使用jQuery简化版API，必须先创建jQuery类型的子对象:
如何创建jQuery类型的子对象: 2种:

  1. 通过查找DOM元素，将DOM元素保存到新创建的jQuery对象中:
    var  jq= ("selector")
    什么是jQuery对象: 包含找到的DOM元素的类数组对象
  2. 将已经获得的DOM元素直接保存进新创建的jQuery对象中

jQuery API的通用特点: 3个

  1. 自带遍历: 对jQuery对象整体调用一次API，等效于对内部每个元素都调用一次API
  2. 一个函数两用: 给新值，就修改；没给新值，就读取原值
  3. 每个函数都返回正在操作的jq对象: 链式操作!

3.查找: 选择器

基本选择器: 同CSS
id class element * ,
层次选择器: 同CSS
空格 > + ~
子元素过滤选择器: 同CSS
在各自父元素内，分别排序，从1开始
:first-child :last-child :only-child
:nth-child(2n/2n+1/odd/even/i)
基本过滤选择器(位置过滤选择器): jQuery新增
将所有符合条件的元素，保存在一个统一的集合中，在集合内统一编号。从0开始
:first/last :gt/lt/eq(i) :even/odd
属性过滤选择器: 同CSS
内容过滤: jQuery新增4种:

  1. 以内容中的文本作为条件查询父元素
    :contains(text) 内容包含指定文字的元素
  2. 以子元素的特征作为查询条件，查询父元素
    :has(selector) 包含符合selector要求的子元素的父元素
  3. 空元素/非空元素:
    :parent
    :empty

可见性过滤: jQuery新增
:hidden 只能选择两种隐藏的元素 

type="hidden" display:none

:visible
状态过滤: 同CSS 四大状态:
:enabled :disabled :checked :selected
表单元素过滤:
:input 选择所有表单元素: input select textarea button
:[type] 每种type都对应一种选择器 

:text  :password  :file    :button  :submit ....

4.修改:

内容: 3种:
html代码片段:  (...).html([新内容]) .innerHTML 纯文本内容: (...).text([新内容]) .textContent
表单元素的值:  (...).val([新值]) .value 清空内容: (...).empty();
属性: 3种:
HTML标准属性: $(...).attr("属性名"[,"值"]) 

问题: 一次只能修改一个属性的值:
解决: 同时修改多个属性的值:
 $(...).attr({
   属性名:值,
   属性名:值,
      ... : ...
 })

状态属性:  (...).prop("属性名"[,bool]) 自定义扩展属性: (...).data("属性名"[,"值"])
样式:
修改: 内联样式:
获取: 计算后的样式:
都用.css:  (...).css("css属性名"[,值]) 问题: 单独修改每个css属性，代码繁琐 解决: 用class批量修改样式: (...).addClass("class ... ")
(...).removeClass("class ...") (...).hasClass("class ...")

$(...).toggleClass("class ...")

  1. 按节点间关系查找:
    2大类:

    1. 父子:
      (...).parent() (...).children(["selector"])
      问题: 只能获得直接子元素
      解决: 在所有后代中查找
      (...).find("selector") (...).children().first();
      $(...).children().last();
    2. 兄弟:
      (...).prev/next() (...).prevAll/nextAll(["selector"])
      $(...).siblings(["selector"])

  2. 添加,删除,替换,克隆:
    添加: 2步:

    1. 创建新元素: var  elem= ("html代码片段")

    2. 将新元素添加到DOM树:
      末尾追加:  parent.append( elem) //return $parent 

      $elem.appendTo($parent) //return $elem

      开头插入:  parent.prepend( elem) //return $parent 

      $elem.prependTo($parent) //return $elem

      指定元素前插入:  child.before( elem)
      指定元素后插入:  child.after( elem)

可简化为1步:
("html代码片段").appendTo( parent)
$parent.append("html代码片段")

移除:  (...).remove() 替换: (...).replaceWith(); //右替换左 //return 左 

$(...).replaceAll(...); //左替换右 //return 左

克隆: $(...).clone();
浅克隆: 仅复制内容和样式，不复制行为 

.clone() 默认是浅克隆

深克隆: 即复制内容和样式，又复制行为 

.clone(true)

5.事件:

鄙视: jq中有几种事件绑定方式，分别是什么:

  1. .bind("事件名",handler)
    .unbind("事件名",handler)
    3个重载: 

     .unbind("事件名",handler) 移除指定事件上的一个处理函数
 .unbind("事件名")  移除指定事件上的所有处理函数
 .unbind() 移除所有事件上的所有处理函数

  2. .one("事件名",handler)
    只能触发一次，触发后，自动解绑

  3. .delegate("selector","事件名",handler)
    其实就是利用冒泡的简化版：

    1. 将利用冒泡中的目标元素判断提升到第一个参数，用选择器作为判断条件
    2. 将this重新指回了目标元素

鄙视: .delegate vs .bind

  1. 绑定位置不同:
    .bind() 直接绑在目标元素(子元素)上
    .delegate() 绑在父元素上
  2. 事件监听的个数不同:
    .bind() 导致事件监听个数增多
    .delegate() 始终只有一个监听
  3. .bind() 无法让动态生成的新元素自动获得事件处理函数
    .delegate() 即使后来动态生成的新元素也可自动获得父元素上的事件处理函数

解绑: .undelegate()

  1. .live/die() 废弃

  2. .on: 统一bind和delegate的用法

    1. 代替bind: .on("事件名",handler)
    2. 代替delegate: .on("事件名","选择器",handler)

解绑: .off()

  1. 终极简化: .事件名(handler)

6.页面加载后执行: 2种:

  1. DOMContentLoaded:
    DOM内容(html,js)加载完成,就提前触发
    何时: 操作不需要等待css和图片时，首选DOMContentLoaded
    jQuery:  (document).ready(function(){ ... }) 简化: ().ready(function(){...})
    更简化: $(function(){...}) 

    ES6: $(()=>{ ... })

  2. window.οnlοad=function(){
    //等待页面所有内容(html,css,js,图片)都加载完才能执行
    }
    何时: 如果必须等待css和图片加载完，才能执行的操作，必须放在window.onload中

鄙视: jQuery中$的原理: 4种重载

  1. 如果传入选择器字符串，则查找并创建jq对象
    优化: speed up
    如果选择器只是一个id，则调用getElementById
    如果选择器只是一个标签，则调用getElementsByTagName
    如果选择器只是一个class，则调用getElementsByClassName
    如果选择器复杂，才调querySelectorAll
  2. 如果传入DOM元素对象，则封装现有DOM元素为jq对象
  3. 如果传入html代码片段，就创建新元素:
  4. 如果传入函数，就绑定DOM内容加载后执行

7.鼠标事件:

DOM: mouseover mouseout
进出子元素，也会反复触发父元素上的事件
jq: mouseenter mouseleave
进出子元素，不再触发父元素上的事件
简化: 如果同时绑定mouseenter和mouseleave 

可简化为.hover(enterHandler, leaveHandler)
 如果enterHandler和leaveHandler可统一为一个处理函数: .hover(handler)

模拟触发:
(...).trigger("事件名") => (...).事件名()

8.动画:

简单动画: 3种:

  1. 显示隐藏: .show(ms) .hide(ms) .toggle(ms)
    不带参数，默认: 瞬间显示隐藏，不带动画 

    原理: display属性实现的，不支持动画

    带毫秒数参数: 会有动画效果

  2. 上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)

  3. 淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

问题: 1. 效果是固定的，不便于维护 

2\. 用程序的定时器实现的动效，效率不如transition

万能动画:
$(...).animate({
css属性:目标值,
css属性:目标值,
},ms)
问题: 只支持单个数值的css属性 

不支持颜色和CSS3变换

动画播放后自动执行: 动画API的最后一个参数都是一个回调函数，在动画播放完成后自动执行!
回调函数中的this，指正在播放动画的当前DOM元素

9.排队和并发:

  1. 并发: 多个css属性同时变化
    放在一个animate函数内的多个css属性默认并发变化
  2. 排队: 多个css属性先后变化
    对同一个元素，先后调用多个动画API，都是排队执行
    原理: 所有动画API起始并不是立刻开始动画，而仅是将当前动画函数加入元素的动画队列中等待执行。

停止动画: $(...).stop();
默认: 仅停止动画队列中，当前正在播放的一个动画，队列中后续动画，依然执行！
如何停止动画，并清空队列: .stop(true)

选择器: :animated 可选择或判断一个正在播放动画的元素

10.类数组对象操作:

遍历:
(...).each(function(i,elem){ //this->当前elem }) 鄙视: (...).each() vs $.each(数组/集合,fun)

查找:
var i=$(...).index(要找的DOM元素/jq对象)
简化: 如果在一个父元素内查找子元素: 

$(子元素).index();

11.为jquery添加自定义方法:

  1. 添加在jQuery.fn中
    强调: jQuery.fn.自定义方法=function(){ 

         //this->将来调用该方法的jq对象
   }

  2. 调用时: $(...).自定义方法()

12.插件: 为标准函数库或框架添加功能的第三方库

  1. 官方插件jQuery UI:
    使用jQueryUi:
    先引入jquery.js，因为jQuery UI是基于jQuery开发的
    再引入jquery-ui.js
    再编写自定义脚本
    包括:
    交互: 自学
    效果:

    1. 重写了三类简单动画API，添加了新的动效
    2. 为addClass/removeClass/toggleClass，也添加了动效
    3. 重写了animate方法，支持颜色动画

部件:
什么是部件: 具有完整样式和行为的小功能
如何使用: 4步: 

1\. 引入: jquery-ui.css
2\. 按照部件约定，编写html内容结构
3\. 引入jquery.js和jquery-ui.js
4\. 在自定义脚本中，找到插件的父元素，调用插件API

原理: 

侵入性: 在开发者不知情的情况下，自动添加class和行为
优: 简单!
缺: 不可维护!

jQuery UI vs bootstrap
jQuery UI 傻瓜式，侵入式
优: 简单 缺: 不可维护
bootstrap 少量手动添加样式和行为(自定义扩展属性)
缺: 相比jQuery UI，稍微麻烦
优: 可定制!

13.第三方插件:

文件上传:
富文本编辑器:
masonry: 彩砖墙/瀑布流

14.自定义插件:

何时: 只要希望复用一块功能和样式时，都要封装为插件
如何:
前提: 必须已经用原生的html,css,jss实现了插件的功能
2种封装插件的风格:
jQuery侵入式:

  1. 将插件所需的css提取出来，保存在单独的css文件中

  2. 定义插件的js文件:
    先检查是否提前引入了jQuery
    定义插件函数，保存在jQuery的原型对象jQuery.fn中 

    侵入: 根据插件需要，为子元素自动添加class
      为子元素绑定事件处理函数

  3. 使用插件:
    引入插件的css文件
    在body中按插件的规定，编写html内容
    引入jquery.js和插件的js文件
    在自定义脚本中，查找要应用插件的父元素，调用插件函数

Bootstrap DIY式:

  1. 将css拷贝到独立的css文件中
  2. 编写js:
    先验证是否提前加载了jQuery
    查找自定义扩展属性，为其绑定事件
  3. 使用插件:
    引入插件的css
    按照插件的HTML格式要求，编写内容
    为插件的HTML元素手动添加class
    为触发事件的元素添加指定的自定义扩展属性

15.jQuery的ajax API

$.ajax({
type:"get/post",
url:"xxx",
data:"rawData"/{ 变量名:值, ...}
dataType:"json",
beforeSend(){ 

//在发送之前触发

}
completed(){ 

//只要请求完成，无论成功还是失败，都触发

}
success(data){ 

//请求成功触发

}
error(){ 

//发生错误时触发

}
}).then(data=>{
... ...
}).catch(err=>{ ... })
简写:

  1. 专门发送get请求

$.get(url,data,dataType).then(data=>{ ... })

  1. 专门发送get请求，接收JSON响应，并自动转为js对象

$.getJSON(url,data).then(data=>{ ... })

  1. 专门发送get请求，接收js语句响应，并执行

$.getScript(url,data)

  1. 专门发送get请求，获取一段html代码片段的响应，并自动填充到前面的父元素中

$(父元素).load("xx.php/xx.html")
强调: 不支持then!

专门简化post请求的:
$.post(url,data,dataType).then(data=>{ ... })

16.跨域请求:

跨域:
从 http://store.company.com/dir/...

允许跨域请求: link, img, script
不允许跨域: xhr对象 (ajax请求)
变通: script 需要服务器返回一段可执行的js语句 

服务器应该返回包含数据的一条可执行的js语句

如何实现:
客户端实现: JSONP (填充式json)

  1. 在客户端定义处理函数
  2. 在按钮单击事件中，动态创建script元素，src设置为服务端地址，并携带请求参数callback=函数名
  3. 在服务器端，接收请求参数中的函数名，将函数名和要返回的数据，拼接为一条可执行的js语句
  4. 客户端script，请求服务端php，获得可执行语句，自动调用提前定义好的函数处理数据
  5. 在客户端处理函数结尾，要动态删除script

起始jQuery的ajax api都可用, 只不过，dataType必须都写成jsonp，原理同上。

服务端: header("Access-Control-Allow-Origin:*");
允许客户端使用xhr对象跨域请求！

结语：觉得总结的还可以的话，点下赞咯，你们的鼓励是我前进的动力，谢谢各位老铁们！


自己是个从事多年开发的前端工程师，如果你对软件开发感兴趣

这里推荐一下我的前端学习资源分享qun：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

持续学习，提升自我，前端资源分享


来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69901074/viewspace-2648290/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69901074/viewspace-2648290/

clhq71932
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1523
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
前端之jQuery
Yietong的博客
08-26 894
jQuery是一个轻量级的兼容多浏览器的javascript库.它使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“...
关于jquery的传值问题
wzjemb的专栏
03-27 765
关于页面传值， 1、后台传值，通过response.redirect（“sss.aspx?action=edit&id=**”）; 2、前台repeater绑定，然后编辑传值 3、ajax传值 data(cmd:del, FID:id,**)，这里的id是通过js点击事件，调用，然后把主见id传过去，前提input得有name。 然后后台，用request["FID"]获取值 4、js
【前端】jQuery-概述+基本使用+常用API
qq_45764950的博客
11-27 1164
【前端】jQuery-概述+基本使用+常用API
jQuery前端框架 - 一小时了解与使用
最新发布
m0_52336378的博客
06-22 911
jQuery简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库在我们开始学习之前，有几个问题希望大家明白1.什么是jQuery？jQuery是JS写的插件库，说白了，就是一个JS文件。jQuery 极大地简化了JS编程。所以jQuery 相对JS来说，学习起来会很容易。
jQuery常用知识点总结以及平时封装常用函数
11-23
本文为大家介绍了jQuery中常用知识点及函数，包含许多细节方面的知识，下面我们一起学习一下。 jQuery中为我们提供了很多有用的属性，自己总结的一些常用的函数。个人认为在在线排盘开发中会比较常用的，仅供大家...
整理一些最近经常遇到的前端面试题
08-30
本文总结了三十道前端面试题，涵盖了javascript、jquery、html、css等多个方面的知识点。下面将对每个知识点进行详细的解释： 1. 标签属性中title和alt的区别： title是设置鼠标移动到图片上时显示的内容，而alt是...
jqueryapi12.离线版API
09-01
《jQuery API 1.2 离线版详解——打造高效前端开发的得力助手》 在Web开发领域，jQuery库以其简洁、易用的API（应用程序编程接口）深受开发者喜爱，尤其对于初学者和经验丰富的专业人士来说，jQuery极大地简化了DOM...
Jquery插件的使用--AutoComplete.docx
02-28
接下来，我们将深入探讨相关的知识点。 **jQuery AutoComplete 插件** jQuery UI 的 AutoComplete 是一个强大的工具，它可以监听用户在输入框中的输入，并在满足一定条件（如达到最小字符数`minChars`）时，向...
雅虎中国——招聘试题
09-02
本篇文章将深入探讨雅虎中国招聘试题中的关键知识点，帮助求职者更好地准备在线考试，提升自己的竞争力。 首先，我们要了解的是，雅虎中国在招聘时可能会考察应聘者的计算机基础知识，这包括但不限于计算机网络、...
jq知识点归纳总结
02-08
jquery知识点归纳总结，根据本人亲身经历所编写，绝对好资源，欢迎下载！
前端 jQuery框架
wk3510的博客
07-29 4155
bootstrap帮我们写好了一个css文件里面定义好了很多的css样式100%;}我们在使用的时候只需要在html中写标签添加响应的class即可学习有哪些class会有什么效果jquery我们使用原生的js，需要实现很多的页面动态效果，所有的效果都需要我们自己手动写逻辑jquery就是使用js代码帮我们写好了很多的动态特效，我们需要使用的时候只需要调用其写好的函数即可。............
前端学习之JQ
weixin_53105591的博客
07-17 411
前端学习之jq
前端jQ的使用
LIANG_XJT的博客
05-01 632
我们刚开始学Visual Studio 2015的基础时候会通过学习基本的html代码和css样式还有JS来方便我们学习。Jq和js使用类似都是用script标签包括起来。Jq代码比JS代码更加简洁， 1、下面我们通过一个例子来分析一下， 实现网页换肤，在这之前我们通过简单html和css代码布局。 如何实现这个效果才是问题，首先我们刚开始接触Visual Studio 2015一般情况下 把页面布局搭建起来是没有问题的.关键是怎么引用它实现我们要做的效果。 从上面...
前端jQuery框架
qq_41767337的博客
04-26 1161
前端页面除了模板语言freemarker之外还有页面的脚本语言：JavaScript… jQuery是JavaScript的一个框架，将JavaScript的使用方便了很多 对于任何浏览器而言，都是内置JavaScript引擎的 1 在.ftl文件中定义标签的范围 <script type="text/javascript"> alert("你好"); </script> ...
前端 之 jQuery
Hello LinWoW~ ⊙o⊙
06-04 3527
jQuery jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程，jQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。 实例找到div标签并给div标签设置为红色 原生js操作 var d1Ele...
前端开发之jQuery
冠军阿狗的博客
04-11 965
前端开发之jQuery一、jquery简介1. jquery是什么？2. 什么是jQuery对象？二、寻找元素(重要的选择器和筛选器)1. 选择器2. 筛选器三、操作元素(属性 CSS 和 文档处理)1. 属性操作2. CSS操作3. 文档处理4. 事件5. 动画效果6. 扩展(插件机制) 一、jquery简介 1. jquery是什么？ jQuery由美国人John Resig创建，至今已吸引...
前端优化，包括css,jss,img,cookie
weixin_30590285的博客
07-20 247
前端优化,来自某懒观看麦子学院视频的笔记。 尽可能减少HTTP的请求数 使用CDN 添加Expirs头，或者Cache-control Gzip组件压缩文件内容 将CSS放在页面上方 将脚本放到页面下方 减少CSS中Expressions：只在IE中使用，在css中通过js动态赋值 将javaScript和CSS独立成外部文件 减少DNS查询 压缩javaScript和CSS 避免重定...
jq前端总结（老是忘记怎么写）
never74的博客
01-14 346
function(id,name){$.ajax({ url:&lt;%=basePath%&gt;/bosys/sys/query,data:{"id":id,"name",name},type:"POST",cache:false,dataType:"json",success:function(response){},error:function(){$.messager.aleter("出...
Web前端知识点总结(吐血推荐).doc
11-12
除了基础知识外，Web前端知识点总结还包括了一些常用的框架和库，如jQuery、Bootstrap、React、Vue等，这些框架和库能够帮助开发者快速、高效地构建复杂的网页和应用，提高开发效率和用户体验。同时，也涵盖了一些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值