JQuery入门（含选项卡案例）

最新推荐文章于 2020-12-07 13:58:33 发布

徐普通

最新推荐文章于 2020-12-07 13:58:33 发布

阅读量201

点赞数

分类专栏： biji 文章标签： JS JQuery

本文链接：https://blog.csdn.net/weixin_44602489/article/details/88796162

版权

biji 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

JQuery是前端的一个框架

起初在做JQuery的时候抱着的理念是：最少的代码，实现最多的功能！

截止2019.03.25今天我写这篇文章，现在市面上流行的JQuery版本主要是1代和2代版本

兼容IE6的话用1代，不兼容的话就2代，3比较新可能还有问题。

JQuery元素选择器

$()

看下面代码也许会给你启发

		//记得引入
		<script src = 'jquery-1.10.1.min.js'></script>
		<script>
			window.onload = function(){
				//拿 id = div1
				$("#div1").css("backgroundColor", 'red');
				//拿 .box
				$(".box").css("backgroundColor", 'blue');
				//拿 div
				$("div").css("backgroundColor", 'orange');
				//拿 有title=world属性的
				$("[title=world]").css("backgroundColor", 'yellow');
				//拿 有name=hello属性的
				$("[name=hello]").css("backgroundColor", "green");
			}
		</script>
	
	<body>
		<div id = 'div1'>div1</div>
		<div class = 'box'>div2</div>
		<div name = 'hello' title="world">div2</div>
		<div name = 'hello'>div2</div>
		<div class = 'box'>div2</div>
	</body>

JQuery拿到想更改的标签

		<script>
			window.onload = function(){
				//获得第一个li标签
				$("ul li:first").css("backgroundColor", 'blue');
				//获得最后一个li标签
				$("ul li:last").css("backgroundColor", 'blue');
				//获得下标3的li标签
				$("ul li:eq(3)").css("backgroundColor", 'blue');
				//奇数位li标签
				$("ul li:odd").css("backgroundColor", 'blue');
				//偶数位li标签
				$("ul li:even").css("backgroundColor", 'yellow');
			}
		</script>
		<body>
			<ul>
				<li>11111111</li>
				<li>11111111</li>
				<li>11111111</li>
				<li>11111111</li>
				<li>11111111</li>
				<li>11111111</li>
			</ul>
			<ol>
				<li>22222222</li>
				<li>22222222</li>
				<li>22222222</li>
				<li>22222222</li>
				<li>22222222</li>
			</ol>
		</body>

JQuery多种表达式写法

eq（）
这个是找到下标

filter（）
这个是过滤

		<script>
			window.onload = function(){
				//写在里面
				$("ul li:eq(2)").css("backgroundColor", 'red');
				//写在外面
				$("ul li").eq(2).css("backgroundColor", 'red');
				//找class是box
				$("ul .box").css("backgroundColor", 'blue');
				//筛选出哪个li的class是box
				$("ul li").filter(".box").css("backgroundColor", 'orange');
			}
		</script>

		<body>
			<ul>
				<li class = 'box'>11111111</li>
				<li>11111111</li>
				<li title = 'hello'>11111111</li>
				<li title = 'hello'>11111111</li>
				<li>11111111</li>
				<li class = 'box'>11111111</li>
			</ul>
			<ol>
				<li>22222222</li>
				<li>22222222</li>
				<li>22222222</li>
				<li>22222222</li>
				<li>22222222</li>
			</ol>
		</body>

JQuery的方法函数化

在JQuery中几乎很难见到等号

比如说类似于我们之前一直写的window.onload这个方法在JQ中就有自己的写法

代码：

			//这就是window.onload
			$(function(){
			
				//获取h1标签中的innerHTML
				alert($("h1").html());  //取值的时候，获取的是第一个的值
				
				//JQ中赋值，批量操作
				$("h1").html("xxxx"); //JQ中赋值，批量操作
				
				// 输出input的value
				alert($("input").val());
				
				//给input的value赋值
				$("input").val("我是被赋值的值");
			})

			<h1>hello world</h1>
			<h1>world hello</h1>
			<input type="text" value = '这是原来的值'>
			<input type="text">

JQuery的链式操作

			$(function(){
			
				//给h1添加点击事件
				$("h1").click(function(){
					$(this).css("backgroundColor", 'red');//背景变红
				})
				
				//给h1添加鼠标事件
				$("h1").mouseover(function(){
					$(this).css("backgroundColor", 'orange');
				})
				
				//给h1添加鼠标事件
				$("h1").mouseout(function(){
					$(this).css("backgroundColor", 'blue');
				})
				
				//h1的样式更改
				$("h1").css("height", 500);
				
				//h1的点击事件
				$("h1").click(function(){
					$(this).css("backgroundColor", 'red');
					//注意这个是css的写法，JQ和css不能混用，不能直接this.css("back...")
					this.style.backgroundColor = 'red';
				//添加事件
				}).mouseover(function(){
					$(this).css("backgroundColor", 'orange');
				//继续追加事件
				}).mouseout(function(){
					$(this).css("backgroundColor", 'blue');
				}).css("height", 500);
			})

JQuery的css方法

可以像对象那样排着写样式

			$(function(){
				$("div").click(function(){
					$(this).css({
						width: "300px",
						height: 200,
						backgroundColor: "blue"
					})
				})
			})

JQuery里的一些方法


filter	过滤已经找到的元素节点
not	除此之外的节点全找到
has	包含着子节点
find	查找子节点中符合条件的元素
next	找兄弟元素的下一个节点
prev	找兄弟元素的上一个节点
eq	下标是XXX
attr	设置和获取元素行间属性

就不跟代码了，大家自己试一试，没有难点。

JQuery写选项卡

跟一个案例

script的内容每一句都有详细解释

		<style>
			#div1 .active{background-color: orange}
			#div1 button{width: 100px; height: 30px; background-color: gray; font-size: 18px; color: blue}
			#div1 div{width: 400px; height: 400px; border: 1px  solid black; display: none}
		</style>
		
		<script src = "../jquery-1.10.1.min.js"></script>
		<script>
			$(function(){
				$("#div1").find("button").click(function(){//给所有按钮加点击事件
					$("#div1").find("button").attr("class", "");//先给所有按钮的class设为空
					$(this).attr("class", "active");//给点的这个按钮class设为active			
					$("#div1").find("div")//找到div1下的div
					.css("display", "none")//给显示内容的div设为display:none;
					.eq($(this).index()).css("display", 'block');//给点击按钮对应下标的显示内容div样式设为display:block;
				})
			})
		</script>

		<div id = 'div1'>
			<button class = 'active'>钢铁侠</button> 
			<!-- index = 0 -->
			<button>黑寡妇</button>
			<!-- index = 1 -->
			<button>绿巨人</button>
			<!-- index = 2 -->
			<div style = 'display: block'>选项卡1内容</div>
			<div>选项卡2内容</div>
			<div>选项卡3内容</div>
		</div>