jQuery初学习

最新推荐文章于 2024-05-06 00:29:39 发布

柏舟与洲

最新推荐文章于 2024-05-06 00:29:39 发布

阅读量87

点赞数

分类专栏： JavaScript和jQuery学习文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45258054/article/details/106016640

版权

JavaScript和jQuery学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript函数库。

需要下载源码：http://www.jq22.com/jquery-info122。
然后在在程序当中通过script标签引入JQ。

使用选择器

jQuery函数库支持各种选择器。
中间带有横杠的样式可以变为驼峰写法。
支持链式语法。

基本选择器

**使用 $函数，来匹配标签 * * 。$ 起始就是jQuery对象

	//$函数，匹配标签
	console.log($("li"));     //标签选择器
	console.log($("#box"));  //id选择器
	console.log($(".cur"));  //class选择器
	 //如果向设置匹配标签的行内样式可以连续打点css函数
	$("p").css({
		"color":"red",
		"fontSize":30,
		"background":"cyan" ,
		"textAlign":"center"
	})

独有的选择器

:first	:last	:even	:odd	:lt(index)	:gt(index)
匹配第一个	匹配最后一个	偶数选择器	奇数选择器	小于选择器	大于选择器

	$("div:first").css({    //获取第一个div
		"background":"red"
	});
	$("div:last").css({
		"background":"cyan" //获取最后一个div
	});
	$("div:gt(1)").css({   //获取下标大于1的div
		"fontSize":50
	})

操作匹配标签文本

表单元素【input标签】利用JQ中val方法操作表单元素文本
非表单元素利用JQ中**html()**方法操作文本

	//获取表单元素的文本
	console.log($("input").val());
	//重新设置表单元素文本
	$("input").val("用val修改了表单元素文本");
	
	//操作非表单元素的文本，利用的html的方法
	console.log($("div").html);
	$("div").html("使用html修改");

给元素绑定事件

jQuery把元素事件封装成函数形式。

学习网站http://jquery.cuishifeng.cn/click.html

click	单击事件
mouseleave	鼠标移开事件
mouseenter	鼠标移上事件

单击事件

	var f = 16;
	$("div").click(function(){
		f++;
		$(this).css({
			"fontSize":f
		});
	});

特性函数

JQ函数提供一些特效函数，可以给匹配元素添加一些动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/JQuery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 300px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<button type="button" id="box1">slideup</button>
		<button type="button" id="box2">slideDown</button>
		<button type="button" id="box3">fadeOut</button>
		<button type="button" id="box4">fadeIn</button>
		<div id="box"></div>
	</body>
</html>
<script type="text/javascript">
	//向上收缩
	$("#box1").click(function(){
		$("div").slideUp(2000); // 动画时间
	});
	//向下展开
	$("#box2").click(function(){
		$("div").slideDown(2000);
	});
	//淡出
	$("#box3").click(function(){
		$("div").fadeOut(2000);
	});
	//淡入
	$("#box4").click(function(){
		$("div").fadeIn(2000);
	});
</script>

jQueryUI插件使用

https://jqueryui.com/ 学习手册 https://www.jqueryui.org.cn/demo/

jQueryUI是JQ函数库一个插件

拖拽的案例

	//拖拽
	$("div").draggable();
	//排序拖拽
	$("ul").sortable();
	// 日历
	$("input").datepicker();

节点关系函数

可以获取某一个标签的父元素、兄弟元素、儿子元素等等。

parent：获取父节点。

	 //给P标签绑定单击事件，要他们的父元素div背景颜色为青色
	    $("p").click(function () {
	        $("p").parent().css({
	            "background": "cyan"
	        })
	    })

siblings 获取兄弟节点

	//sibling获取姊妹元素
	$("p").click(function(){
		$(this).css({
			"background":"yellow"
		}).siblings().css({
			"background":"green"
		})
	});

children ：获取子元素

	//children获取子元素
	$("div").click(function(){
		$(this).children().css({
			"background":"green"
		})
	});

animate动画效果

也是jQuery函数库提供一个动画函数，主要的作用是可以让元素添加一些2D动画效果。

格式如下：

$(selector).animate(JSON,TIME,CALLBACK);

JSON：动画属性设置【left、width、top等等】
TIME:动画时间设置（单位是MS）
CALLBACK：函数，这个函数会在动画结束的时候执行一次

	$("div").animate({
		//颜色不能变化
		"left":1000,
		"top":300,
		"width":200,
		"height":200
	},5000,function(){
		console.log("动画结束")
	});

动画积累问题

stop(true):将匹配元素全部动画清除

	<body>
		<button type="button" class="b2">左</button>
		<button type="button" class="b1">右</button>
		<div id="box">
		</div>
	</body>
</html>
<script type="text/javascript">
	$(".b1").click(function(){
		$("div").stop(true).animate({//放止动画积累
			"left":1000
		},2000);
	})
	$(".b2").click(function(){
		$("div").stop(true).animate({
			"left":0
		},2000);
	})
</script>

柏舟与洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery初学习

jQuery是一个快速、简洁的JavaScript函数库。需要下载源码：http://www.jq22.com/jquery-info122。然后在在程序当中通过script标签引入JQ。使用选择器jQuery函数库支持各种选择器。中间带有横杠的样式可以变为驼峰写法。支持链式语法。基本选择器**使用函数，来匹配标签∗∗。函数，来匹配标签**。函数，来匹配标签∗∗。起始就是jQuery对象 //$函数，匹配标签 console.log($("li")); //标签选择器
复制链接

扫一扫