JQuery学习笔记

js选择器

1. 元素选择器：$(“p”)
2. 类选择器：$(".class")
3. id选择器：$("#id")
4. 伪类选择：$(“p:first”)、$(“p:last”)
5. 子选择：$(“div p”)
6. 属性选择：$("[href]")
7. 组合选择：$(“p.class”)、$(“p[href = ‘xxx’]”)、$(“p[href != ‘xxx’]”)
8. 其他：
   $("*")：选取所有元素
   $(this)：选取当前 HTML 元素
   $(":button")：选取所有 type=“button” 的 元素 和 元素
   $(“tr:even”)：选取偶数位置的 元素
   $(“tr:odd”)：选取奇数位置的 元素

• 细节：
  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行；JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

js效果

1. 隐藏和显示：$().hide()、$().show()、$().toggle()
   参数：动画时间、回调函数
2. 淡入淡出：$().fadeIn()、$().fadeOut()、$().fadeToggle()、$().fadeTo()
   参数：前三个：动画时间、回调函数；最后一个：动画时间、淡出的透明度、回调函数
3. 滑动：$().slideUp()、$().slideDown()、$().slideToggle()
   参数：动画时间、回调函数
4. 动画：$().animate()
   参数：动画最终样式{key:value}、动画时间、回调函数
5. 停止动画：$().stop()
   参数：是否清空动画队列、是否立刻完成动画
6. 链：可以在一条语句中使用多条语句和方法，例如（因为jQuery语法不严格）：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

• 细节：

1. 回调函数在当前动画百分之百完成之后执行。
2. 动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行；可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画。
3. 被立即停止的动画不会触发回调，被立即完成的动画会触发回调。

js操作HTML

1. 获取内容和属性
   获得内容：html()、text()、val()
   获取属性：attr()、prop()

• 细节：
  1. prop()函数的结果:
     如果有相应的属性，返回指定属性值。
     如果没有相应的属性，返回值是空字符串。
  2. attr()函数的结果:
     如果有相应的属性，返回指定属性值。
     如果没有相应的属性，返回值是 undefined。
  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
    对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
    具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

2. 添加/删除元素
   添加元素：append() 、prepend()、after()、before()
   删除元素：remove() 、empty()

• 细节：
  append/prepend 是在选择元素内部嵌入；after/before 是在元素外面追加;
  remove() ：删除被选元素及其子元素（还可以加过滤器）；empty()：删除被 选元素的子元素。

3. 获取并设置 CSS 类
   addClass()：向被选元素添加一个或多个类
   removeClass()：从被选元素删除一个或多个类
   toggleClass()：对被选元素进行添加/删除类的切换操作
   css()：设置或返回样式属性
   css(“propertyname”)：返回css属性
   css(“propertyname”,“value”)：设置css属性，可以一次设置多个
4. 获取尺寸：
   

js遍历

1. 向上遍历：parent()、parents()、parentUntil()
2. 向下遍历：children()、find()
3. 水平遍历： sibling()、next()、nextAll()、nextUntil、prev()、prevAll()、prevUntil
4. 过滤遍历：first()、last()、eq()、filter()、not()

• 细节：
  基本都可以使用参数来对遍历的结果进行筛选

ajax操作

1. load()：语法：$(selector).load(URL,data,callback);
2. get()：语法：$.get(URL,callback);
3. post()：语法：$.post(URL,data,callback);

jq防止和其它框架冲突

1. $.noConflict()：释放对 $ 标识符的控制，返回对 jQuery 的引用，可以把它存入变量，以供稍后使用。
2. 把$作为变量传递给ready方法，这样就可以在函数体内使用$，不过函数体外还是只能使用"jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

资料：菜鸟教程：jQuery实例