写了这么久Vue、React,你还记得jQuery怎么写的吗?

2,534 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

还记得刚刚开始学习前端时,刚入门的便是原生的JavaScript以及jQuery,但是实际工作以后,纷纷用起了简单易用的框架,jQuery的知识点也只有面试时会想起它,今天突然有感,决定对jQuery的知识点做一个盘点,也希望自己能够不忘初心,保持对前端的热爱。

1.jQuery概念及使用思想

jQuery:封装了DOM、事件、ajax,但是有的东西没有封装,意味着有的东西还是不能简化:数据类型转换、ES对象的API、循环、定时器...

  • 引入jqueryjs
  • 使用选择器获取元素
  • 得到的元素进行操作

2.jQuery简化DOM操作

(1)通过关系获取元素:

  父:$("xx").parent();

  祖先:$("xx").parents();

  儿子:$("xx").children();

  前一个兄弟:$("xx").prev();

  后一个兄弟:$("xx").next();

  除了自己外的其他兄弟:$("xx").siblings();

(2)操作元素:

A、操作内容:

 $("xx").html() - 类似于innerHTML - 能够识别标签   

获取:`$("xx").html();`//多个元素只会获取到第一个的内容

设置:`$("xx").html("HTML")`//但是可以直接设置所有元素的内容

 $("xx").text() - 类似于innerText - 不能识别标签   

获取:`$("xx").text();`//多个元素会获取到所有元素内容并拼接成字符串

设置:`$("xx").text("纯文本")`//但是可以直接设置所有元素的内容

  $("input").val() - 类似于value - 获取设置input的value值

获取:`$("input").val();`//多个元素只会获取到第一个的内容

设置:`$("input").val("value")`//但是可以直接设置所有元素的内容

B、操作属性:

    *$("xx").attr(); - 类似getAttribute/setAttribute

    获取:$("xx").attr("属性名");

    设置:$("xx").attr("属性名","属性值");

    删除:$("xx").removeAttr("属性名");

C 操作样式

    $("xx").attr("class","")

    $("xx").attr("style","") - 也可以设置样式

a 专门操作class

追加:$("xx").addClass("class");

删除:$("xx").removeClass();//注意:没有传参,删全部

    指定传参,删指定

切换:$("xx").toggleClass("d1");

注意:切换:在有d1和没有d1之间进行切换,不会影响到别的 class



b 直接的样式操作
jq操作的基本是内联也不是样式表,而是当前生效的样式<br>

获取:<br>
`$("xx").css("css属性名");`<br>
设置:

```js
$("xx").css({

    "css属性名":"属性值",

        ...

      })
```

D、创建元素:

语法:(<elemclass=d(`<elem class='d{i}'>${变量}`)

由于是模板字符串,任何一个位置都可以放置变量

 

E、渲染&删除

渲染:
  插入内部 - 儿子   父.append(新) - 后插
父.prepend(新) - 前插  

  插入外部 - 兄弟
兄.after(新) - 后插

兄.before(新) - 前插

删除:

  $("").remove();

F、克隆:

父.append($("").clone(true))

3.事件:用户触发或浏览器自动触发的

(1)绑定事件:$("").bind("事件名",callback)

   简写:$("").click(callback)

(2)click、submit、change、mouseover|mouseenter(不会触发冒泡)、mouseout|mouseleave(不会触发冒泡)、mousemove、focus、blur、load、resize、input

(3)鼠标:mousedown、mouseup

(4)H5新特性:老IE不支持:已有新特性:语义化标签、音频视频、新的表单特性、webStorage、拖拽事件

www.runoob.com/jsref/event…

 (5)键盘事件:

keydown:任何按键都会触发,按下和按住都会触发

keypress:只有字母和数字回车空格会触发,按下和按住都会触发

keyup:任何按键都会触发,松开的时候会触发

4.JQ动画

(1)预定义动画:

a 隐藏和显示:

$("").show(time,callback) - 显示

$("").hide(time,callback) - 隐藏

time - 如果没有传递time参数,瞬间显示和隐藏

     - 如果添加了时间参数,具有动画:同时改变高度和宽度 以及透明度的方式

callback - 回调函数:动画结束后你还想做什么操作!

$("").toggle(time,callback) = show+hide

b 动效果:改变元素的高度

$("").slideDown(time,callback) - 显示

$("").slideUp(time,callback) - 隐藏

time - 就算没有传入时间,依然具有动画只不过有点快

callback - 回调函数:动画结束后你还想做什么操作!

$("").slideToggle(time,callback) = slideDown+slideUp

c 入淡出:改变元素的透明度

$("").fadeIn(time,callback) - 显示

$("").fadeOut(time,callback) - 隐藏

time - 就算没有传入时间,依然具有动画只不过有点快

callback - 回调函数:动画结束后你还想做什么操作!

$("").fadeToggle(time,callback) = fadeIn+fadeOut

(2)自定义动画

a并发动画:

$("").animate({

"css属性名":"css属性值",

...

},time,callback)

b排队动画:

$("").animate({

"css属性名":"css属性值",

},time,callback).animate({

"css属性名":"css属性值",

},time,callback).animate({

"css属性名":"css属性值",

},time,callback)

问题:排队动画,一定会有先后顺序

c停止动画:stop()

扩展:

  var bool=$("").is(":animated");//有动画为true,无动画为false

  var bool=!$("").is(":animated")//和上面相反

  var bool=$("").is(":hidden");//隐藏为true,显示为false

5.jquery UI

插件/组件库,基于jquery的开元网页用户界面代码库提供了   HTML/CSS/JS

  如何使用:

(1)打开百度,搜索jqueryUI中文网

(2)下载jqueryUI的包

a引入jqueryUI.css

b引入jquery.js

c引入jqueryUI.js

必须保证此顺序  

<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2/themes/base/jquery-ui.css"/>

<script src="jquery-ui-1.10.2/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

<script src="jquery-ui-1.10.2/ui/jquery-ui.js" type="text/javascript" charset="utf-8"></script>  

6.ajax封装

jquery:封装了3个部分:DOM 事件ajax

(1)*第一层:最复杂

 $.ajax({//配置信息:

"url":"xx.php",//连接的服务器端文件

"type":"GET/POST",//可以省略,默认为GET

"data":"key=value&key=value...",//请求消息

"dataType":"HTML/XML/JSON/JSONP",

"jsonp":"重命名",//默认叫做callback=?、可以换成你想要的名字

"success":data=>{//只有成功的时候会执行

        data=>xhr.responseText

        }

   })

(2)第二层:更简化

   a $("").load("url","data",callback)

缺点:1、无法设置请求类型:GET/POST,只能是GET

      2、会把获取到的数据放到页面上替换页面内容

      3、不能帮我脱衣服

 

   *b $.get("url","data"=>callback,"JSON");

 

   *c $.post("url","data"=>callback,"JSON");

(3)第三层: - 特殊用法(跨域)

   $.getScript("xx.js") - 异步获取js的技术

   跨域:在浏览器中具有同源策略:协议、域名、端口号都是相 同的情况才能访问自己的东西, 只要这三者:协议、域名、端口号有一个不同就叫跨域了,不允许访问! 解决跨域:

 前端:

  $.getJSON("url?callback=?","data",callback)


  PHP:

  echo $_GET["callback"]."(".JSON_encode($arr).")";

7scroll事件 - 滚动事件

$(window/document).scroll(()=>{

$(window/document).scrollTop();//获取距离页面顶部有多远

$("xx").offset().top;//获取xx距离页面顶部有多远

})