元素的访问
-
元素属性操作
- 获取:attr(name);$("#my").attr("src");
- 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg");
- 多个属性;attr({key1:value1,key2:value2});$("#myImg").attr({src:"images/1.jpg",title:"示例图片"});
- 函数;attr(key,function(index){...});index是当前元素的索引,函数可返回字符串作为元素的属性值
- 删除:removeAttr(name);
-
内容操作
- html();获取元素的html内容
- html(val);设置元素的html内容
- text();获取文本内容
- text(val);设置文本内容
- html();获取元素的html内容
-
元素值操作
- val();获取元素的value值
- val(value);设置元素的value值
- val().join(",");获取select标记中多项值
- val(array);数组形式,设置元素被选中
-
元素样式操作
- 直接设置;.css(name,value);name为样式名,value为对应的参数值;$("p").css("font-size","16");
- 增加css类;addClass(classname);$("div").addClass("clsDiv");
- addClass(class1 class2 ...);多个类,空格隔开
- 类别切换:toggleClass(name);单击切换,再单击恢复
- 删除类:removeClass();移除所有类别
- removeClass(class);移除元素的某一个class类
创建元素节点
-
动态创建页面元素
- $(html);参数html是动态创建dom元素的html标记字符串;var $div = $("<div>hello world</div>");
- tips:var $str 和 var str 区别;$是jquery的一个标识,作为jquery的实例变量;两者本身意义一样;
- $(html);参数html是动态创建dom元素的html标记字符串;var $div = $("<div>hello world</div>");
-
复制节点
- clone();仅仅复制元素
- clone(true);复制元素,包括元素的行为方法
-
替换节点
- replaceWith(content);替换内容
- replaceAll(selector);替换的元素,替换后的元素的事件消失;
-
遍历元素
- each(function(index){...});使用this可获取该元素的属性或设置某属性
- $("img").each(function(index){ this.title = this.alt; });
- each(function(index){...});使用this可获取该元素的属性或设置某属性
-
删除元素
- empty();清空页面元素
- remove();删除页面元素,传入参数,可删除某指定元素
节点插入
-
内部插入
-
append(content);插入content内容
- append(function(index,html){...});插入函数返回的内容;index是对象索引,html是元素原来的html
- $("div").append(relHtml);function relHtml (){ var $str = "<p>hello world</p>"; return $str;}
- appendTo(content);将方法前部分内容插入到后部分中
- $("span").appentTo($("div"));即将span的内容插入到div中
-
-
外部插入
- after(content);向元素外部的后面插入内容
- after(function);向元素外部的后面插入函数返回的内容
- before(content);向元素外部的前面插入内容
- insertAfter() ;将元素的内容插入到另一个元素的后面
- insertBefore();
- after(content);向元素外部的后面插入内容
事件
-
事件机制
- 事件触发
- 捕获阶段
- 冒泡阶段:子元素触发事件后,回向父元素或上级元素传递,使得父级的事件也被触发;
- 阻止冒泡方法:.stopPropagation()或 return false;
- 事件触发
-
事件载入
- ready();$(document).ready(function(){...});
- ready()和onLoad()的区别:
- ready();页面dom元素加载完成执行
- onLoad();全部元素加载完成执行
- 简写:$(function(){...});
-
事件绑定
- 直接绑定事件;$(".btn").click(function(){...});
- bind()绑定;bind(type,[data],func);type-事件类型,[data]-event.data属性传递给事件对象,func-处理函数
- $(".btn").bind("click",function(){...});
- bind()绑定多个事件;
- $(".btn").bind({focus:function(){...},change:function(){...}});
-
切换事件
- hover(over,out);浮动切换,鼠标移出移进来样式改变;
- $("title").hover(function(){alert("over")},function(){alert("out")});
- toggle(func1,func2,func3,...);单击依次调用函数
- hover(over,out);浮动切换,鼠标移出移进来样式改变;
-
移除事件
- unbind(type,func);移除绑定事件,该事件之前已经触发的行为结果不会被移除
- 无参,移除所有绑定事件
- 有type,移除type事件
- 有func,移除指定type中的func函数
- unbind(type,func);移除绑定事件,该事件之前已经触发的行为结果不会被移除
-
鼠标事件
- mouseenter();经过被元素触发,不冒泡
- mouseleave();移开被选元素触发,不冒泡
- mouseover();经过被选元素以及子元素都触发
- mouseout();移开被选元素以及子元素触发
- mousemove();移入被选元素内后,在移动1px都会触发
-
其他事件
- one(type,[data],func);为所选择的元素绑定,但只触发一次
- trigger(type,[data]);dom加载后自动触发指定类型事件
jquery动画和特效
-
显示,隐藏
- show();可加入默认字符slow,normal,fast改变速度,也可直接传数值,可有回调函数
- hide();
- $("div").show(2000,function(){...});
- toggle();切换元素样式,可见/隐藏
- toggle();
- toggle(switch);布尔值判断
- toggle(speed,func);
-
滑动,改变元素的高度
- slideUp(speed,func);
- slideDown(speed,func);
- slideToggle(speed,func);切换滑动
-
淡入淡出,改变元素的透明度
- fadeIn();淡入,即显示
- fadeOut();淡出,即隐藏
- fadeTo(speed,opacity,func);改变透明度到opacity值
-
自定义动画
- animate();