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元素内容所有节点 内容和标签
});
})；
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
获取输入的内容
val([value]) 设置或返回表单字段的值 一般是文本框内的内容
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
$('selector').attr("href") 获得属性值,attr 里面的参数 是你需要获得属性的名称
添加元素
添加新的 HTML内容
append() 在被选元素内部的结尾插入指定内容
prepend() 在被选元素内部的开头插入指定内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
$('p').append('<h1>这是插入的内容而且还有标签呢</h1>') 方法在被选元素的结尾插入内容
$('ul').append('<li>这也是一种动态插入的方法啊</li>')
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
删除元素
$('#div1').remove(); 删除被选中元素(及其子元素)
$(#div1).empty(); 被选元素中删除子元素
$('#div1').remove('.class_name'); 删除指定子元素
操作CSS
addClass() 向被选元素添加一个或多个类 不会删除原来已经有的classname
removeClass() 从被选元素删除一个或多个类 不会删除未指定的classname
toggleClass() 对被选元素进行添加、删除类的切换操作
css() 设置或返回样式属性
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
$('button').click(function(){
$('h1,h2,p').addClass('blue');
$('div').addClass('important');
});
$('button').click(functio(){
$('#div1').addClass('important blue')
});
返回css属性
css('propertyname')
$('p').css('background-color');返回的是rgb(x,x,x)
设置css属性
css('propertyname','value')
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
尺寸
width() 方法设置或返回元素的宽度(不包括内边距，边框或外边距)
height() 方法设置或返回元素的高度(包括内边距，边框或外边距)
innerWidth() 方法返回元素的宽度 包括内边距
innerHeight() 方法返回元素的高度 包括内边距
outerWidth() 方法返回元素的宽度 包括内边距 和边框
outerHeight() 方法返回元素的高度 包括内边距 和边框
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）；
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
遍历
遍历 祖先 用于向上遍历DOM树
parent() 方法返回被选元素的直接父元素 该方法只会向上一级对DOM树进行遍历
parents([filter]) 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素<html> [filter] 可选参数 可以添加 过滤条件
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});
});
添加过滤
$(document).ready(function(){
$('span').parents('ul').css({'style'});
});
//返回介于span 和 div 之间的 元素
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
遍历后代
children([filter]) 方法返回被选元素的所有直接子元素 该方法只会对下一级对DOM 树进行遍历 [filter] 添加过滤条件
find([filter]) 方法返回被选元素的后代元素，一路向下到最后一个后代 [filter]过滤条件
$(document).ready(function(){
$('div').children.css({'style 给选中元素添加的样式'});
});
$(document).ready(function(){
$('div').children('p.className').css({'样式','color':'red'});
});
$(document).ready(function(){
$('div').find('span');
});
$(document).ready(function(){
$("div").find('*');
});
遍历 同胞(siblings)
同胞拥有相同的父元素
siblings([filter]) 方法返回被选元素的所有同胞(兄弟)元素 filter 过滤条件
next() 方法返回被选元素的下一个同胞元素 不包括自己
nextAll() 方法返回被选元素的所有跟随的同胞元素 不包括自己
nextUntil() 方法放回介于给定参数之间的所有跟随的同胞元素 and h2 和 h6 之间的同胞元素 但是不包含自己
prev()
prevAll()
prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
//返回h2 所有的兄弟元素
$(document).ready(function(){
$('h2').siblings();
});
//返回h2 所有兄弟元素 并且 类型是p标签
$(documnet).ready(function(){
$("h2").siblings('p');
});
//返回h2 的下一个兄弟元素，就是平级的下一个元素
$(document).ready(function(){
$('h2').next().css({'name':'value'});
});
//放回所有 同胞元素 不包含自己
$(document).ready(function(){
$('h2').nextAll().css('style');
});
// 方法放回介于给定参数之间的所有跟随的同胞元素 and h2 和 h6 之间的同胞元素 但是不包含自己
$(document).ready(function(){
$('h2').nextUntil('h6');
});
遍历 过滤
它们允许您基于其在一组元素中的位置来选择一个特定的元素。
first() 方法返回被选元素的首个元素
last() 方法返回备选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
允许您选取匹配或不匹配某项指定标准的元素。
filter() 方法允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素 相当于filter 取反操作
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
// 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');
});
Jquery 遍历 获取设置 效果