2021-05-17

最新推荐文章于 2021-11-17 11:36:58 发布

╰つ以灬沫バ

最新推荐文章于 2021-11-17 11:36:58 发布

阅读量72

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_51448910/article/details/116941980

版权

day_37_BOM、定时器、jQuery

一、BOM

	（1）BOM的概念
		BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
比如：刷新浏览器、后退、前进、在浏览器中输入URL等
		(2)、BOM的顶级对象
			window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name
	（3）对话框
			alert()
			prompt()
			confirm()
	（4） 加载事件
			onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
		(5)、Location对象
			常用属性

// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);

(6)、History对象

//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();

(7)、Navigator对象

通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);

二、定时器

	(1)、setInteval()
	setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
	setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
	clearInteval()
	clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
	clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
	//定时器
	//参数1:函数
	//参数2:时间---毫秒---1000毫秒--1秒
	//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
	//返回值就是定时器的id值
	(2)、setTimeout() 
	另一个定时器定义和用法
	方法用于在指定的毫秒数后调用函数或计算表达式。
	提示： 1000 毫秒= 1 秒。
	提示： 如果你只想重复执行可以使用 setInterval() 方法。
	提示： 使用 clearTimeout() 方法来阻止函数的执行。
	参数：param1回调函数，param2时间
	返回值:  返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行

三、JQuery
1.jQuery安装

		1、从 jquery.com 下载 jQuery 库
		jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它：

<head> 
<script src="jquery-1.10.2.min.js"></script> 
</head>

2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<head> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 
</head>

2.jQuery语法

	(1)、基础语法
			1、美元符号定义 jQuery
			2、选择符（selector）"查询"和"查找" HTML 元素
			3、jQuery 的 action() 执行对元素的操作。
	(2)、实例

$(document).ready(function(){ 
// 开始写 jQuery 代码... }
);
//简写
$(function(){ 
// 开始写 jQuery 代码... 
})

（3）了解jQuery的$符号
		$是什么
		其实$就是一个函数：$();参数不一样，功能不一样
		$常用的几种情况：

$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

（4）jQuery 入口函数与 JavaScript 入口函数的区别

在这里插入图片描述

四、jQuery选择器

	(1)、什么是jQuery选择器
			1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
			2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
			3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
			4、jQuery 中所有选择器都以美元符号开头：$()。
			
	(2)、基本选择器
			ID选择器	$(“#id”);	获取指定ID的元素
			类选择器	$(“.class”);	获取同一类class的元素
			标签选择器	$(“div”);	获取同一类标签的所有元素
			并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
			交集选择器（标签指定式选择器）	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。
	总结:和css选择器的用法一模一样
	
	(3)、层级选择器
	子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
	后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
	
（4）过滤选择器
	:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
	:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
	:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

	(5)、筛选选择器（方法）
	children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
	find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
	siblings(selector)
	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
	parent()	$(“#first”).parent();	查找父亲
	eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
	next()	$(“li”).next()	找下一个兄弟
	prev()	$(“li”).prev()	找上一次兄弟
	Index()	$(“li”).index()	获取当前的位置（索引）
	not()	$("p").not(".intro")	返回不带有类名 "intro" 的所有 <p> 元素

五、jQuery事件

	(1)、什么是事件
		1、页面对不同访问者的响应叫做事件。
		2、实例：在元素上移动鼠标、选取单选按钮、点击元素
（2）、事件语法

1、单击事件
$("p").click(function(){ 
// 动作触发后执行的代码!! 
});
2、双击事件
$("p").dblclick(function(){
 	$(this).hide(); 
})
3、鼠标进入
$("#p1").mouseenter(function(){ 
alert('您的鼠标移到了 id="p1" 的元素上!'); 
});
4、鼠标离开
$("#p1").mouseleave(function(){ 
alert("再见，您的鼠标离开了该段落。"); 
});
5、获取焦点
$("input").focus(function(){ 
$(this).css("background-color","#cccccc"); 
});
6、失去焦点
$("input").blur(function(){ 
$(this).css("background-color","#ffffff"); 
});

六、jQuery效果与事件

1、jQuery css() 方法
	(1)、jQuery css() 方法是什么
		css() 方法设置或返回被选元素的一个或多个样式属性。
(2)、返回 CSS 属性
		如需返回指定的 CSS 属性的值，请使用如下语法：
		css("propertyname");
		$("p").css("background-color");
(3)、设置CSS属性
		如需设置指定的 CSS 属性，请使用如下语法：
		css("propertyname","value");
		$("p").css("background-color","yellow");
(4)、设置多个CSS属性
		如需设置多个 CSS 属性，请使用如下语法：
		css({"propertyname":"value","propertyname":"value",...});
		$("p").css({"background-color":"yellow","font-size":"200%"});

2、jQuery css类

(1)、addClass()
		向被选元素添加一个或多个类
		.important { font-weight:bold; font-size:xx-large; } 
		.blue { color:blue; }
		$("button").click(function(){ 
		$("h1,p").addClass("blue");
	$("div").addClass("important"); 
	});
(2)、removeClass()
	 	从被选元素删除一个或多个类
		$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
(3)、toggleClass()
		对被选元素进行添加/删除类的切换操作
		$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
(4)、eq()
 	方法返回带有被选元素的指定索引号的元素，索引号从 0 开头，所以第一个		元素的索引号是 0（不是 1）。
	$(selector).eq(index)
(5)、index()
		 index() 方法返回指定元素相对于其他同级元素的 index 位置。
		$("li").click(function(){
		  alert($(this).index());
		});
(6)、not()
		 Not() 方法返回指定元素之外的元素。
		$("input").not(".in1")
		$(‘li:eq(1)’).css(‘color’,’red’);
		3、jQuery动画 
		(1)、jQuery隐藏显示
		可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
		$("#hide").click(function(){ 
		$("p").hide(); 
		}); 
		$("#show").click(function(){ 
		$("p").show(); 
		});
		可以使用 toggle() 方法来切换 hide() 和 show() 方法。
		$("button").click(function(){ $("p").toggle(); });

(2)、jQuery淡入淡出

		fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
		$("button").click(function(){
		  $("#div1").fadeIn(); 
		$("#div2").fadeIn("slow"); 
		$("#div3").fadeOut(3000); 
		});
		 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
		$("button").click(function(){ ("#div2").fadeToggle("fast");});
		 fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
		$("button").click(function(){ $("#div1").fadeTo("slow",0.15);});

(3)、jQuery滑动

		 slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。
		$("#flip").click(function(){ $("#div1").slideDown(); $("#div1").slideUp();});
		 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
		$("#flip").click(function(){ $("#panel").slideToggle(); });

(4)、jQuery自定义动画

		animate() 方法用于创建自定义动画。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
		$("button").click(function(){ 
		$("div").animate({ 
		left:'250px', opacity:'0.5', height:'150px', width:'150px'
		 }); });
 
(5)、stop方法
		jQuery stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
		$("#stop").click(function(){ $("#panel").stop(); });
		(6)、回调函数
			在当前动画 100% 完成之后执行。
		$("button").click(function(){ 
		$("p").hide("slow",function(){ 
		alert("段落现在被隐藏了"); 
		}); });