JQuery

Posted 2020-08-16

原理：DOM对象转化成JQ对象，才能操作JQ的API

1.常见的ID、classs、标签选择器

2.基本:：first ：odd ：even ：last ：lt ：gt ：eq ….. 看名字识别选择器功能   注意JQ中索引是从0开始 ，而CSS中的nth-child(n)。。是从1开始

3.属性选择器

[属性名]包含指定元素           [属性名=值] 满足指定关系名和值               [属性名！=值]包含名 但不是这个值的 

[属性名^=值] 以值开头        [属性名$=值]值结尾                             [属性名*=值]值包含   前提条件都是要求存在此属性名

attr（”“，值） prop（”“，值） 可删和加

3.过滤选择器

子元素过滤：其实css中的位置伪类  ：first-child  ：nth-child(n)  :only-child  -->选择作为父元素下指定位置的子元素

与基本过滤 ，基本过滤是先查找所有符合条件的元素，在选择结果集合中制定位置的元素

4.表单选择器：

：input选择所有form元素  input textarea select button

：type类型  –>：txt：password：radio  ：checkbox ：submit ：button ：image ：file ：hidden  --实际是[type=”“]简化

--------------------------

状态伪类：   ：disabled  ：enabled ：checked ：selected

 

5.添加&删除 

.addClass(“className”)   .removeClass（“className”）   配合页面交互效果，绑定自定义属性，用属性选择器

.toggleClass(“className”) 有就移除  没就给他加  万能的神

Notice :事件函数中一样能用this， this指向发生此事件行为的对象，但需要$(this) 转化为dom对象

.html（”内容“）  .value（‘表单内容’）

.append末尾添加  .prepend 开头 –>相当于insertBefore()   此时点前对象是parent

.before  .after  此时点前对象是child…

6.查找替换：

.hasClass（”className”）  children()直接子元素   find()所有符合条件的   $(child).before在child 之前插入 .after 在child 之后插入

要替换的.replaceWidth(“新元素的代码”)  

新元素代码片段.replaceAll(“要替换的元素”)          $(“”).clone([false/true])  默认false浅克隆,只复制属性,不复制行为 ,true深克隆,不但复制实行,而且复制行为

7.事件绑定

bind   1.(事件名,fn)   2.one(事件名,fn)一次性的绑定   3.$().事件名(fn) 

         bind只能已经有的元素添加事件绑定 ，但是也可以通过事件冒泡解决 ev.target，事情变复杂，于是出现了事件委托（利用冒泡）

          $(“parent”).delegate(“select”，事件类型，fn)三个参数  Notice：delegate中this是目标元素 （select） 省了 e.target

delegate：事件监听个数少  bind通常是在子元素上添加事件监听  对于动态添加的元素，delegate可以让动态添加的元素自动响应指定事件

         bind则是页面上的

.bind+冒泡 =.delegate

.unbind  有3个重载   1.(事件名,fn)   2.(事件名)   3.()  注意匿名函数的解绑

简化集合了.bind和.delegate ： .on（事件，fn）  .on（事件，select，fn）

8.模拟触发

平级的具有相同事件处理函数时候，直接模拟触发    （）.trigger（“事件名”）

9.为了提高用户体验，在dom树和js加载完成的时候，就绑定事件  domcontentLoaded  css和图片加载不了  相当于<script>放body后面

$(document).ready(事件处理)  window.onload()