0
点赞
收藏
分享

微信扫一扫

jQuery的初步使用

1.基本选择器:参考CSS选择器 - $("")

  • id/class/*/标签选择器
  • 群组选择器:p,span
  • 父子选择器:ul>li
  • 后代选择器:ul li
  • 兄弟选择器:
    • 单个:p+span
    • 多个:p~span
  • 属性选择器:
    1. img[title] 选择带有title属性的图片
    2. img[title="mao"] 属性等于某个值的时候选中
    3. img[title~="mao"] mao是词列表(一个属性多个值)也被选中
    4. img[title^="mao"] 开头等于某个值选中
    5. img[title$="mao"] 结尾等于某个值选中
    6. img[title*="mao"] 包含某个值就选中
    7. img[title|="mao"] 选中title值为mao或mao-的内容

2.过滤选择器:伪类选择器 - $("")

  • 与CSS3伪类选择器有区别,且有的jq提供方法
$('li:even')    // 选择索引为偶数的元素
$('li:odd')     // 选择索引为奇数的元素
$('li:hidden')  // 选择不可见元素
$('li:visible') // 选择可见元素
$('li:empty')   // 选择内容为空的元素
$('li:contains("ok")')  // 选择内容为ok的元素
$("div").find("h2") === $("div h2")      // 选择div中所有的h2后代
$("div").children("h2") === $("div>h2")  // 选择div中所有的h2子元素
$("li").first() === $("li:first")        // 选择第一个li
$("li").last() === $("li:last")          // 选择最后一个li
$("li").eq(3) === $("li:eq(3)")          // 选择索引为3的li
$("ul").has(".aa") === $("ul:has(.aa)")  // 选择子元素中有aa类的ul
$("li").not(".aa") === $("li:not(.aa)")  // 选择没有aa类的li
$("p").next("span") === $("p+span")      // 选择下一个兄弟元素
$("p").nextAll("span") === $("p~span")   // 选择后面所有兄弟元素
$("p").prev("span")     // 选择上一个兄弟元素
$("p").prevAll("span")  // 选择前面所有兄弟元素
$('li').parent()    // 选择最近的父级元素
$('li').parents()   // 选择所有父级元素
$('li').is('.red')  // 返回true/false
$('li').hasClass('red')  // 返回true/false

3.jQuery的动画

  • hide():隐藏
  • show():显示
  • toggle():显示/隐藏取反
  • slideUp():上拉
  • slideDown():下拉
  • slideToggle():上拉/下拉取反
  • fadeIn():淡入
  • fadeOut():淡出
  • fadeToggle():淡入/淡出取反
  • fadeTo(时间, 透明度):自定义
  • 自定义动画:animate()
  • animate({目标}, 时间, cb)
  • 连缀动画的三种方式
    • 方法连缀:jq的DOM方法执行结束后,返回正在操作的DOM对象,不断.animate()
    • 同步连缀:动画与动画之间是同步的,按顺序执行,分开写
    • 回调连缀:利用回调函数多次调用动画方法
  • 动画与其他方法是异步的
  • 动画与动画之间是同步的
  • 多个动画会产生动画队列
  • 动画队列:按顺序依次执行
  • stop():默认停止之前的动画
    • 两个参数,都是布尔值,默认都为false
    • 第一个参数:true清除动画队列;false不清除动画队列
    • 第二个参数:true立即运动到结束;false立即停止当前动画
  • delay(时间).animate():延时执行
  • queue():添加回调函数
    • 默认无返回值
    • 传入参数并调用即有返回值

4.jQuery的DOM操作

  • DOM操作

    • siblings():选择所有兄弟元素
    • eq(n):选择当前索引为n的元素
    • index():查找当前元素的索引
    • $("div").eq($("li").index()):选择当前li对应的div
    • parentsUntil(x):选择所有父级直到x,但不包括x
    • nextUntil(x):选择后面的兄弟直到x,但不包括x
    • prevUntil(x):选择前面的兄弟直到x,但不包括x
    • end():返回上一步的对象 - A.B.end():返回A
    • html() => innerHTML
    • text() => innerText
    • val() => value
    • addClass():增加class样式
    • removeClass():移除class样式
    • toggleClass():取反,有则移除,无则添加
    • attr()/css():设置属性/样式
      • 一个参数:
        • 字符:获取此属性值
        • 数组:获取多个属性值
        • 对象:设置多个属性值
      • 两个参数:字符,设置属性值
      • arguments.length:判断参数
      • typeof(*):判断类型
      • *.constructor:判断类型
    • removeAttr():删除属性
    • 清空css样式:设为""或"none"
    • $.each(obj,function(key,val){}):遍历对象
  • 尺寸类方法:返回数值型

    • 以下基于标准盒模型,请注意怪异盒的区别
    • width()/height():可获取可设置,元素的宽/高
    • innerWidth()/innerHeight():包括padding
    • outerWidth()/outerHeight():包括边框和padding
  • 位置类方法:offset/position返回对象,其他返回数值

    • offset():可获取可设置;传入对象;偏移位置,包括margin
    • position():只能获取,不能设置;定位
    • scrollTop()/scrollLeft():可获取可设置;滚动的距离
  • 节点操作

    • $("<div>"):创建元素
    • A.append(B):B插入到A最后一个子节点
    • B.appendTo(A):B插入到A最后一个子节点
    • A.prepend(B):B插入到A第一个子节点
    • B.prependTo(A):B插入到A第一个子节点
    • A.after(B):在A后面插入兄弟元素B
    • A.before(B):在A前面插入兄弟元素B
    • remove():移除节点
    • empty():清空内容
    • clone():克隆节点
    • A.clone(true).appendTo(B):克隆A及A的事件插入到B
    • replaceWith():替换标签
  • 绑定事件

    • 一般事件绑定:$("#btn").click(fn)
    • 绑定事件:$("#btn").on("click.a",fn)
    • 清除事件:$("#btn").off("click.a")
    • 事件委托:$(".list").on("click","li",fn)
    • one():绑定一次性事件
    • hover():绑定移入移出事件
      • $("div").hover(fn1,fn2)
      • fn1进入事件 => enter
      • fn2离开事件 => leave
    • trigger("click") 自动触发事件,且有事件冒泡
    • triggerHandler() 自动触发事件,没有事件冒泡
    • preventDefault() 阻止默认行为->contextmenu
    • stopPropagation() 取消事件冒泡
    • return false 阻止默认事件和事件冒泡,双层阻止
  • 事件对象

    • 同原生,但不用处理兼容
    • event.type 获取事件的类型
    • event.data 获取事件中传递的数据
    • event.target 获取绑定事件的DOM元素
    • event.which 获取当前鼠标点击的键
    • event.altKey/shiftKey/ctrlKey 返回true/false
    • event.pageX/pageY 获取根据页面原点的X,Y值
    • event.screenX/screenY 获取根据显示器窗口的X,Y值
    • event.offsetX/offsetY 获取根据父元素X,Y值
举报

相关推荐

0 条评论