jQuery可见性选择器语法、jQuery遍历语法、jQuery文本语法、jQuery事件语法、jQuery简单动画、

最新推荐文章于 2024-09-14 22:46:39 发布

John_Wick___

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量116

点赞数

文章标签： js css jquery html javascript

本文链接：https://blog.csdn.net/John_Wick___/article/details/119485314

版权

jQuery可见性选择器

案例

<body>
		<table>
			<tr style="display:none">
				<td>Value 1</td>
			</tr>
			<tr>
				<td>Value 2</td>
			</tr>
		</table>
	</body>
	<script src="jQuery.js"></script>	
<script>
//改变不可见元素的样式
$("tr:hidden").css({
backgroundColor="red"
})//Value 1 在控制台可以看到变红


//改变可见元素样式
$("tr:visible").css({
backgroundColor="red"

})// Value 2 变红
</script>

jQuery遍历

案例

<body>
		<div id="box0">
			0
			<p>00</p>
			<div id="">

			</div>
		</div>
		<div id="box1">
			1
			<p>11</p>
		</div>
		<div id="box2">
			2
			<p>22</p>
		</div>
		<div id="box3">
			3
			<p>33</p>
		</div>
		<div id="box4">
			4
			<p>44</p>
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
		</ul>
	</body>
	<script src="jQuery.js"></script>   
<script>
//兄弟节点的遍历
//1、next  下一个
$("#box2").next().css({
backgroundColor:"red"
})// box3 变红 p在box3里面所以内容也变红了


//2、nextAll  下一堆
$("#box2").next().css({
backgroundColor:"red"

})//因为是兄弟节点，所以与box2平级的单位，并且在box2下
//全部变色


//3、prev  上一个
$("#box2").prev().css({
backgroundColor:"red"

})// box1 内容全部变色


//4、prevAll 上一堆
$("#box2").prevAll().css({
backgroundColor:"red"

})//box0  box1 内容全变色



//5、父找子
//find("必须加子元素的参数")
$("body").find().css({
backgroundColor:"red"

})

//children([子元素类型])
$("body").children([Numer]).css({
backgroundColor:"red";

})//body的子元素只要是数字类型的全变红




//6、子找父
//parent
//连缀模式
$("p").eq(3).parent.prev.find("p").css({
backgroundColor:"red";

})// eq(3)找到下标为3（box3）的元素里的p(33)标签，然后
//在找到他的父级元素（box3），在找到同级的上一个元素
//（box2），在找到box2里的p元素（22）变红


</script>

jQuery文本

案例

<body>
	<input type="text" name="" id="" value="666" />
		<p>
			123
		</p>
		<ul>
			
		</ul>
	</body>
	<script src="jQuery.js"></script>
	<script>

//innerHTML=html();
//无参为读，有参为写
//写
$("p").html("嘿嘿")；//将布局中的123改写为“嘿嘿”



//读
console.log("$("p").html()")
//在控制台输出p标签的内容123



let str=`<li>1</li>`;
str+=`<li>2</li>`;
$("ul").html(str);
//document页面 ul的内容里多了这两个li
-------------------------------------------------


//value==val();
//写
$("input").val("xixi");//改了输入框的内容为xixi;

//读
console.log($("input").val());//在控台输出输出框的值
</script>

jQuery事件

案例

<style type="text/css">
			#box{
				height: 200px;
				width: 200px;
				background-color: red;
			}
</style>
<body>
		<div id="box">
			
		</div>
</body>
<script src="jQuery.js"></script>

jQuery事件不用带on


<scrip>
$("#box").click(function(){
   $(this).css(backgroundColor:"yellow")
})//点击div变黄


$("div").mouseover(function(){
  $(this).css(backgroundColor:"blue")
});//划入显蓝色

$("div").mouseout(function(){
   $(this).css(backgroundColor:"green")
});//滑出显绿色



$("div").click({"name":"老王"，"age":8},function(evt){
console.log(evt.data)
})
//点击后在控制台输出json对象


</script>

jQuery简单动画

案例

<style type="text/css">
		#box {
			width: 200px;
			height: 200px;
			background-color: hotpink;
		}
	</style>
<body>
	<button type="button">隐藏</button>
	<button type="button">显示</button>
	<button type="button">切换</button>
	<div id="box">

	</div>
</body>
<script src="jQuery.js"></script>
<script>
          //1、基本动画

$("button").eq(0).click(function(){
  $("#box").css({display:"none"
  });
  $("#box").hide(2000,function(){
 console.log("heihei")
 });
});
//$("#box").hide(动画时间，过渡效果，回调函数);
//点击第一个button   div隐藏  在控制台输出heihei

$("button").click.eq(1)(function(){
  $("#box").show(2000,function(){
  console.log("xixi")
  });
});
//点击第二个button，div以动画效果显现，在控制台输出xixi


$("button").eq(2).click(function(){
$("#box").toggle(2000,arguments.callee)
});
//点击第三个切换按钮时，div一直会重复前两种状态消失、
//出现、消失、出现一直循环




//toggle(动画时间，过度效果，callee)使 hide()与show()
//重复执行









             //滑块动画

$("button").eq(0).click(function(){	
		$("#box").slideUp(800,function(){
			console.log("heihei");
		});
	});

//由下向上匀速消失
	$("button").eq(1).click(function(){		
		$("#box").slideDown(800,function(){
			console.log("xixi");
		});
	});
由上向下匀速出现，于上面那个由下向上匀速消失对应
slideDown的使用必须与slideUp配合使用，才有slideUp
效果


$("button").eq(2).click(function(){		
		$("#box").slideToggle(800,arguments.callee);
	});

//slideToggle 使  slideUP在slideDown，重复这两个步骤






                     //淡入淡出动画
$("button").eq(0).click(function(){
   $("#box").fadeOut(800,function(
 
   consloe.log("hehe");
   ));
});//div 慢慢消失


$("button").eq(1).click(function(){

  $("#box").fadeIn(800,function(){
    console.log("xixi") ;
   });
});// div  慢慢出现



$("button").eq(2).click(function(){

$("#box").fadeToggle(800,arguments.callee);
});
// fadeToggle(800,argument.callee)使fadeOut与fadeIn
重复，本身的功能就是重复出现消失
















</script>