JQ

最新推荐文章于 2024-01-09 21:27:06 发布

人形BUG制造机

最新推荐文章于 2024-01-09 21:27:06 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/weixin_47655184/article/details/107325305

版权

在这里插入图片描述
1.一般格式
$function(){ alert("hello too"); }) 2.获取对象 1.JS：var one=document.getElementById("one"); 2.JQ：$ (".one")
3.对象转换
1.js转jq：var one=document.getElementById(“one”);
$(o n e) . h t m l = (" 777888 "); 2 . j q 转 j s ：$ ("#one")[0].innerHTML=“csss”;
4.css修饰
1.单修饰：(".two,a").css(“font-size”,“200px”);
2.多修饰：(".two,a").css(“font-size”：“200px”，“color”：“red”); 属性：属性值，属性：属性值…

5.获取对象
1.含有类筛选

// $("a[id]").css("color","red");//a标签含有id
		// $("a[id='one']").css("color","red");//a标签id等于one
		// $("a[id!='one']").css("color","red");//a标签id不等于one
		// $("a[id^='o']").css("color","red");//a标签id o开头
		// $("a[id$='o']").css("color","red");//a标签id  o结尾
		// $("a[id*='o']").css("color","red");//a标签id含有o
	2.后代筛选
		// $("li>a:first").css("font-size","70px");//li下第一个a
		// $("li>a:last").css("font-size","70px");//li下最后一个a
		// $("li>a:even").css("font-size","70px");//偶数行（从0开始）
		// $("li>a:odd").css("font-size","70px");//奇数行（从0开始）
		// $("li>a:eq(2)").css("font-size","70px");//li下第二个a（从0开始）
		// $("li a:gt(2)").css("font-size","70px");//li下第三个及以后的a
		// $("li a:lt(2)").css("font-size","70px");//li下第0和1个a
		// $("li :header").css("font-size","70px");//h标签
		// $("li :not(h1)").css("font-size","70px");//li下不是h1的，以外的标签
		// $("ul").children("li").css("color","red").css("font-size","45px");//选中ul标签下的所有子代li
		// $("ul").find("li").css("color","red").css("font-size","95px");//选中ul标签下的所有子代li
		// $(".two").siblings().css("color","red");//选中和id为two的同级兄弟标签（相同，同级不嵌套）
		// $(".two").siblings("li").css("color","red");//选中和id为two的li标签（相同，同级不嵌套）
		// $("p").parent().css("font-size","95px");//p的父标签
		// $(".two").next().css("font-size","95px");//选中和id为two的下一个标签
		// $(".two").prev().css("font-size","95px");//选中和id为two的上一个标签
		// $("li").eq(2).css("font-size","50px");//选中li中第3个标签（从0开始）

6.事件

$("#one").click(function(){
		$(this).addClass("one");
	});//点击添加style
	
	
	$("#two").mouseover(function(){
		$("#two").addClass("two");
	});//鼠标放置显示
	$("#two").mouseout(function(){
		$("#two").removeClass("two");
	});//鼠标移开显示
	
	
	$("*").keydown(function(){
		if(event.keyCode===13){
			alert("hello");
			return false;
		}	
	});//键盘按下回车（键盘码等于13）显示
	
	
	$("#four").focus(function(){
		$(this).addClass("four");
	});//聚焦显示
	$("#four").blur(function(){
		$(this).removeClass("four");
	});//失去焦距显示

6.动画

$("img").mouseover(function(){
	$(this).addClass("pic");
});//图片调用样式
$("img").mouseout(function(){
	$(this).removeClass("pic");
});//图片添加删除样式


$("#in").click(function(){
	$("#pic").fadeIn(2000);
});//渐现

$("#out").click(function(){
	$("#pic").fadeOut(2000);
});//渐隐

$("#in_out").click(function(){
	$("#pic").fadeToggle(2000);
});//渐隐渐现

$("#up").click(function(){
	$("#pic").slideUp(2000);
});//上滑
$("#down").click(function(){
	$("#pic").slideDown(2000);
});//下滑