jquery 基础 详细

jquery笔记会随着时间进行更正

再次更新：2019/10/14 13:57

写完这篇jquery之后，以后不再写jquery专题的文章了，不多说，请看

jquery

• 选择器名1+选择器名2
  • 获取选择器1的下一个兄弟选择器2
• 选择器名1~选择器名2
  • 获取选择器1之后的所有兄弟
• :first
  • 获取第一个选定的标签
  • 例如： $("p:first") 获取第一个p标签
• :last
  • 获取最后一个选定的标签
  • 例如： $("p:last") 获取第一个p标签
• :not(选择器名)
  • 获取不满足not里指定条件的标签
  • 例如： $("p:not('.class1')") 获取第一个没有class1类名的p标签
• :even
  • 获取满足条件的偶数的标签
  • 注意，从0开始计数，例如：第一个标签是偶数，会被选定
• :odd
  • 获取满足条件的奇数的标签
  • 注意，从0开始计数，例如：第二个标签是奇数，会被选定
• :eq(数字)
  • 获取index下标等于指定数字的标签
  • 从0开始计数，例如：$(p:eq(0)) 会选定第一个p标签
• :focus
  • 获取当前获取到焦点的标签
• :header
  • 获取h1-h6的标签
• :animated
  • 获取正在播放动画的标签
• :root
  • 获取html根标签
• contains(文本)
  • 获取子元素包含指定文本的标签
  • 例如：$("p:contains('特定文本')") 值获取p标签中包含"特定文本"内容的标签
• :empty
  • 获取空标签
• :parent
  • 获取具有内容的标签
• :has(选择器名)
  • 获取子元素含有指定选择器子标签的标签
• :hidden
  • 获取看不见的标签
• :visible
  • 获取看得见的标签
• 属性
  • [属性名]
    • 获取具有该属性的标签
  • [属性名=属性值]
    • 获取属性名等于该属性值的标签
  • [属性名*=属性值]
    • 获取属性名含有该属性值的标签
  • [属性名^=属性值]
    • 获取属性名以该属性值开头的标签
  • [属性名$=属性值]
    • 获取属性名以该属性值结尾的标签
  • [属性名!=属性值]
    • 获取属性名不等于该属性值的标签
• :first-child

  • 获取指定选择器的父标签的第一个子标签

    例如：
    <div>
        <p>我是第一个子标签</p>
        <span>我是span标签</span>
        <span>我是span标签</span>
        <span>我是span标签</span>
        <span>我是span标签</span>
    </div>
    
    $("div>span:first-child") 获取到p标签
    

• :first-of-type

  • 获取指定选择器的父标签的第一个指定的标签

    例如：
    <div>
        <p>我是第一个子标签</p>
        <span class="first">我是span标签</span>
        <span>我是span标签</span>
        <span>我是span标签</span>
        <span>我是span标签</span>
    </div>
    
    $("div>span:first-child") 获取到了类名为first的span标签
    

• :last-child
  • 获取指定选择器的父标签的最后一个子标签
• :last-of-type
  • 获取指定选择器的父标签的最后一个指定的子标签
• :nth-child(下标值)
  • 获取指定选择器的父标签的指定下标值的子标签
  • 下标值从0开始计数
• :nth-of-type(下标值)
  • 获取指定选择器的父标签的指定下标值的指定的标签
  • 下标值从0开始计数
• :only-child
  • 如果某个元素是父元素中唯一的子元素，那将会被匹配
  • 下标值从0开始计数
• :only-of-type
  • 如果某个元素是父元素中唯一的指定的元素，那将会被匹配
  • 下标值从0开始计数
• :input
  • 获取类别为input, textarea, select 和 button的标签
• :text
  • 获取input标签里type类别为text的标签
• :password
  • 获取input标签里type类别为password的标签
• :file
  • 获取input标签里type类别为file的标签
• :image
  • 获取input标签里type类别为image的标签
• :reset
  • 获取input标签里type类别为reset的标签
• :button
  • 获取input标签里type类别为button的标签
• :checkout
  • 获取input标签里type类别为checkout的标签
• :radio
  • 获取input标签里type类别为radio的标签
• :enabled
  • 获取可以被使用的标签
• :disabled
  • 获取不能被使用的标签
• :checked
  • 获取被选中的标签
• :selected
  • 获取被select标签选中的标签
• each(函数)
  • 遍历标签
  • 函数第一个参数是标签组里的每个id值，第二个参数是对应的dom对象
• length
  • 获取标签组里的数目长度
• selector
  • 获取$()中填写的名称
  • 例如：$("p:first").selector 返回值是字符串"p:first"
• context
  • 获取对应的dom对象
  • 例如：$("p:first").context 返回值是第一个p标签的dom
• get(下标值)
  • 获取jquery对象组里对应下标的dom
  • 例如：$("p:first").get(0) 返回值是众多p标签中的第一个p标签的dom对象
• index()
  • 获取对应的下标值
• offset()
  • 返回当前元素相对于视窗的偏移量对象，{left: left值,top: top值}
• position()
  • 返回当前元素相对于最近具有position的祖先元素的偏移量对象，{left: left值,top: top值}
• height()
  • 获取当前元素的height值，不是实际高度
• width()
  • 获取当前元素的width值，不是实际宽度
• innerHeight()
  • 获取当前元素的height+padding值
• innerWidth()
  • 获取当前元素的width+padding值
• outerHeight()
  • 获取当前元素的height+padding+border值
  • 参数是布尔值，默认false，不包含margin值，当参数是true时，要加上border值
• outerWidth()
  • 获取当前元素的width+padding+border值
  • 参数是布尔值，默认false，不包含margin值，当参数是true时，要加上border值
• on(事件名称,函数)
  • 绑定事件，函数在触发对应事件后自动执行，函数的参数是event对象，通过event.target可以选定当前元素
• off(事件名称)
  • 清除指定元素上绑定的事件
• one(事件名称,函数)
  • 与on同用法，区别在于只执行一次
• trigger(事件名,函数参数)
  • 手动触发对应事件，第二个参数是传递触发事件执行的函数的参数
• triggerHandle(事件名,函数参数)
  • 不会触发浏览器默认事件，例如submit使用trigger触发会自动跳转，而triggerHandle不会
  • 返回的是函数处理的值而不是jquery对象，也就是不能链式使用，例如：$("p>li").trigger("click").find("div")这样是不可以的
  • 只会触发符合条件的第一个元素
• hover(移入事件函数,移出事件函数)
  • 同时设置鼠标移入移出的触发函数
• toggle(第一次点击事件触发函数,第二次点击事件触发函数)
  • 第一次点击会触发第一个函数，第二次点击会触发第二个函数
• blur(函数)
  • 失去焦点触发该函数
• focus(函数)
  • 获取焦点触发该函数
• change(函数)
  • 标签值变化时会触发该函数
• click(函数)
  • 点击该标签时会触发该函数
• dbclick(函数)
  • 两次点击该标签会触发该函数
• focusin(函数)
  • 父元素会监测子元素的焦点获取情况，当子元素获取时，该函数被触发
• focusout(函数)
  • 父元素会监测子元素的焦点丢失情况，当子元素丢失焦点时，该函数被触发
• keypress(函数)
  • 监控所有按键按下来触发该函数
• keydown(函数)
  • 监控部分按键按下来触发该函数
• keyup(函数)
  • 监控部分按键松开来触发该函数
• mousedown(函数)
  • 当鼠标点下触发该函数
• mouseup(函数)
  • 当鼠标松开触发该函数
• mouseenter(函数)
  • 当鼠标移入触发该函数
  • 与mouseover的区别是，当移入子元素时，mouseover会被触发，而mouseenter不会被触发
• mouseleave(函数)
  • 当鼠标移出触发该函数
  • 与mouseout的区别是，当移出子元素时，mouseout会被触发，而mouseleave不会被触发
• resize(函数)
  • 当浏览器窗口大小改变时会触发该函数
• scroll(函数)
  • 当滚动时会触发该函数
• submit(函数)
  • 当点击提交时会触发该函数
• select(函数)
  • 当鼠标选择元素时会触发该函数
• attr(参数)
  • 当参数为一个字符串时，获取该字符串对应的属性值
  • 当参数为一个对象时，改变对象名对应的属性值
  • 当第一个参数是字符串，第二个参数为一个函数时，函数的参数是字符串对应的属性值，返回值是修改后的新属性值
• removeAttr(属性名)
  • 移除该属性
• prop(参数)
  • 用来修改checked等的状态值，同上可以是对象或者第一个参数是字符串，第二个参数是函数
• removeProp(参数)
  • 用来删除checked等的属性
• addClass(函数)
  • 用来给元素添加类名
  • 当参数是字符串时直接添加对应类名，多个用空格隔开，当参数是函数时，返回需要添加的类名，多个用空格隔开
• removeClass(函数)
  • 用来删除对应元素类名
  • 当参数是字符串时直接删除对应类名，多个用空格隔开，当参数是函数时，返回需要删除的类名，多个用空格隔开
• toggleClass(类名)
  • 切换类名，一个是去掉该类名，一个是新添该类名
• html()
  • 当没有参数时，用来获取标签下子元素的所有内容
  • 当有参数时，用对应参数来替换标签下子元素的html内容
  • 当参数是一个函数，函数返回值是需要设置替换html的值
• text()
  • 当没有参数时，用来获取标签下子元素的所有文本内容
  • 当有参数时，用对应参数来替换标签下子元素的文本内容
  • 当参数是一个函数，函数返回值是需要设置替换文本的值
• val()
  • 当没有参数时，用来获取input标签的文本内容
  • 当有参数时，用对应参数来替换input标签的文本内容
  • 当参数是一个函数，函数返回值是需要设置替换input标签的文本内容
• append(元素1)
  • 为指定元素的最后一个子元素追加元素1
• appendTo(元素1)
  • 将指定元素添加到元素1的最后一个子元素的后面
• prepend(元素1)
  • 为指定元素的第一个一个子元素追加元素1
• prependTo(元素1)
  • 将指定元素添加到元素1的最后一个子元素的后面
• after(元素1)
  • 将指定元素1添加到指定元素后面
• before(元素1)
  • 将指定元素1添加到指定元素前面
• insertAfter(元素1)
  • 将指定元素添加到元素1后面
• insertBefore(元素1)
  • 将指定元素1添加到元素1前面
• replaceWith(元素1)
  • 用元素1替换掉当前指定元素
• replaceAll(元素1)
  • 用当前指定元素替换掉元素1
• empty()
  • 清空当前指定元素的子元素
• remove()
  • 删除当前元素，并将其被绑定的方法和数据清空，将其返回
• detach()
  • 删除当前元素，将其完整返回
• clone(布尔值)
  • 布尔值默认false，不复制绑定事件
  • 布尔值为true，复制绑定事件，完整返回
• show()
  • 显示动画
  • 第一个参数是动画时间，可以是数字，单位为秒，可以使字符串，有三个值，slow，normal，fast，默认是normal
  • 第二个参数是动画运动状态，swing，可以指定为linear匀速
  • 第三个是动画完成时执行的函数
• hide()
  • 隐藏动画
  • 第一个参数是动画时间，可以是数字，单位为毫秒，可以使字符串，有三个值，slow，normal，fast，默认是normal
  • 第二个参数是动画运动状态，swing，可以指定为linear匀速
  • 第三个是动画完成时执行的函数
• toggle()
  • 显示(隐藏)转换动画
  • 第一个参数是动画时间，可以是数字，单位为秒，可以使字符串，有三个值，slow，normal，fast，默认是normal
  • 第二个参数是动画运动状态，swing，可以指定为linear匀速
  • 第三个是动画完成时执行的函数
• slideDown()
  • 高度动画，从高度为0->正常
• slideUp()
  • 高度动画，从高度为正常->0
• slideToggle()
  • 高度(0<-->正常)转换动画
• fadeIn()
  • 淡入动画
• fadeTo()
  • 参数是指定的不透明度，淡出到该值
• fadeOut()
  • 淡出动画
• fadeToggle()
  • 淡入淡出转换动画
• animate()
  • 制作元素的动画效果
  • 第一个参数是个对象，指定元素变化到的css样式
  • 第二个参数是动画时间
  • 第三个参数是动画速度状态，ease减速，easeIn加速,linear匀速
  • 第四个参数是个函数，动画执行完成后执行，可以在里面加入下一个动画
• stop()
  • 用来调整动画队列显示效果
  • 第一个参数为true，清空队列
  • 第二个参数为true，立即展示动画效果,为false的时候，结束动画效果
  • 不填参数，默认两个参数都为false
• delay(数字)
  • 延迟动画时间，单位毫秒
• finish()
  • 清空所有队列，停止所有动画
• eq(数字)
  • 返回匹配到的下标为数字的jquery对象，从0开始计数
• first()
  • 返回匹配到的第一个jquery对象，从0开始计数
• last()
  • 返回匹配到的最后一个jquery对象，从0开始计数
• hasClass(类名)
  • 判断指定元素是否具有该类，若有返回布尔值true，否则返回false
• filter(选择器名)
  • 返回匹配到指定选择器名的元素
• is(选择器名)
  • 指定选择器至少有一个满足该选择器名条件，返回true，否则返回false
• map(函数)
  • 遍历jquery对象，函数返回值构成数组
• has()
  • 参数是dom或者字符串，返回满足子元素具有该参数的该元素的jquery对象
• not()
  • 参数是dom或者字符串，返回不满足该参数条件的元素的jquery对象
• slice(开始下标，结束下标)
  • 获取元素中指定下标值到结束下标值的对象们，不包含结束下标
• children()
  • 用来获取子元素集合，不是后代集合
  • 参数为空，获取指定元素的全部子元素
  • 参数不为空，获取满足条件的子元素集合
• find()
  • 匹配所有满足参数条件的后代元素
• closest()
  • 从当前元素开始向祖先查找满足条件的元素，找到一个就停止，找不到返回空jquery对象
  • 不同与parents()后者是从父元素开始查找
• parents()
  • 匹配所有满足参数条件的祖先元素
• parent()
  • 若参数为空，返回父亲元素
  • 若参数不为空，返回满足指定条件的父亲元素
• next()
  • 返回下一个兄弟元素
• nextAll()
  • 若参数为空，向下匹配，返回所有兄弟元素
  • 若参数不为空，向下匹配，返回满足指定条件的兄弟元素
• nextUntil()
  • 向下匹配，直至找到满足条件的兄弟元素
• prev()
  • 返回上一个兄弟元素
• prevAll()
  • 若参数为空，向上匹配，返回所有兄弟元素
  • 若参数不为空，向上匹配，返回满足指定条件的兄弟元素
• prevUntil()
  • 向上匹配，直至找到满足条件的兄弟元素
• offsetParent()
  • 返回用于当前元素css定位的节点，position为相对定位或绝对定位
• siblings()
  • 若参数为空则返回所有兄弟节点
  • 若参数不为空返回满足条件的所有兄弟节点
• add(元素)
  • 将参数元素添加到指定元素列表中返回，没有添加到dom中，而是返回了个列表
• addBack()

  • 添加堆栈中元素集合到当前集合

    $("ul").children("li:lt(3)").addBack().css("background-color","red")
    // 将ul和满足条件的li标签的背景颜色变红
    

• end

  • 将当前对象调整为上一次调用的对象

    $("ul").find("li").eq(0).end()  // 当前的jquery对象返回到的ul，即现在的jquery对象为$("ul")
    

• contents()
  • 匹配元素内部所有的子节点，包括文本节点

随手点个赞，谢谢大家

更多文章 我的github