首页 > 代码库 > JQuery

JQuery

原理: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()

JQuery