[知了堂学习笔记] JQuery对DOM的操作

操作分类

• 节点操作
  
  • 查找节点
    
    • 通过选择器
    • 通过属性选择器
    • 通过parent([expr])函数方法来查找父级元素节点
    • 通过parents([expr])函数方法来查找祖先元素
  • 创建节点
    
    • $(html)来完成，但要结合jquery中其他函数方法
  • 删除节点
    
    • remove([expr]):把元素本身一起删除掉
    • empty():清空元素内容的节点，但是元素本身不会删除掉
  • 插入内容
    
    • append():在元素的内部追加内容
    • prepend():在元素的内部追加内容
    • after():在元素的后面追击内容
    • before():在元素的前面追加内容
  • 复制元素节点
    
    • 调用clone(attr)
• 属性操作
  
  • $(“div”).attr(“title”):获取元素属性节点值
  • $(“div”).attr(“title”,”hello”)：给元素属性节点赋值，或者创建元素的属性
  • $(“div”).removeAttr(“title”):删除元素节点的属性
• 样式操作
  
  • css(name,value): 添加单个样式
  • addClass(cssname): 添加一个或多个样式, 如果是多个样式请用空格隔开
  • removeClass(cssname): 移除样式

---

函数总结

• css([expr])
• addClass([expr])
• removeClass([expr])
• attr([expr])
• removeAttr([expr])
• clone([expr])
• remove([expr])：删除节点，包括元素本身
• empty()：清空子节点
• append([expr])：添加节点
• prepend([expr])
• after([expr])
• before([expr])
• html()：获取元素的内容（获取普通 html 代码）, 相当于 innerHTML。
• children([expr])：获取子节点, 这子节点是一个 jQuery 对象
• parent([expr])：获取直接父节点, 这个父节点是一个 jQuery 对象
• val([expr])：获取表单中的文本框，文本域，复选框，单选按钮的值，同时也设置他们值，相当于 value
• each(function() {})：遍历一个元素下的节点
• index([expr])：获取相应元素的索引
• siblings([expr])：获取所有的同辈元素，可以用于做菜单动态显示
• next([expr])：获取紧邻的后面的同辈元素
• not([expr])：删除与指定表达式匹配的元素
• has([expr])：获取指定表达式匹配的元素（判断是否含有指定的元素）
• show([expr])：显示一个影藏的元素
• scroll()：网页滑动的事件，结合 Ajax 可以实现瀑布流
• resize()：监听浏览器窗口大小变化的事件
• offset()：获取元素在当前窗口的相对位置
• slideDown()：动画函数，让元素的高度增加的函数
• slideUp()：动画函数，让元素的高度减小的函数
• slideToggle(): 动画函数，会在 slideDown 和 slideUp 之间做切换
• text()：获取元素的文本内容
• animated()：自定义动画函数
• noConflict(): 避免 jQuery 和其他的 JS 库冲突

---

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php