jQuery第一节总结

最新推荐文章于 2024-05-30 11:27:58 发布

ywt201010

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量174

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/ywt201010/article/details/127376443

版权

jQuery中的常见的两种入口函数：

（$是jQuery中的顶级对象，把元素使用$包装完成jQuery对象

同时使用jQuery前要引入JQ的库类文件）

//第一种：
  $(function(){
      ...//此处是页面DOM加载完成的入口
});


//第二种：
  $(function(){
      ...//此处是页面DOM加载完成的入口
});

JQ对象与Dom对象之间的转换

$(function(){
				var a1=$("#d1");  //获取id元素
				console.log(a1);
				console.log(a1.text());  //使用jq对象的方法获取元素的文本内容
				console.log(a1[0].innerText);  //jq对象转换为DOM对象，获取文本内容
			    
				console.log(".......")
				
				var d1=document.getElementById("d1");  //根据id获取元素
				console.log(d1.innerText);  //根据DOM对象获取元素文本内容
				console.log($(d1).text());  //把DOM对象转换为JQ对象就，获取文本内容
				
				var a2=$(".c1");  //获取class元素
				console.log(a2);
				
				var a3=$("p");    //获取标签元素
				console.log(a3);
			})
//<h2>JQuery入门</h2>
		<div id="d1">
			id为d1的div1xxxx
		</div>
		<div class="c1">
			class为d1的div1 
		</div>
		<div class="c1">
			class为d1的div2
		</div>
		<p>这是一个p标签1</p>
		<p>这是一个p标签2</p>

jQuery选择器

js获取元素的方式有很多、很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准，大致有

1、基础选择器

2、层级选择器

3、属性选择器

4、过滤选择器等等

使用jQuery案例：

让页面可以简化和隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠菜单</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			ul li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			#main {
				width: 350px;
				border: 1px darkgrey solid;
				margin: 10px auto;
				overflow: auto;
			}

			#head {
				width: 350px;
				height: 50px;
				line-height: 50px;
				background-color: darkgray;
			}

			#head h2 {
				float: left;
				margin-left: 10px;
			}

			#head span {
				display: block;
				width: 25px;
				height: 12.5px;
				background: url(img/pic.png);
				float: right;
				margin-top: 18px;
				margin-right: 10px;
			}

			#content {
				padding: 10px;
				overflow: auto;
				/*高度自适应*/
			}

			#content ul li {
				width: 110px;
				height: 25px;
				line-height: 25px;
				float: left;
			}

			#foot a {
				display: block;
				width: 60px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				/*background-color: red;*/
				float: right;
				margin-right: 10px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				$("#pic").click(function() {
					//需要判断一种状态，如果是a那么变成b，否者变成a
					var index = $(this).attr("index");
					if (index == 0) {
						//完成图片更换和下面部分隐藏
						$(this).css("background", "url(img/pic.png) 0 12.5px");
						$("#content").slideUp(1000);
						$("#foot").slideUp(1000);
						//改变本身的标记
						$(this).attr("index", 1);
					} else {
						//完成图片更换和下面部分显示
						$(this).css("background", "url(img/pic.png)");
						$("#content").slideDown(1000);
						$("#foot").slideDown(1000);
						//改变本身的标记
						$(this).attr("index", 0);
					}
				});
				$("#foot a").click(function() {
					//判断ul li 是否有隐藏状态的
					if (!$("#content>ul>li").is(":hidden")) {
						//点击的时候  li索引大于4的隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut();
						//内容变为更多
						$(this).text("更多👈")
					} else {
						//点击的时候，所有的li显示
						$("#content>ul>li").fadeIn();
						//内容变为简化
						$(this).text("简化👉")
					}
					//设置a标签不跳转
					return false;
				})
			});
		</script>
	</head>
	<body>
		<div id="main">
			<div id="head">
				<h2>图书分类</h2>
				<span id="pic" index="0">

				</span>
			</div>
			<div id="content">
				<ul>
					<li><a href="#">小说</a><i>(1110)</i></li>
					<li><a href="#">文艺</a><i>(2350)</i></li>
					<li><a href="#">青春</a><i>(1985)</i></li>
					<li><a href="#">少儿</a><i>(1102)</i></li>
					<li><a href="#">生活</a><i>(2350)</i></li>
					<li><a href="#">社科</a><i>(5684)</i></li>
					<li><a href="#">管理</a><i>(1256)</i></li>
					<li><a href="#">计算机</a><i>(2135)</i></li>
					<li><a href="#">教育</a><i>(3120)</i></li>
					<li><a href="#">工具书</a><i>(4213)</i></li>
					<li><a href="#">引进版</a><i>(1752)</i></li>
					<li><a href="#">其他类</a><i>(9872)</i></li>
				</ul>
			</div>
			<div id="foot">
				<a href="">简化☚</a>
			</div>
		</div>
	</body>
</html>

效果: