JQuery的学习总结

JQuery

• 选择器
• 操作元素的方法
• css样式的操作
• 事件
• 效果方法
• ajax
• 零碎的一些知识点

选择器

• 层级选择器

  • $(“m n”) 后代选择器，选择m元素内部后代名称为n的元素
  • $(“m~n”) 兄弟选择器，选择m元素后所有的同级n元素

• 伪类选择器

  • :not() 选择器选取除了指定元素以外的所有元素。
  • :odd 选择器选取带有奇数索引号的每个元素（比如：1、3、5 等等）。索引号从 0 开始。
  • :even 选择器选取带有偶数索引号的每个元素（比如：2、4、6 等等）。索引号从 0 开始。
  • :first 选择器选取第一个元素。
  • :eq() 选择器选取带有指定 index 值的元素。index 值从 0 开始，所以第一个元素的 index 值是 0（不是 1）。

• 子元素伪类选择器

  • first-child：选择父元素的第1个子元素。
  • :nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。
  • :nth-of-type(n) 选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素。

• 内容伪类选择器

  • :contains() 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
  • :has() 选择器选取所有包含一个或多个元素在其内的元素，匹配指定的选择器。

• 表单选择器

  • :checkbox 选择器选取类型为 checkbox 的 元素。
  • :input 选择所有 元素。
  • :selected 选择器选取被选择的 元素。
  • :checked 选择器选取所有选中的复选框或单选按钮。
  • :image 选择器选取类型为 img 的 元素。

属性选择器这里就不介绍了，上述的应该够用了，实在需要用到属性选择器，可以到时候查阅，也比较简单、易学。

操作元素的方法

• append() 方法在被选元素的结尾插入指定内容。
• prepend() 方法在被选元素的开头插入指定内容。
• after() 方法在被选元素后插入指定的内容。
• before() 方法在被选元素前插入指定的内容。
• detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。该方法会保留移除元素的副本，允许它们在以后被重新插入。
• empty() 方法从被选元素所有子节点和内容。注意：该方法不会移除元素本身，或它的属性。
• remove() 方法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。

操作元素的属性

• val() 方法返回或设置被选元素的 value 属性。
• text() 方法设置或返回被选元素的文本内容。
• html() 方法获取和设置某个元素中的html内容。
• scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
• offset() 方法设置或返回被选元素相对于文档的偏移坐标。
• attr() 方法设置或返回被选元素的属性值，用于检索 HTML 属性。
• prop() 方法设置或返回被选元素的属性和值，prop() 方法应该用于检索DOM属性值。
• removeAttr() 方法从被选元素移除一个或多个属性。
• removeProp() 方法移除由 prop() 方法设置的属性。不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。请使用 removeAttr() 方法代替。

css样式的操作

• css() 方法设置或返回被选元素的一个或多个样式属性。
• addClass() 方法向被选元素添加一个或多个类名。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
• hasClass() 方法检查被选元素是否包含指定的类名称。
• removeClass() 方法从被选元素移除一个或多个类。注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
• toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

节点的遍历

• eq() 方法返回带有被选元素的指定索引号的元素。索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
• filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。
• not() 方法返回不符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中返回，符合条件的元素将被移除。
• children() 方法返回被选元素的所有直接子元素。该方法只沿着 DOM 树向下遍历单一层级。
• find(filter) 方法返回被选元素的后代元素。该方法沿着 DOM 元素的后代向下遍历，直至最后一个后代的所有路径（）。注意：filter 参数在 find() 方法中是必需的，这与其他树遍历方法不同。提示：如需返回所有的后代元素，请使用 “*” 选择器。
• next() 方法返回被选元素的后一个同级元素。同级元素是共享相同父元素的元素。注意：该方法只返回一个元素。
• parent() 方法返回被选元素的直接父元素。该方法只沿着 DOM 树向上遍历单一层级。
• parents() 方法返回被选元素的所有祖先元素。该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（）。
• siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

事件

• 当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
• 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。该事件通常与 mouseleave 事件一起使用。
• 当鼠标指针位于元素上方时，会发生 mouseover 事件。与 mouseenter 事件不同，mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发，mouseenter 事件只有在鼠标指针进入被选元素时被触发。提示：该事件通常与 mouseout 事件一起使用。
• hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。该方法触发 mouseenter 和 mouseleave 事件。
• 当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。
• 当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
• 当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法，ready() 方法规定当 ready 事件发生时执行的代码。
• on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
• off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
• one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。
• 当键盘键被按下时发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

效果方法

• hide() 方法隐藏被选元素。提示：这与 CSS 属性 display:none 类似。
• show() 方法显示隐藏的被选元素。
• fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。
• fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。
• fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
• slideDown() 方法以滑动方式显示被选元素。
• slideUp() 方法以滑动方式隐藏被选元素。
• slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
• delay() 方法对队列中的下一项的执行设置延迟。
• animate() 方法执行 CSS 属性集的自定义动画。
• stop() 方法为被选元素停止当前正在运行的动画。

ajax

$.ajax({
	type:"post",
	url:"",
	data:{name:"zhangsan"},
	success:fn,
	dataType:"json"
});

$.get(url,[data],[callback],[type]);
data:请求参数
callback:回调函数
type:响应结果的类型

零碎的一些知识点

• index() 方法返回指定元素相对于其他指定元素的 index 位置。
• each() 方法为每个匹配元素规定要运行的函数。
• $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

参考：w3cschool文档