speed: slow fast 毫秒隐藏 显示 $(selector).hide(speed,callback) 隐藏、 $(selector).show(speed,callback) 显示 $(selector).toggle(speed,callback) 切换之间的状态 callback 可选： 可以添加额外 执行 代码 可选的 callback 参数，具有以下三点说明： $(selector)选中的元素的个数为n个，则callback函数会执行n次 callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行 callback既可以是函数名，也可以是匿名函数 $('#hide').click(function(){ $('p').hide(); }); $('#show').click(function(){ $('p').show(); }); $('button').click(function(){ $('p').hide(1000); }); $('button').click(fuction(){ $('p').toggle(); });淡入淡出 $(selector).fadeIn(speed,callback) 用于淡入已隐藏的元素 $(selector).fadeOut(speed,callback) 用于淡出可见元素 $(selecort).fadeToggle(speed,callback) 用户切换淡入淡出效果 $(selector).fadeTo(speed,opacity,callback) 方法允许渐变为给定的不透明度 $('button').click(function(){ $('#div1').fadeIn(); $('#div2')/fadeIn('slow'); $('#div3').fadeInt('300') })； //用来淡出可见元素 $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });滑动 $(selector).slideDown(speed,callback) 用于向下滑动元素 $(selector).slideUp() 用于向上滑动元素 $(selector).slideToggle() 用于切换向下和向上滑动的效果 Sample: $("#p1").css("color","red") .slideUp(2000) .slideDown(2000);动画 $(selector).animate({params},speed,callback); 必须的params 参数定义形成动画的css 属性,多个属性之间可以用 ,(逗号) 隔开 $('div').animate({left:'250px',top:'50px'}) 这里的属性必须用小驼峰命名法书写 多个动画 $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); 或者这样写： $('div').animate({height:'200px',opacity:'0.4'}) }); $(selector).animate({params},speed,callback).stop();停止队列动画停止动画或效果，在他们完成之前$(selecctor).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此，默认地，stop() 会清除在被选元素上指定的当前动画。DOM 是 Document Objectt Model 文档对象模型 获取内容 -text() html() val() text([value]) 设置或返回所选元素的文本内容 html([value]) 设置或返回所选元素的内容(包含html标记) val([value]) 设置或返回表单字段的值 一般是文本框内的内容 $(document).ready(function(){ $('#btn1').click(function(){ alert($('#test').text());//获取p 元素内的文本 }); $('#btn2').click(function(){ alert($('#test').html());//获取p元素内容所有节点 内容和标签 }); })； 这是段落中的 粗体 文本。
获取输入的内容 val([value]) 设置或返回表单字段的值 一般是文本框内的内容 $(document).ready(function(){ $("button").click(function(){ alert("值为: " + $("#test").val()); }); }); $('selector').attr("href") 获得属性值,attr 里面的参数 是你需要获得属性的名称添加元素添加新的 HTML内容 append() 在被选元素内部的结尾插入指定内容 prepend() 在被选元素内部的开头插入指定内容 after() 在被选元素之后插入内容 before() 在被选元素之前插入内容 $('p').append('这是插入的内容而且还有标签呢
') 方法在被选元素的结尾插入内容 $('ul').append(' div (曾祖父元素)
- ul (祖父元素)
- li (父元素) span
div (祖父元素)
p (父元素) span
元素（索引号 1）： 允许您选取匹配或不匹配某项指定标准的元素。 filter() 方法允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 not() 方法返回不匹配标准的所有元素 相当于filter 取反操作 $(document).ready(function(){ $("div p").first().css("background-color","yellow"); });
欢迎访问我的主页
这是 div 中的一个段落。
这是另外一个 div 中的一个段落。
这是一个段落。
// last() $(documnet).ready(function(){ $('div p').last(); }); // 方法返回被选中元素中带有指定索引号的元素 //注意 索引号 开始值为 0 $(document).ready(function(){ $('p').eq(1).css('backgrond-color':'yellow'); }); // 规定一个标准，凡是不符合标的的元素 会被集合中删除掉 $(document).ready(function(){ $('p').filter('.className 或其他').css('background-color':'orange'); })； //not() 此方法 相当于 filter() 方法的取反操作 $(document).ready(function(){ $('p').not('.className'); });