// js DOM// 对象获取document.getEle...
// js DOM
// 对象获取
document.getElementsByTagName("li")[2].style.color="red";//DOM获取第三个li标签
$('li').css("color","red");//jQ获取所有li标签
$(document.getElementsByTagName('li')[2]).css("color","blue");//jQ通过DOM获取第三个li标签
$('li').get(0).style.color="yellow";//jQ转DOM对象，因此需要使用原生DOM方式；0为第1个
$('li')[2].style.color="yellow";//jQ转DOM对象，因此需要使用原生DOM方式；2为第3个
$("img").attr("alt");//获取img标签的alt的值
$("img").attr("alt","小可爱")//修改img标签的alt的值
$("img").attr("src","2.jpg")//修改img标签的src的值
$("img").removeeAttr("alt")//删除img标签的alt属性
$("img").css("width")//获取img标签内容的宽度
$("img").css("width","500px")//修改img标签的宽度为500px
$("img").css({"width":"400px","border-radius":"50%"})//批量修改/新增CSS
$("img").css("width",function(i,curval){return Math.round(1.5*parseInt(curval))})//修改值为原值的1.5倍
$("img").addClass("img-1")//给img标签新增calss
$("img").removeClass("img-1")//给img标签删除calss
$("img").toggleClass("img-1")//给img标签添加/删除calss，若有则删除，若无则添加
$("img").hasClass("img-1")//判断img标签是否有指定class
$("img").is("img-1")//判断img标签是否有指定class
$("li").eq(1).text()//获取指定li的文本
$("li").eq(2).text("你猜")//修改指定li的文本
$("li").eq(3).html()//获取指定li的html内容
$("li").eq(3).html("<a href='#'>你猜</a>")//修改指定li的html内容
$("[style]")//获取所有带有style的对象
$("[alt='图片']")//获取alt属性为图片的所有对象
$("[alt^='图片']")//获取alt属性为图片开头的所有对象
$("[alt$='图片']")//获取alt属性为图片结尾的所有对象
$("[alt!='图片']")//获取alt属性不为图片的所有对象
$("[alt*='图片']")//获取alt属性带有图片的所有对象
$("[alt~='图片']")//获取alt属性为单词(图片)(单词前后空格)的所有对象
$("[alt][class]")//获取同时具有class属性和alt属性的所有对象
$("input:text")//获取所有input类型为text的对象
$("input:password")//获取所有input类型为password的对象
$("input:checkbox")//获取所有input类型为checkbox的对象
$("input:checked")//获取所有input类型为checked的对象
$(":button")//获取button按钮的对象
$(":disable")//获取所有禁用元素的对象
$("li:eq(0)")//第1个li
$("li:eq(4)")//索引大于5的其他个li
$("li:lt(2)")//索引小于2的li
$("li:first")//第一个li
$("li:last")//最后一个li
$("li:even")//偶数行
$("li:2n")//偶数行
$("li:odd")//奇数行
$("li:2n+1")//奇数行
$("li:nth-child(n)")//全选
$("li:nth-child(3)")//第三个li
$("li *")//li标签下所有元素
$("li a")//li标签下所有a标签
$("li>a")//li标签下子元素a标签
$("#active~*")//id为active的标签后面（前面的不包含）所有兄弟元素（不含子元素）
$("#active~li")//id为active的标签后面（前面的不包含）所有兄弟元素中的li元素
$("#active+li")//id为active的标签后面（前面的不包含）所有兄弟元素中的第一个li元素
$("h1,h2,h3")//同时选择h1标签、h2标签、h3标签
$("li").first()//第一个li元素
$("li").last()//最后一个li元素
$("li").eq(3)//第四个li元素
$("li").slice(1,4)//第2个到第4个li元素（0为第一个，不包含结束范围4的第五个）
$("li").slice(1,)//第2个到最后一个li元素全部选中
$("li").slice(-2)//最后2个li元素全部选中
$("li").filter()//选择li元素与自身属性相关的元素
$("li").filter(".red") == $("li.red")//两个选择器选中的元素相同
$("li").filter(function(index){return index%2 == 0;}) == $("li:even")//filter的值可以为function函数，其参数就是索引值
$("li").not()//选择li元素与自身属性不相关的元素
$("li").not(function(index){return index%2 == 0;}) == $("li:odd")//
$("li").find("strong")//查找li元素下strong元素
$("#li").next()//获取id为li的下一个元素
$("#li").nextAll()//获取id为li后面的所有元素
$("#li").prev()//获取id为li的前一个元素
$("#li").prevAll()//获取id为li的前面所有元素
$("li").parent()//获取当前元素的父元素
//HTML文档加载完成就执行
$(document).reday(function{
//img图片点击事件
$("img").click(function(ecent){
//弹出提示框--对象为当前点击的图片--弹出内容为图片的alt属性
alert($(this).attr("alt"));
})
//id=logo的元素绑定点击事件
$("#logo").bind("click",function(){
//append():将新元素添加到当前jQuery对象中
$(this).append("(这是logo)");//添加文本：(这是logo)
//after():将新元素添加到当前对象的后面
$(this).after("<p style='color:red'>你看的到</p>");//在#logo标签后面添加
//prepend():将新元素添加到当前元素的前面，它还在当前元素中
$(this).prepend('<a href="#">点击</a>');//在#logo标签的文本前，添加元素
//before()：将新元素添加到当前元素的前面，它不在当前元素中
$(this).before('<a href="#">点击</a>');//在#logo标签前新增元素
//replaceWith():替换当前元素
$(this).replaceWith('<h2>'+$(this).text()+'</h2>');//替换标签为h2，内部文本不变
$(this).replaceWith(function(){
return "<h2 style='color:red'></h2>"
})
})
//当页面的body元素加载完成后向页面添加一个div元素
$(document.body).append("<div id='link'>友情链接</div>");
// 将当前页面中的所有a元素，全部克隆到新创建的div元素中
$("a").clone().appendTo('#link');
//给每个a标签后添加换行符
$("#link>a").after("<br>");
//包装元素
$("h2").wrap("<i></i>");//选中h2标签，在h2标签前添加<i>在h2后添加</i>
$("h2").wrapInner("<span style='color:red'></span>");//选中h2标签，在h2标签内添加span标签，用span标签包含文本
$("h2.h2").wrapAll("<a href=''></a>");//将h2标签中包含class为h2的标签组合起来，并在组合外部添加a标签
$("h2.h3").wrapAll("<a href=''><div></div></a>");//将h2标签中包含class为h2的标签组合起来，并在组合外部添加a标签和子标签div，原内容在div内部
//删除元素
//remove()：无参数为移除当前选中元素的所有元素
$(document.body).remove();//删除body元素
//remove(selector)只移除选中的元素，选中div中所有元素中删除p元素
$("div *").remove("p");
//empty():删除选中元素中所有的子元素，当前元素保留
$("div").empty();
//事件绑定
$("h3").text($("img").attr("alt"))
//img点击事件
$("img").click(function(ecent){
$(this).attr({"src":"../img/img01.jpg","alt":"更换图片1"})；//点击后修改src和alt值
$("h3").text($(this).attr("alt"));//点击后修改h3标签的文本内容
})
//点击添加事件
$("button").click(function(ecent){//点击button按钮
$("div").html("<img id='img02' src='../img/img02.jpg' alt='更换图片2' />");//修改div的html文本为……
$("#img02").bind("click",function(){//绑定id=img02的点击事件
$(this).after("<h3>"+$(this).attr("alt")+"</h3>");//在当前对象后添加指定html字符串
})
$(this).unbind();//解除绑定事件
$(this).unbind('click');//解除绑定的点击事件
})
//隐藏或显示
$("#btn").click(function(event){
if($(this).text()=='显示简介'){
$("#content").show();//原为display none，show（）为显示；1000ms为1s
$("#content").show(2000);//原为display none，show（）为显示；1000ms为1s
$("#content").show("slow");//慢速
$("#content").show("fast");//快速
$("#content").show("fast",function(){//内容显示完成后，执行回调函数
$("h3").css("color","red");//颜色变红
$("#btn").text("隐藏选项");//修改btn文本--与下方相同
});//快速
$(this).text("隐藏简介");//修改btn文本--与上方相同
}else{
$("#content").hide();//hide为隐藏
$(this).text("显示简介");
}
})
//淡入淡出//渐隐渐现
$("#fadeIn").click(function(event){
$("#fadeIn img:first").fadeIn("fast");//第一张图快速淡入
$("#fadeIn img:eq(1)").fadeIn("slow");//第二张图慢速淡入
$("#fadeIn img:last").fadeIn(5000,function(){//第三张图5秒淡入
alert ("图片淡入完成");//淡入完成后执行回调函数
});
})
$("#fadeOut").click(function(event){
$("#fadeOut img:first").fadeOut("fast");
$("#fadeOut img:eq(1)").fadeOut("slow");
$("#fadeOut img:last").fadeOut(5000,function(){
alert("图片淡出完成");
});
})
$("#fadeToggle").click(function(event){
$("#fadeToggle img:first").fadeToggle("fast");
$("#fadeToggle img:eq(1)").fadeToggle("slow");
$("#fadeToggle img:last").fadeToggle(5000,function(){
alert("图片淡入/淡出完成");
});
})
//图片褪色//透明度渐变
$("#fadeTo").click(function(event){
$("#fadeTo img:first").fadeTo("fast",0.6);//褪色/透明度0.6/60%
$("#fadeTo img:eq(1)").fadeTo("slow",0.4);//褪色/透明度0.4/40%
$("#fadeTo img:last").fadeTo(5000,0.2,function(){//褪色/透明度0.2/20%
alert("图片褪色完成");//褪色完成后执行回调函数
});
})
//滑动特效：展开与收缩
$("#btn").bind("click",function(){//绑定点击事件
$("#content").slideDown("slow");//由上向下滑动隐藏
$("#content").slideUp("slow");//由下向上滑动隐藏
$("#content").slideToggle("slow");//由下向上/由下向上滑动隐藏/显示切换
// $("#content").slideLeft("slow");//由右向左滑动隐藏--未测试
// $("#content").slideRight("slow");//由左向右滑动隐藏--未测试
$("#content").slideDown("slow",function(){//由上向下滑动-调用回调函数
$("#content img").fadeOut("slow",function(){//图片淡出--调用回调函数
$(this).attr("src","../img/002.jpg").fadeIn("slow");//修改图片src属性--图片淡入
$("#content h3").css("color","red");//修改颜色
// $(this).attr("src","../img/002.jpg").fadeIn("slow",function(){//可能类似，但未测试
// $("#content h3").css("color","red");
// })
})
});
})
// <style>
// #img{width:0;opacity:0;}
// #content{display:none;}
// </style>
$("#btn1").click(function(event){//#btn1点击事件
$("#img").animate(//#img图片动画属性对象--有两个对象
{//第一个对象--必选--只支持css属性且属性值为数值，不支持字体颜色
width:270,//由CSS宽度0动画到270，单位默认为像素
opacity:1,//由css透明度0动画到透明度1
"border-radius":25//圆角25，由于中间有-连接符，因此需要加引号
},{//第二个对象--可选--动画选项对象
duration:4000,//动画持续时间--可选
complete:function(event){//动画完成后所需要执行的回调函数--可选
$(this).css("box-shadow","5px 5px 2px #444");//当前对象css阴影边框
$("#content").slideDown(3000,function(){//#content向下滑动-3秒--执行回调函数
$(this).children("h3").css({"font-size":"20px","color":"red"});//#content h3的css调整
});
}
});
});
})<body>
<button type="button" name="button">按钮</button>
<ul>
<li>这是第01个li</li>
<li>这是第02个li</li>
<li>这是第03个li</li>
<li>这是第04个li</li>
<li>这是第05个li</li>
<a href="#">#</a>
<a href="#"></a>
</ul>
</body>
漠漠睡