jQuery初学者笔记 一

2019/04/10 10:10
阅读数 6

jQuery初学者笔记 一

Mirror王宇阳 by

jQuery语法

jQuery语法是通过选取HTML元素,并对选取的元素进行操作

基础语法:

所有jQuery语句用“$”符号开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>点击消失</p>
		<p>点击消失</p>
		<script src="jq/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){ //固定的jQ开头
				$("p").click(function(){ // 选取p标签,并绑定clisk事件
					$(this).hide(); //事件触发使用hide()方法(隐藏当前标签属性)
				})
			})
		</script>
	</body>
</html>

jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档

// jQuery入口函数

$(document).ready(function(){
    //jQuery代码
});
/*******************************/
$(function(){
    //jQuery代码
});

选择器语法:

jQuery的选择器语法格式和CSS的调用方法一样的哦!

选择器允许基于元素的id、class、type、属性、属性值等选择方法来到指定的HTML元素

  • 元素选择器

    $("p"); //选取p标签元素
    
  • id选择器

    $("#demo"); // 选取id='demo'的元素
    
  • .class选择器

    $(".demo"); // 选取class='demo'的元素
    
  • 所有元素

    $("*"); // 选取全部元素
    

jQuery事件:

|Event 函数 |绑定函数至 | |$(document).ready(function) |将函数绑定到文档的就绪事件(当文档完成加载时) | |$(selector).click(function) |触发或将函数绑定到被选元素的点击事件 | |$(selector).dblclick(function) |触发或将函数绑定到被选元素的双击事件 | |$(selector).focus(function) |触发或将函数绑定到被选元素的获得焦点事件 | |$(selector).mouseover(function)|触发或将函数绑定到被选元素的鼠标悬停事件 |

事件语法:

参考:jQuery事件函数手册

|方法 |描述 | |bind() |向匹配元素附加一个或更多事件处理器 | |blur() |触发、或将函数绑定到指定元素的 blur 事件 | |change() |触发、或将函数绑定到指定元素的 change 事件 | |click() |触发、或将函数绑定到指定元素的 click 事件 | |dblclick() |触发、或将函数绑定到指定元素的 double click 事件 | |delegate() |向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |die() |移除所有通过 live() 函数添加的事件处理程序。 | |error() |触发、或将函数绑定到指定元素的 error 事件 | |event.isDefaultPrevented() |返回 event 对象上是否调用了 event.preventDefault()。 | |event.pageX |相对于文档左边缘的鼠标位置。 | |event.pageY |相对于文档上边缘的鼠标位置。 | |event.preventDefault() |阻止事件的默认动作。 | |event.result |包含由被指定事件触发的事件处理器返回的最后一个值。 | |event.target |触发该事件的 DOM 元素。 | |event.timeStamp |该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 | |event.type |描述事件的类型。 | |event.which |指示按了哪个键或按钮。 | |focus() |触发、或将函数绑定到指定元素的 focus 事件 | |keydown() |触发、或将函数绑定到指定元素的 key down 事件 | |keypress() |触发、或将函数绑定到指定元素的 key press 事件 | |keyup() |触发、或将函数绑定到指定元素的 key up 事件 | |live() |为当前或未来的匹配元素添加一个或多个事件处理器 | |load() |触发、或将函数绑定到指定元素的 load 事件 | |mousedown() |触发、或将函数绑定到指定元素的 mouse down 事件 | |mouseenter() |触发、或将函数绑定到指定元素的 mouse enter 事件 | |mouseleave() |触发、或将函数绑定到指定元素的 mouse leave 事件 | |mousemove() |触发、或将函数绑定到指定元素的 mouse move 事件 | |mouseout() |触发、或将函数绑定到指定元素的 mouse out 事件 | |mouseover() |触发、或将函数绑定到指定元素的 mouse over 事件 | |mouseup() |触发、或将函数绑定到指定元素的 mouse up 事件 | |one() |向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 | |ready() |文档就绪事件(当 HTML 文档就绪可用时) | |resize() |触发、或将函数绑定到指定元素的 resize 事件 | |scroll() |触发、或将函数绑定到指定元素的 scroll 事件 | |select() |触发、或将函数绑定到指定元素的 select 事件 | |submit() |触发、或将函数绑定到指定元素的 submit 事件 | |toggle() |绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 | |trigger() |所有匹配元素的指定事件 | |triggerHandler() |第一个被匹配元素的指定事件 | |unbind() |从匹配元素移除一个被添加的事件处理器 | |undelegate() |从匹配元素移除一个被添加的事件处理器,现在或将来 | |unload() |触发、或将函数绑定到指定元素的 unload 事件 |

过滤选择器

基本标签层次过滤器

  • :first/:last

    :first:选取第一个元素

    :last:选取最后一个元素

  • :not(*):去除选择器给定的元素

  • :even/:odd

    :even:偶数索引的标签

    :odd:奇数索引的标签

  • :eq()/:gt()/:lt()

    eq():选取指定索引的元素

    ge():选取大于指定索引的元素

    lt():选取小于指定索引的元素

  • :focus 选取所有失去焦点的元素

  • :header 选取所有标题元素(h1\h2\h3……)

  • :animated 匹配所有正在执行动画操作的元素

  • 实例:

$(document).ready(function(){
				$("div:lt(4)").addClass("myClass");// 除最后三个元素以外添加myClass
				$("div:not(.green,.gray)").addClass("myClass"); //除了green和gay以外的元素添加myClass
				$("div:gt(3)").addClass("myClass");//给最后三个元素添加myClass
				$("div:even").addClass("myClass");//偶数索引添加myClass
				$("div:odd").addClass("myClass");// 奇数索引添加没有Class
				$("div:eq(3)").addClass("myClass");//给指定索引添加myClass
				$("div:first").addClass("myClass");//第一个标签
				$("div:last").addClass("myClass");//最后一个标签
			});

内容过滤选择器

  • :contains(text) 选取包含text文本内容的元素;区分大小写
  • :empty 选取不含子元素或者文本节点的空元素
  • :has(selector) 选取含有选择器所匹配的元素的元素
  • :parent 选取含有子元素或文本节点的元素

属性过滤选择器

  • [attribute] 选取拥有此属性的元素
  • [attribute = value] 选取此属性值为value的所有元素
  • [attribute != value] 选取此属性值不为value的所有元素
  • [attribute ^= value] 选取此属性值为value开始的所有元素
  • [attribute $= value] 选取此属性值为value结束的所有元素
  • [attribute *= value] 选取属性值包含value的所有元素

表单过滤选择器

表单属性过滤选择器

jQuery效果

隐藏和显示 (hide/show)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hide()/show()</title>
	</head>
	<body>
		<div id="demo">
			<input type="button" id="hide" value="隐藏" />
			<input type="button" id="show" value="显示" />
			<div id="a1" style=
				"color: #000; 
				background-color: #66FF66;
				width: 100px;
				height: 100px;
				margin-top: 20px;
				text-align: center;">
				演示块
			</div>
		</div>
		<script src="jq/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#hide").click(function(){
					// 隐藏
					$("#a1").hide();
				})
				$("#show").click(function(){
					//显示
					$("#a1").show();
				})
			})
		</script>
	</body>
</html>
<!-- hide/show()语法原型
	$().hide(speed,callback);
	$().show(speed,callback);
	 speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
	 callback:完成执行后调用的函数名称
-->

toggle():开关

$("#toggle").click(function(){
	// toggle开关
	$("#a1").toggle();
});
<!-- 
	 speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
	 callback:完成执行后调用的函数名称
-->

淡入淡出

fadeIn():淡入已隐藏的元素

  • 语法
$().fadeIn(speed,callback);
<!--
	 speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
	 callback:完成执行后调用的函数名称
-->

fadeOut():淡出可见的元素

  • 语法
$().fadeOut(speed,callback);
<!-- 
	speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
	 callback:完成执行后调用的函数名称
-->

fadeToggle():淡入/出 已隐藏的/可见的元素

  • 语法
$().fadeToggle(speed,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
	 callback:完成执行后调用的函数名称
-->

fadeTo():允许渐变为给定的不透明度(值介于 0 与 1 之间)

  • 语法 :该方法严格的说只是将原本100%透明的隐藏给设置了不透明度来利用
$().fadeTo(speed,opacity,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即:缓慢的、快速的、延迟的)
	 opacity:设置给定的不透明度(0~1)
	 callback:完成执行后调用的函数名称
-->

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
		<script src="jq/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="demo">
			<input type="button" id="fadeIn" value="fadeIn" />
			<input type="button" id="fadeOut" value="fadeOut" />
			<input type="button" id="fadeToggle" value="fadeToggle" />
			<input type="button" id="fadeTo" value="fadeTo" />
			<br>
			<div id="a1" style="
				background-color: #5555FF;
				width: 300px;
				height: 100px;
				margin-top: 20px;
			">	
			</div>
			<div id="info" style="display: none;">
				已隐藏
			</div>
		</div>
		<script>
			function info(){
				$("#info").toggle();
			}
			$(function(){
				$("#fadeIn").click(function(){
					$("#a1").fadeIn("slow",info());
					// slow:慢速的
					// fast:快速的
				});
				$("#fadeOut").click(function(){
					$("#a1").fadeOut("slow",info());
				});
				$("#fadeToggle").click(function(){
					$("#a1").fadeToggle("slow",info());
				})
				$("#fadeTo").click(function(){
					// 设置隐藏不透明度(通俗的讲就是颜色变淡并不是完全淡出)
					$("#a1").fadeTo("slow",0.5);
				})
			})
		</script>
	</body>
</html>

滑动

slideDown():向下滑动元素

  • 语法
$().slideDown(speed,callback);
<!-- 
	speed:slow\fast\毫秒值
	callback:完成动作后执行的函数名称
 -->

slideUp():向上滑动元素

  • 语法
$().slideUp(speed,callback);
<!-- 
	speed:slow\fast\毫秒值
	callback:完成动作后执行的函数名称
 -->

slideToggle():上/下 切换滑动元素

$().slideToggle(speed,callback);

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>slideDown()|slideUp()|slideToggle()</title>
		<script src="jq/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			#Down,#Up,#Toggle{
				width: 60px;
				height: 20px;
				color: #000000;
				font-size: 10px;
				text-align: center;
				float: left;
				cursor: pointer;
			}
			#Down{background-color: #5555FF;}
			#Toggle{background-color: #FCFF9F;}
			#Up{background-color: #66FF66;}
			#slide{
				clear: both;
				background-color: #CCCCCC;
				width: 180px;
				height: 100px;
				border-top: #FF0000;
				text-align: center;
				position: relative;
			}
			#demo{margin: 10px 0px 0px 10px;}
		</style>
	</head>
	<body>
		<div id="demo">
			<div id="Down">向下滑动</div>
			<div id="Toggle">滑动切换</div>
			<div id="Up">向上滑动</div>
			<div id="slide">
			</div>
		</div>
		<script>
			$(function(){
				$("#Down").click(function(){
					$("#slide").slideDown();
				})
				$("#Up").click(function(){
					$("#slide").slideUp();
				})
				$("#Toggle").click(function(){
					$("#slide").slideToggle();
				})
			})
		</script>
	</body>
</html>


动画

animate():创建自定义动画

  • 语法
$().animate({css},speed,callback);
<!-- 
	{css}:定义动画的css属性
		(支持多个同时、支持相对值[+=/-=]、支持hide,toggle…等预定义值)
		支持‘队列’式的动画(即多个animate()组成一串(队列)动画)
	speed:slow/fast/毫秒值
	callback:执行完成调用函数
 -->

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animate()动画</title>
		<script src="jq/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			#demo{
				margin: 10px;
				width: 100px;
				height: 100px;
				background-color: #5555FF;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			
		</div>
		<script>
			$(function(){
				$("#demo").animate({
					left:'300px',
					width:'+=150px',
					height:'+=150px',
					// 支持多个样式的组合的动画
					// 支持相对值
				},2000);//支持延迟
				$("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
				$("#demo").click(function(){
					$("#demo").animate({top:'100px'},1000);
					$("#demo").animate({left:'100px'},1000);
					$("#demo").animate({top:'0px'});
					$("#demo").animate({left:'0px'});
					// 支持队列组合的动画动作
				})
			})
		</script>
	</body>
</html>


  • 停止动画或效果:
    • 语法
$().stop(stopAll,goToEnd);
<!-- 
	stopAll:是否清除动画队列 默认false
	goToEnd:是否立即停止动画 默认false
	默认情况下,stop()会清除被选中的元素的当前动画
 -->

Callback()

  • 当前动画 100% 完成之后执行

jQuery DOM

获取/设置内容

  • text() 设置/返回所选元素的文本内容[原型:innerhtml]
  • html() 设置/返回所选元素的内容(含HTML标签)
  • val() 设置/樊湖表单字段的value

获取/设置属性

  • attr() 设置/返回所选元素的属性内容(支持多个属性设置,返回数组)

添加元素

  • append() 尾部插入元素
  • prepend() 开头插入元素
  • after() 被选元素后插入元素
  • before() 被选元素前插入元素

删除元素

  • remove() 删除被选元素和子元素
    • 接受一个参数,过滤被删除的元素(即指定删除)
    • removeClass() 删除元素的class加载
  • empty() 删除被选元素的子元素

jQuery CSS 获取/设置

  • addClass() 向被选元素添加一个或多个Class类
  • removerClass() 从被选元素中删除指定的一个或多个Class类
  • toggleClass() 对被选元素的add/remove进行切换式的操作
  • css() 设置/获取被选元素的Class属性
    • css("classname","value") 单个
    • css("classname":"value",……) 多个

jQuery 尺寸设置

jQuery尺寸设计

  • width()/height() 设置/返回元素的宽度/高度(content;不包括内边距、边框、外边距)
  • innerWidth()/innerHeight() 设置/返回元素的宽度/高度(Content+Padding;不包括边框、外边距)
  • outerWidth()/outerHeight() 设置/返回元素的宽度/高度(Content+Padding+Border;不包括外边距)

jQuery 遍历

向上遍历DOM树

  • parent() 返回自己的直接父类元素
  • parents() 返回自己的所有直系类元素(直至根元素)
  • parentsUntil() 返回两种直接的所有直系类元素(不包含)
// parents(*)/parentsUntil(*):两个方法在这里均可选一个参数接收

向下遍历DOM树

  • children() 返回被选元素的所有直接子元素(支持过滤参数)
  • find() 返回被选元素的后代元素(支持过滤参数,指定标签、类名、id、name等)

水平遍历DOM树

  • siblings() 返回被选元素的所有同级元素(支持过滤参数)

  • next() 返回被选元素的下一个同级元素

  • nextAll() 返回被选元素之后的所有同级元素

  • nextUntil() 返回被选元素与参数之间的所有同级元素

  • prev() 返回被选元素的上一个同级元素

  • prevAll() 返回被选元素之前的所有同级元素

  • prevUntil() 返回被选元素与参数之间的所有同级元素

遍历 过滤

  • first() 返回被选元素的首个子元素
  • last() 返回被选元素的最后子元素
  • eq() 返回被选元素中带有指定索引的元素(可选参数,指定索引)
  • filter()返回可匹配的所有元素
  • not() 返回不匹配的所有元素

jQuery AJAX

AJAX

AJAX load()

  • load() 从服务器加载数据,并返回数据

常常利用:调用一个重复的代码块,例如网页的导航、版本块等……

由此可以大大的减少代码量的编写工作,模块化的团队开发应该常用

  • 语法
$().load(URL,data,callback);
<!-- 
	URL:加载的数据文件位置uRL
	data:与URL加载请求一起发送的字符串键/值对集合
	callback:执行完毕后调用的函数
		- responseTxt : 调用成功的结果
		- statusTXT : 调用的状态
		- xhr : XMLHttpRequest对象
 -->

AJAX GET()

  • $.get() 从指定的资源请求数据
  • 语法
$.get(URL , callback);
<!-- 
	URL:加载的uRL
	callback:执行完毕后调用的函数
 -->

  • 实例
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

AJAX POST()

  • $.post() 使用 POST 请求向服务器提交数据

原文出处:https://www.cnblogs.com/wangyuyang1016/p/12309162.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部