jquery--DOM操作基础

元素的访问

1. 元素属性操作

   • 获取：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);

2. 内容操作

   • html()；获取元素的html内容
     • 　　html(val)；设置元素的html内容
   • text()；获取文本内容
     • 　　text(val)；设置文本内容

3. 元素值操作

   • val()；获取元素的value值
   • val(value)；设置元素的value值
   • val().join(",")；获取select标记中多项值
   • val(array)；数组形式，设置元素被选中

4. 元素样式操作

   • 直接设置；.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类

创建元素节点

1. 动态创建页面元素

   • 　$(html)；参数html是动态创建dom元素的html标记字符串；var $div = $("<div>hello world</div>")；
     • 　tips：var $str 和 var str 区别；$是jquery的一个标识，作为jquery的实例变量；两者本身意义一样；

2. 复制节点

   • 　　clone()；仅仅复制元素
   • 　　clone(true)；复制元素，包括元素的行为方法

3. 替换节点

   • replaceWith(content)；替换内容
   • replaceAll(selector)；替换的元素，替换后的元素的事件消失；

4. 遍历元素

   • 　　each(function(index){...})；使用this可获取该元素的属性或设置某属性
     • 　　$("img").each(function(index){ this.title = this.alt; });

5. 删除元素

   • empty()；清空页面元素
   • remove()；删除页面元素，传入参数，可删除某指定元素

　　　　

节点插入

1. 内部插入

   • 　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中

2. 外部插入

   • 　after(content)；向元素外部的后面插入内容
     • 　　after(function)；向元素外部的后面插入函数返回的内容
   • before(content)；向元素外部的前面插入内容　
   • insertAfter() ；将元素的内容插入到另一个元素的后面
   • insertBefore()；

　　　　　　

事件

1. 事件机制

   • 事件触发
     • 　捕获阶段
     • 冒泡阶段：子元素触发事件后，回向父元素或上级元素传递，使得父级的事件也被触发；
       • 　阻止冒泡方法：.stopPropagation()或 return false;

2. 事件载入

   • ready()；$(document).ready(function(){...});
   • ready()和onLoad()的区别：
     • ready()；页面dom元素加载完成执行
     • onLoad()；全部元素加载完成执行
   • 简写：$(function(){...});

3. 事件绑定

   • 直接绑定事件；$(".btn").click(function(){...});
   • bind()绑定；bind(type,[data],func)；type-事件类型，[data]-event.data属性传递给事件对象，func-处理函数
     • $(".btn").bind("click",function(){...});
   • bind()绑定多个事件；
     • $(".btn").bind({focus:function(){...},change:function(){...}})；

4. 切换事件

   • hover(over，out)；浮动切换，鼠标移出移进来样式改变；
     • 　$("title").hover(function(){alert("over")}，function(){alert("out")});
   • toggle(func1,func2,func3,...)；单击依次调用函数

5. 移除事件

   • unbind(type，func)；移除绑定事件，该事件之前已经触发的行为结果不会被移除
     • 无参，移除所有绑定事件　
     • 有type，移除type事件
     • 有func，移除指定type中的func函数

6. 鼠标事件

   • mouseenter()；经过被元素触发，不冒泡　　
   • mouseleave()；移开被选元素触发，不冒泡
   • mouseover()；经过被选元素以及子元素都触发
   • mouseout()；移开被选元素以及子元素触发
   • mousemove()；移入被选元素内后，在移动1px都会触发

7. 其他事件

   • one（type,[data],func）；为所选择的元素绑定，但只触发一次
   • trigger(type,[data])；dom加载后自动触发指定类型事件

　　　　

jquery动画和特效

1. 显示，隐藏

   • show();可加入默认字符slow,normal,fast改变速度，也可直接传数值，可有回调函数
   • hide();
     • 　$("div").show(2000,function(){...});

　　　　

• toggle()；切换元素样式，可见/隐藏
  • 　　toggle()；
  • 　　toggle(switch)；布尔值判断
  • 　　toggle(speed,func)；

2. 滑动，改变元素的高度

   • slideUp(speed,func);　
   • slideDown(speed,func);
   • slideToggle（speed,func）；切换滑动

3. 淡入淡出，改变元素的透明度

   • fadeIn()；淡入，即显示
   • fadeOut()；淡出，即隐藏
   • fadeTo(speed,opacity，func)；改变透明度到opacity值

4. 自定义动画

   • animate()；