JQuery 3

each()遍历元素
each(callback)方法主要用于对选择器中的元素进行遍历，接受一个函数作为参数，该函数接受一个参数，指代元素的序号。
$("img").each(function(index){
  this.title = "这是第" + index + "幅图，id是：" + this.id;
 }

 

标记的属性
获取属性的值
attr(name)，获取元素集中第一项的属性值
$("em").attr("title"); //获取第一个<em>元素的title属性值

设置属性值
attr(name,value)
$("a[href^=http://]").attr("target","_blank")页面中所有的外部超链接都在新窗口中打开
attr(name,fn)，让函数作为参数，使属性的值根据不同的元素有规律的变化
attr方法接受属性列表
$("img").attr({
  src: "06.jpg",
  title: "紫荆公寓",
  alt: "紫荆公寓"
 });

删除属性
removeAttr(name)相当于HTML标记中不设置该属性

设置元素的样式
添加、删除、动态切换CSS类别
添加CSS类别addClass(names),添加多个类别，类别之间用空格分离
删除CSS类别removeClass(names)
切换CSS类别toggleClass(name)，只能设定一种CSS类别
$(function(){
 $("p").click(function(){
  //点击的时候不断切换
  $(this).toggleClass("highlight");
 });
});

 

prev()前一个标记
next()后一个标记

click(function(){})添加click()事件
mouseover事件，mouseout事件

 

直接获取、设置样式
css(name)获取某种样式风格的值
css(name,value)设置元素的某种样式

设置透明度，兼容性很好
$(this).css("opacity","0.5");

hasClass(name)判断某个元素是否设置了某个CSS类别,返回true false
$("li:last").hasClass("myClass")

 

处理页面的元素
html()相当于获取节点的innerHTML属性
html(text)设置innerHTML
text()获取元素的纯文本
text(content)设置纯文本

 

移动和复制元素（单个移动，多个复制）
append()
$("p:eq(1)").append("<b>直接添加</b>");//指定位置直接添加HTML代码
$("p").append($("a"));//用来添加固定节点
$("p").append($("a:eq(0)")); //添加目标为多个<p>，复制
$("p:eq(1)").append($("a:eq(1)")); //添加目标是唯一的<p>，移动
appendTo(target)将元素添加为指定目标的子元素
$("img:eq(0)").appendTo($("p")); //将第一个img添加到所有的<p>中
prepend()、prependTo(),将元素添加到目标的所有元素之前
before()、insertBefore()、after()、insertAfter(),用来元素直接添加到某节点之前或之后将 

 

删除元素
$("p").empty(); //删除所有子元素
$("p").remove(":contains('大')"); //删除包含了“大”的<p>标记
$("p:contains('大')").remove();//将要删除的对象确定后一起删除，比上面的好

 

克隆元素
clone()，避免了即使目标对象只有一个也执行复制操作
$("img:eq(1)").clone().appendTo($("p:eq(0)"));
clone(true)，除了克隆元素本身外，所携带的事件方法将一块被复制
$("input[type=button]").click(function(){
  //克隆自己，并且克隆点击的行为
  $(this).clone(true).insertAfter(this);
 });

 

处理表单元素的值

表单对象属性过滤选择器

选择器 描述 返回 示例

:enabled 选择所有可用元素 集合元素 $("#form1 :enabled");选取ID为"form1"的表单内的所有可用元素

:disabled 选取所有不可用元素 集合元素 $(#form2 :disabled);选取id为"from2"的表单内的所有不可用元素

:checked 选取所有被选中的元素 集合元素 $("input:checked")选取所有被选中的<input>元素

:selected 选取所有被选中的选项元素（下拉）集合元素 $("select:selected");选取所有被选中的选项元素

 

表单对象属性过滤示例：
改变表单内可用<input>元素的值    $("#form1  input:enabled").val("这里变化了");
改变表单内不可用<input>元素的值  $("#form1  input:disabled").val("这里变化了");
获取多选框选中的个数             $("input:checked").length;
获取下拉框选中的内容             $("select  :selected").text();

:input          $(":input")选取所有<input>,<textarea>.<select>和<button>元素

 

获取表单元素的值val()
$("[name=radioGroup]:checked").val()//获取name属性为radioGroup的表单元素中被选项的value值
设置表单元素的值val(sValue)
$("input[type=text]").val(sValue); //赋给文本框

当元素的值发生改变时，会发生change事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

处理页面中的事件
绑定事件监听,语法bind(eventType,[data],fn)
bind()对事件进行绑定，相当于IE浏览器的attachEvent()和标准DOM的addEventListener()
eventType为事件类型：blur，focus，load，resize，scroll，unload，click，dblclick，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，change，select，submit，keydown，keypress，keyup，error
[data]为可选参数，用来传递一些特殊的数据供监听函数使用
fn为事件监听函数
多个事件用空格分离
特殊的事件类型可以直接用事件名称作为绑定函数，接受参数为监听函数（除了mouseenter，mouseleave之外都可以）
$("p").click(fn(){})
one()只执行一次的事件监听函数

 

移除事件监听
$("div").unblind()移除div的所有事件
$("p").unblind("click")删除p标记的所有单击事件
unblind(eventType,fn)移除某个指定的事件，注之前的fn不能被定义为匿名函数，应该如下
$("img").bind("click",fnMyFunc1 = function(){ //赋给函数变量
  })
$("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1

 

触发事件
例如希望页面加载后自动先单击一次来运行监听函数，单击某个按钮时其他按钮也被同时单击
trigger(eventType)
$("input:eq(0)").trigger("click"); //触发按钮1的点击事件,也相当于$("input:eq(0)").click()

 

实现单击事件的动态交替
toggle(fn,fn)
每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

hover(over,out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

 

附：Event属性说明
JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它，但有些时候它还是它还是有作用的。如获知触发时用户的环境（是否按了shift etc）。每个浏览器对event都有不同的地方，Jquery对Event做了标准化所以可以放心用。
target   引起事件的DOM对象，可以在事件冒泡的时候判断是否是事件源头(compare event.target to this)
preventDefault():这个方法被调用，则原有事件就被忽略，阻止事件的默认行为。（例如 clicked link就不会去新的Url了）
stopPropagation():让Jquery阻止事件向上冒泡
Data:  如果事件中还有EventData你就可以用这个属性获得对应Eventdata数据了。
ctrlKey: 类型: Boolean, 说明: Ctrl 键是否按下
shiftKey: 类型: Boolean, 说明: Shift键是否按下
altKey: 类型: Boolean, 说明: Alt 键是否按下
charCode: 类型: Number, 说明: 最后响应键盘按键的 charCode 值
keyCode: 类型: Number, 说明: 最后响应键盘按键的 keyCode 值 （a和A的值是一样的65）
button: 类型: Number, 说明: 按下的鼠标键, 左键:1, 右键:2, 中键:4
which: 类型: Number, 说明: 最后响应的是哪个按键, 如果是键盘按键则等于 charCode || keyCode; 如果是鼠标按键,左键:1, 右键:3, 中键2
type: 事件名称，如click、mouseover等
currentTarget:冒泡前的当前触发事件的DOM对象, 等同于this.
result: 上一个事件处理函数返回的值
pageX:  鼠标的left属性，相对于page （坐标）
pageY:  鼠标的top属性，相对于page （坐标）
relatedTarget:对于鼠标事件, 标示触发事件时离开或者进入的DOM元素
screenX/Y:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标（相对于整个屏幕）