05.WEB-HTML之JQuery基础学习总结(一)

最新推荐文章于 2022-08-26 16:19:08 发布

原创最新推荐文章于 2022-08-26 16:19:08 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

JAVAEE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery的基本概念、选择器、事件绑定、对象转换等基础知识，并通过案例展示了如何利用jQuery实现页面元素的显示隐藏、定时弹出广告等功能。

目标内容

列举常见的五中选择器,并简单描述其作用
通过选择器,获得jQuery对象
学会给标签绑定事件
可以实现显示或隐藏标签

目录树图

一 JQuery介绍

1.1 JQuery概述

1.1.1 什么是jQuery

jQuery是一个JavaScript框架,它兼容CSS3,还兼容各种浏览器.文档说明很全,应用详细,成熟插件多.

jQuery2.0及后续版本不再支持IE6/7/8浏览器

核心概念是write less,do more(写的很少,做的很多)

1.1.2 下载

1.1.3 引入和对象获取

导入JQuery库

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

1.2 基本语法

1.2.1jQuery(选择器)或 $(选择器) 在jQuery中"jQuery == $",区分大小写

//1获得jQuery对象
//*命名约定 :jQuery对象变量名建议以$开头
var $demoId = $("#demoId");

1.2.2 JQ和JS页面加载区别

<script>
			window.onload = function(){
				alert("张三");
			}
			
			//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
			window.onload = function(){
				alert("老王");
			}
			
			//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
			jQuery(document).ready(function(){
				alert("李四");
			});
			
			//JQ不存在覆盖问题，加载的时候是顺序执行
			$(document).ready(function(){
				alert("王五");
			});
			
			//简写方式
			$(function(){
				alert("汾九");
			});
			
		</script>

1.2.3 JQ的获取

	<script>
			$(function(){
				//1.JS方式获取
				/*document.getElementById("btn").onclick= function(){
					location.href="惊喜.html";
				}*/
				
				//2.JQ方式获取=====>>>$("#btn")
				$("#btn").click(function(){
					location.href="惊喜.html"
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="点我有惊喜" id="btn"/>
	</body>

1.2.4 jQuery对象和DOM转换

jQuery对象和DOM对象可以项目转换,但两个对象的函数不能彼此混搭使用,jQuery对象只能使用自己的函数

DOM对象转换成jQuery对象,语法jQuery(DOM对象)

jQuery对象转换成DOM对象,语法$username[index]

	<head>
		<meta charset="UTF-8">
		<title>Dom与JQ对象之间的转换</title>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			function write1(){
				//1.JS的DOM操作
				//document.getElementById("span1").innerHTML="萌萌哒！";
				//DOM对象无法操作JQ对象里面属性和方法
				//document.getElementById("span1").html("萌萌哒！");
				
				var spanEle = document.getElementById("span1");
				
				//将DOM对象转换成JQ对象
				$(spanEle).html("思密达");
			}
		
		
			$(function(){
				$("#btn").click(function(){
					//JQ对象无法操作JS里面的属性和方法！！！
					//$("#span1").innerHTML="呵呵哒！"
					$("#span1").html("呵呵哒！");
					
					//JQ对象向DOM对象转换方式一
					$("#span1").get(0).innerHTML="美美哒！";
					
					//JQ对象向DOM对象转换方式二
					$("#span1")[0].innerHTML="棒棒哒！";
					
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="JS写入" onclick="write1()"/>
		<input type="button" value="JQ写入" id="btn"/><br />
		班长：<span id="span1">你好帅！</span>
	</body>

1.2.5 基本选择器

jQuery后续学习中,"基本选择器"使用频率最大,比较重要

*id选择器 : 格式:$("#id值") var $d1 = $("#r01");

*标签选择器 : 格式: $("标签名") var $d2 = $("input");

*类选择器 : 格式: $(".class 类名") var $d3 = $(".myClass");

1.2.6 基本

*通过改变元素高度和宽度,显示或隐藏

show(speed,fn) 显示

参数1: 显示速度,单位:ms ,固定字符串:slow ,normal, or fast

参数2: 显示成功之后的回调函数

hide() 隐藏
toggle() 切换

1.2.7 滑动

通过改变元素高度显示或者隐藏

slideDown() 显示: 高度变大
slideUp() 隐藏,高度变小
slideToggle() 切换

1.2.8 淡入淡出

通过改变元素透明度显示或隐藏

fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
fadeTo(speed,opacity,[fn]) 指定透明度

参数2 opacity:一个0到1之间表示透明度的数字

1.3 定时弹出广告案例

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//1.书写显示广告图片的定时操作
				time = setInterval("showAd()",3000);
			});
			
			//2.书写显示广告图片的函数
			function showAd(){
				//3.获取广告图片，并让其显示
				//$("#img2").show(1000);
				//$("#img2").slideDown(5000);
				$("#img2").fadeIn(4000);
				//4.清除显示图片定时操作
				clearInterval(time);
				//5.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			
			function hiddenAd(){
				//6.获取广告图片，并让其隐藏
				//$("#img2").hide();
				//$("#img2").slideUp(5000);
				$("#img2").fadeOut(6000);
				//7.清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>

★★★选择器总结

1.4.1基本选择器

id选择器 : 格式:$("#id值") var $d1 = $("#r01");
标签选择器 : 格式: $("标签名") var $d2 = $("input");
类选择器 : 格式: $(".class 类名") var $d3 = $(".myClass");

1.4.2 层级选择器

A B , 获得A元素内部的所有B元素(祖孙) --后代
A>B , 获得A元素下面的所有B子元素(父子)
A+B , 获得A元素同级下一个B元素(兄弟)
A~B , 获得A元素同级所有B元素(兄弟)

1.4.3 基本过滤选择器

:first 第一个
:last 最后一个
:not(..) 删除指定内容例如:1234:not(3) -->124
:even 偶数从0开始技术 -- 操作索引号,页面显示奇数项
:odd 奇数
:eq(index) 指定第几个 =
:gt(index) 大于n个>
:lt(index) 小于n个<
----------------------
:header获得标题(<h1>/<h2>...)
:animated 获得动画的
:focus 获得焦点的

1.4.4 属性选择器

[属性名] 获得有属性名的元素
[属性名=值] 获得属性名等于值元素
[属性名!=值] 获得属性名不等于值元素
[...][...][...] 符合属性选择器,多个属性同时过滤 where.. and .. and ..
---------------------------------------------------------------------
[属性名^=值] 获得属性名以值开头元素
[属性名$=值] 获得属性名以值结尾元素
[属性名*=值] 获得属性名含有值元素

1.4.5 表单属性选择器

:enabled 可用
:disabled 不可用
:checked 选中(单选radio 多选checkbox)
:selected 选择(下拉列表<select>)

二案例二隔行换色

2.1 相关技术

* addClass() 给指定标签的class属性追加样式

* removeClass() 将标签指定的class属性移除

* toggleClass() 切换class属性样式,

2.2 案例实现

<script>
			//1.页面加载
			$(function(){
				/*//2.获取tbody下面的偶数行并设置背景颜色
				$("tbody tr:even").css("background-color","yellow");
				//3.获取tbody下面的奇数行并设置背景颜色
				$("tbody tr:odd").css("background-color","green");*/
				
				//2.获取tbody下面的偶数行并设置背景颜色
				$("tbody tr:even").addClass("even");
				$("tbody tr:even").removeClass("even");
				//3.获取tbody下面的奇数行并设置背景颜色
				$("tbody tr:odd").addClass("odd");
			});
		</script>

三案例三全选和全不选

3.1 相关知识

属性操作 prop()

*prop() 操作的标签的特性,JQ1.6性特性,获得一些第一次分配undefined属性值的标签时,如果抛异常,将忽略浏览器生成的任何错误.

*removeProp() 移除标签的特性

3.2 案例实现

<script>
			$(function(){
				$("#select").click(function(){
					//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
					//attr方法与JQ的版本有关，在1.8.3及以下有效。
					//$("tbody input").attr("checked",this.checked);
					$("tbody input").prop("checked",this.checked);
				});
			});
		</script>