jQuery框架

最新推荐文章于 2023-07-12 17:56:37 发布

linsa_pursuer

最新推荐文章于 2023-07-12 17:56:37 发布

阅读量5.6k

点赞数 2

分类专栏： JSP基础文章标签： jquery 框架

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/78681083

版权

JSP基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.jQuery是JavaScript框架——API（jQuery2不支持IE）

二.jQuery选择器：
1.基本选择器
（1）元素选择器：依据标签名定位元素
$("标签名");
（2）类选择器：根据class属性定位元素
$(".class属性名");
（3）id选择器：根据id属性定位元素
$("#id");
（4）选择器组：定位一组选择器所对应的所有元素
$("#id,.importent");

2.层次选择器
（1）在select1元素下，选子孙select2
$("select1 select2")

（2）在select1元素下，选子元素select2
$("select1>select2")

（3）选中select1元素的，选select2的下一个弟弟
$("select1+select2")

（4）选中select1元素的，选select2的所有弟弟
$("select1~select2")

3.过滤选择器
（1）基本过滤选择器
:first——第一个元素，:last——最后一个元素,:not(selector)——除了selector之外
:even——挑选偶数行，:odd——挑选奇数行，:eq(index)——下标等于index的元素,
:gt(index)——下标大于index的元素,:lt(index)——下标小于index的元素,

（2）内容过滤选择器
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或文本的空元素

（3）可见性过滤选择器
:hidden——匹配所有不可见元素
:visible——匹配所有的可见元素

（4）属性过滤选择器
[attribute]——匹配具有attribute属性的元素
[attribute = value]——匹配属性等于value的元素
[attribute != value]——匹配属性不等于value的元素

（5）状态过滤选择器
:enabled——匹配可用的元素
:disabled——匹配不可用的元素
:checked——匹配选中的checkbox
:selected——匹配选中的option

4.表单选择器
:text——匹配文本框，:password——匹配密码框
:radio——匹配单选框，:checkbox——匹配多选框
:submit——匹配提交按钮，:reset——匹配重置按钮
:button——匹配普通按钮，:file——匹配文件框
:hidden——匹配隐藏框

三.jQuery操作DOM
1.读写节点
（1）读写节点内容：html(),text()
（2）读写节点的value属性值：val()
（3）读写节点的属性值：attr()

2.增删节点
var obj = $("节点内容");
parent.append(obj);——最后一个追加
parent.prepend(obj);——第一个追加
brother.after(obj);——兄弟之后追加
brother.before(obj);——兄弟之前追加
obj.remove()——删除节点，obj.remove(selector),obj.empty()——清空节点

3.样式操作
addClass("")——追加样式
removeClass("")——移除指定样式
removeClass()——移除所有样式
toggleClass("")——切换样式
hasClass("")——判断是否有某个样式
css("")——读取css的值
css("","")——设置多个样式

4.遍历节点
children()/children(selector)——直接子节点
next()/next(selector)——下一个兄弟节点
prev()/prev(selector)——上一个兄弟节点
siblings()/siblings(selector)——所有兄弟
find(selector)——查找满足选择器的所有后代
parent()——父节点

四.jQuery事件处理
bind('click',fn)
click(function(e){...})
e.target,e.pageX,e.pageY,e.stopPropagation()——可以取消事件冒泡
hover(mouseenter,mouseleave)——模拟光标悬停事件
toggle()——在多个事件响应中切换
trigger(事件类型),focus();

五.jQuery动画
show()/hide()显示、隐藏的动画效果slow,normal,fast或毫秒数
可以传第二个参数（回调函数）——动画完成之后要执行的函数
slideDown()/slideUp()上下滑动式的动画实现
fadeIn()/fadeOut()淡入淡出式动画效果
animate(偏移位置，执行时间，回调函数)

字体放大案例demo1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体放大案例</title>
<script src="../js/jquery.js"></script>
<script>
	function bigger(){
		//获取段落默认字号(16px)
		var size = $("p").css("font-size");
		//去掉单位，以便于运算
		size = size.replace("px","");
		//加1，然后设置给所有段落
		$("p").css("font-size",++size+"px");
	}
</script>
</head>
<body>
	<input type="button" value="+" οnclick="bigger();">
	<p>jQuery是一个优秀的js框架</p>
	<p>它可以极大程度的简化js编程</p>
	<p>它为我们提供了简洁而统一的API</p>
</body>
</html>

jQuery对象demo2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象</title>
<script src="../js/jquery.js"></script>
<script>
	function prt(){
		var ps = $("p");
		console.log(ps);
		for(var i=0;i<ps.length;i++){
			console.log(ps[i].innerHTML);
		}
	}
	function chg(img){
		console.log(img);
		var w = $(img).width();
		if(w==250){
			$(img).width(218).height(218);
		}else{
			$(img).width(250).height(250);
		}
	}
</script>
</head>
<body>
	<input type="button" value="打印" οnclick="prt();">
	<p>jQuery对象本质上就是DOM数组</p>
	<p>jQuery对象才能调用jQuery方法</p>
	<p>DOM对象才能调用DOM方法</p>
	<div>
		<img src="../images/01.jpg" οnclick="chg(this);">
		<img src="../images/02.jpg" οnclick="chg(this);">
		<img src="../images/03.jpg" οnclick="chg(this);">
	</div>
</body>
</html>

选择器demo3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="../js/jquery.js"></script>
<script>
	//在页面加载后调用匿名函数，
	//其作用等同于window.onload
	$(function(){
		//1.基本选择器
		//2.层次选择器
		console.log($("#gz+li"));
		//3.过滤选择器
		//1）基本过滤选择器
		console.log($("li:first"));
		console.log($("li:lt(2)"));
		console.log($("li:odd"));
		console.log($("li:not(#gz)"));
		//2）内容过滤选择器
		console.log($("li:contains('州')"));
		//3）可见性过滤选择器
		console.log($("li:hidden"));
		//4）属性过滤选择器
		console.log($("li[style]"));
		//5）状态过滤选择器
		console.log($("input:disabled"));
		//4.表单选择器
		console.log($(":radio"));
	});
</script>
</head>
<body>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>杭州</li>
		<li style="display:none;">东莞</li>
		<li style="display:none;">澳门</li>
	</ul>
	<!-- 
		readonly:只读，若框内有值依然可以提交到服务器。
		disabled:禁用，若框内有值则无法提交到服务器。
	 -->
	<p>
		账号:<input type="text">
	</p>
	<p>
		密码:<input type="password">
	</p>
	<p>
		性别:
		<input type="radio" name="sex">男
		<input type="radio" name="sex">女
	</p>
</body>
</html>

读写节点demo4:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读写节点</title>
<script src="../js/jquery.js"></script>
<script>
	$(function(){
		//html() == innerHTML
		console.log($("p:eq(0)").html());
		$("p:eq(0)").html("jQuery支持<u>读写</u>节点");
		//text() == innerText
		console.log($("p:eq(1)").text());
		$("p:eq(1)").text("jQuery支持<u>增删</u>节点");
		//val()==value
		console.log($(":button:first").val("BBB"));
		//attr()==getAttribute(),setAttribute()
		console.log($("img:first").attr("src"));
		$("img:first").attr("src","../images/02.jpg");
	});
</script>
</head>
<body>
	<p>jQuery支持<b>读写</b>节点</p>
	<p>jQuery支持<b>增删</b>节点</p>
	<p>
		<input type="button" value="AAA">
	</p>
	<p>
		<img src="../images/01.jpg">
	</p>
</body>
</html>

增删节点demo5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删节点</title>
<script src="../js/jquery.js"></script>
<script>
	function f1(){
		var li = $("<li>天津</li>");
		$("ul").append(li);
	}
	function f2(){
		var li = $("<li>济南</li>");
		$("#gz").before(li);
	}
	function f3(){
		$("li:last").remove();
	}
</script>
</head>
<body>
	<p>
		<input type="button" value="追加" οnclick="f1();">
		<input type="button" value="插入" οnclick="f2();">
		<input type="button" value="删除" οnclick="f3();">
	</p>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>杭州</li>
	</ul>
</body>
</html>

样式操作demo6:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<style>
	.big{
		font-size: 30px;
	}
	.important{
		color: red;
	}
</style>
<script src="../js/jquery.js"></script>
<script>
	$(function(){
		$('p').addClass('big').addClass('important');
		$('p').removeClass('big').removeClass('important');
		console.log($('p').hasClass('big'));
		setInterval(function(){
			$("p").toggleClass("big");
		},500);
	});
</script>
</head>
<body>
	<p>jQuery对样式操作提供了很好的支持</p>
</body>
</html>

遍历节点demo7:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历节点</title>
<script src="../js/jquery.js"></script>
<script>
	$(function(){
		console.log($("#gz").parent());
		console.log($("#city").children());
		console.log($("#gz").next());
		console.log($("#gz").siblings());
	});
</script>
</head>
<body>
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>杭州</li>
	</ul>
</body>
</html>

jQuery事件demo8:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
<script src="../js/jquery.js"></script>
<script>
	//页面加载后
	$(function(){
		//给按钮1绑定单击事件
		$(":button:first").click(function(e){
			console.log(1);
			console.log(e);
		});
	});
</script>
</head>
<body>
	<input type="button" value="按钮1">
</body>
</html>

合成事件demo9:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合成事件</title>
<style>
	.big{
		width: 250px;
		height: 250px;
	}
</style>
<script src="../js/jquery.js"></script>
<script>
	$(function(){
		//给图片绑定悬停事件
		$("img").hover(
			function(){
				//css("width","250px");
				//attr("style","width:250px;")
				//width(250)
				$(this).toggleClass("big");
			},//悬停时
			function(){
				$(this).toggleClass("big");
			}//离开时
		);
		setInterval(function(){
			$("img").toggle();
		},500);
	});
</script>
</head>
<body>
	<img src="../images/01.jpg">
</body>
</html>

模拟事件demo10:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟事件</title>
<style>
	#gg{
		height: 500px;
		background-color: orange;
	}
	#gg input{
		float: right;
		margin: 5px;
	}
</style>
<script src="../js/jquery.js"></script>
<script>
	$(function(){
		//给按钮定义单击事件
		$("#gg :button").click(function(){
			$("#gg").slideUp(500);
		});
		//3秒后
		setTimeout(function(){
			$("#gg :button").trigger("click");
		},3000);
	});
</script>
</head>
<body>
	<div id="gg">
		<input type="button" value="x">
	</div>
</body>
</html>

动画demo11:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
	div{
		width: 200px;
		height: 200px;
		background-color: red;
		margin-top: 20px;
		/*自定义动画基于相对/绝对/固定定位*/
		position: relative;
	}
</style>
<script src="../js/jquery.js"></script>
<script>
	function f1(){
		$("div").show(1000);
	}
	function f2(){
		//参数2是在动画完成后被调用的。
		//像参数2这样的，传递给某方法的函数，
		//并且函数是在方法结束前调用的，
		//则这样的函数叫回调函数。
		$("div").hide(3000,function(){
			console.log("完成");
		});
		//显示隐藏的动画实现原理：
		//通过定时器，连续不断的修改元素的样式。
		//而启动定时器相当于启动子线程，
		//当前方法f2相当于主线程，二者并发执行。
		console.log("over");
	}
	$(function(){
		$("div").hover(
			function(){
				$(this).animate({"left":"30px"},500);
			},
			function(){
				$(this).animate({"left":0},500);
			},
		);
	});
</script>
</head>
<body>
	<input type="button" value="显示" οnclick="f1();">
	<input type="button" value="隐藏" οnclick="f2();">
	<div></div>
</body>
</html>

linsa_pursuer

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery框架

一.jQuery是JavaScript框架——API（jQuery2不支持IE）二.jQuery选择器：1.基本选择器（1）元素选择器：依据标签名定位元素 $("标签名");（2）类选择器：根据class属性定位元素 $(".class属性名");（3）id选择器：根据id属性定位元素 $("#id");（4）选择器组：定位一组选择器所对应
复制链接

扫一扫