JQuery小结

JQuery NODE

1. JQuery 是一个 JavaScript 库,可以极大地简化了 JavaScript 编程

其中包含了：

1. HTML
   • 元素的获取，操作
   • 事件函数
2. CSS 操作
3. JS：
   • 动画和特效
   • 动画操作
4. AJAX
5. Utilities
6. 提供大量的插件

2. 引入jQuery

1. 安装jQuery

2. 从CDN加载：

   • 百度的CDN加载
     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

   • Google的CDN加载
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

3.使用jQuery

1. 事件：

   • click(), dbclick()
   • mouseenter(),   mouseleava(),   mousedown(),   mouseup(),   hover()
   • focus(), blurs()
   • resize()

2. 效果：

   • hade(),   show(),   toggle()
   • fadeIn(),   fadeOut(),   fadeToggle(),   fadeTo()
   • animate()
   • stop()
   • chaining技巧

3. HTML

1. 捕获和设置HTML元素：
   • text() 设置和获取所选元素的文本内容
   • html() 设置或获取所选元素的内容，包含HTML标记
   • val() 设置或获取表单字段的值
   • attr()   prop() 获取属性值
     prop() 检索HTML元素本身带有的属性,如果检索到属性，返回指定属性值，否则返回空字符串
     attr() 自定义的DOM属性,如果检索到属性，返回指定属性值，否则返回 undefined
2. 添加元素
   • append()   prepend() 在被选元素的结尾/开头插入内容被选元素内部嵌入
   • after()   before() 在被选元素之后/前插入内容在被选元素外追加
3. 删除元素
   • remove() 删除自己和子元素 可以接受一个参数，对要删除的元素做一个过滤
   • empty() - 只删除子元素(相当于清空)
4. 获取/设置css class
   • addClass() 添加一个或多个
   • removeClass() 删除一个或多个
   • toggleClass()
   • css() 设置/获取样式属性
     get property --> css("propertyName")
     set property --> css("propertyName", "value", "propertyName", "value", ...)
5. 尺寸
   • width()    height() 设置/获取真实值
   • innerWidth()    innerHeight() 包括内边距(padding)
   • outerWidth()    outerHeight() 包括内边距(padding)和边框(border)

4. 遍历

1. 向上遍历:
   • parent() 返回被选元素的直接父元素（只会向上一级对DOM树进行遍历）
   • parents() 返回被选元素的所有祖先元素，也可通过参数来过滤(parents(“ul”))
   • parentsUntil() 返回介于两个给定元素之间的所有祖先元素(相当于返回区间)
2. 向下遍历:
   • children() 返回被选元素的所有直接子元素（只会向下一级对DOM数进行遍历）
   • find() 返回被选元素的全部后代元素
3. 水平遍历:
   • siblings() 返回被选元素的所有同胞元素(可传递参数进行筛选)
   • next() 返回被选元素的下一个同胞元素
   • nextAll() 返回被选元素的所有跟随的同胞元素
   • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
   • prev() 与上相似,只不过返回之前的同胞元素
   • preAll()
   • prevUtil()
4. 过滤:
   • first() 返回被选元素的首个元素
     $(“div p”).first() //返回首个<div>的首个<p>
   • last() 返回被选元素的最后一个元素
     $(“div p”).last() //返回最后一个<div>的最后一个<p>
   • eq() 返回被选元素指定索引值的元素
     $(“p”).eq(1) //返回索引为2的<p>元素
   • filter() 自定义规则,删除规则以外的元素,并返回符合规则的元素
     $(“p”).filter(".ur1") //返回带有类名"ur1"的所有<p>元素
   • not() 效果与filter()相反