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:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标(相对于整个屏幕)