jQ:jQurey 笔记 (19/08/06版)

// 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>


评论