JQuery学习笔记

JQuery

语法

• $(selector).action()

---

选择器

• 层级选择器

  • $(‘xx.xx xx x’)
  • class就是.
  • id就是#
  • 属性选择器：[xx=‘xxx’]
    • $("[href$=’.jpg’]")选取所有 href 值以 “.jpg” 结尾的元素

• 子选择器$(‘parent>child’)

• 过滤器

  • $(‘xx:last-child’); // 仅选出第一个
  • $(‘xx:nth-child(2)’); // 选出第N个元素，N从1开始
  • $(‘xx:nth-child(even)’); // 选出序号为偶数的元素
  • $(‘xx:nth-child(odd)’);//选出序号为奇数的元素

• 表单的选择器

  • :input：可选择，，和

  • :file：可以选择，和input[type=file]一样

  • :checkbox：可以选择复选框，和input[type=checkbox]一样

  • :radio：可以选择单选框，和input[type=radio]一样

  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个上，用$(‘input:focus’)就可以选出

  • :checked：选择当前勾上的单选框和复选框，可以立刻获得用户选择的项目，如$(‘input[type=radio]:checked’)

  • :enabled：可以选择可以正常输入的、等，也就是没有灰掉的输入

  • :disabled：和:enabled正好相反，选择那些不能输入的

• 其他选择器

  • :visible：可见
  • :hidden:隐藏

• 查找/遍历

  • 向下查找
    • .find(’’) :当前节点一直向下找，返回所有后代元素
    • .children(’’):向下查找所有直接子元素
  • 向下查找
    • .parent(’’) :当前节点向上查找直接父元素
    • .parents(’’):向上查找,返回所有祖先元素
    • $(“xx”).parentsUntil(“yy”):返回介于两个给定元素之间(xx 和 yy)的所有祖先元素
  • 同级查找
    • .siblings(’’):返回被选元素的所有同胞元素
    • .next(’’)/.prev(’’) :查找节点同一层级的上节点或下节点，返回一个
    • .nextAll()/.prevAll():返回全部元素
    • .nextUntil()/.prevUntil()：返回两个元素之间的全部元素
  • .each(函数):遍历，为每个匹配元素规定运行的函数

• 过滤

  • .filter(‘具体节点’)
  • .map(‘jq对象’).get()

---

操作DOM

• 获取/设置
  • .text():节点文本
  • .html()：节点原始html
  • .val() : 设置或返回表单字段的值
  • .attr("":"") :获取/设置属性值
• 添加元素/内容
  • .append(‘jq对象/html字符串/dom对象’):在被选节点后添加
  • .prepend():在被选节点前添加
• 删除
  • remove() : 删除被选元素（及其子元素）
  • empty() : 从被选元素中删除子元素
• 修改css
  • .css(‘属性’:‘值’,‘多个属性’:‘值’)
  • .addClass(): 从被选元素添加一个或多个类
  • .removeClass() : 从被选元素删除一个或多个类
  • .toggleClass() : 对被选元素进行添加/删除类的切换操作

---

事件

• .on(‘事件’,xx/setTimeout啥的)：绑定

• .off(‘事件’,xx):取消绑定

• 鼠标事件

  • click: 单击
  • dblclick：双击
  • mouseenter：鼠标进入
  • mouseleave：鼠标移出
  • mousemove：鼠标在DOM内部移动时触发
  • hover：相当于mouseenter加上mouseleave

• 键盘事件

  • 通常是和用到
  • keydown：键盘按下时触发
  • keyup：键盘松开时触发
  • keypress：按一次键后触发

• 表单事件

  • focus：当DOM获得焦点时触发
  • blur：当DOM失去焦点时触发
  • change：当、或的内容改变时触发
  • submit：当提交时触发

• $(document).ready()：当页面被载入并且DOM树完成初始化后触发

• 若想代码触发一个事件，即手动触发时，直接.click()

---

动态效果

• 显示/隐藏
  • .show(time/s/slow/fast)
  • .hide(time/s)
  • .toggle()：根据当前状态决定show or hide
• 上拉下拉
  • .slideUp()
  • .slideDown()
  • .slideToggle()
• 淡入淡出
  • .fadeIn(speed,callback)
  • .fadeOut(speed,callback)
  • .fadeToggle(speed,callback) :根据当前状态决定fadeIn/fadeOut
• 渐变为给定的不透明度（opacity值介于 0 与 1 之间）
  • .fadeTo(speed,opacity,callback)
• .animate(): 自定义动画
  • 可串行设置动画，通过delay()实现暂停效果
  • 可操作多个css属性（注意驼峰命名如paddingLeft）
  • 使用相对值：+= / -=
  • 队列：同个元素多个动画，可先获取var div = $(“div”)
• .stop():停止动画

---

JQ Ajax

• $(selector).load(URL,data,callback);