jQuery

jQuery ，是一个压缩后只有几十k 的轻量级 JavaScript 库，它可以用较少的代码，做 JavaScript 原本做的事情。同时也加入了一些自己的特性。

使用 jQuery
可以通过 <script> src 属性引入jQuery 文件，可以是本地文件或通过某个服务器以及 CDN 获取并引用。

JQuery（压缩版）: https://blog.glumi.cn/res/jQuery/jQueryMin.js

JQuery（未压缩版）: https://blog.glumi.cn/res/jQuery/jQuery.js

1	<script src="jQueryMin.js" type="text/javascript" charset="utf-8"></script>

测试 JQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		<script src="jQueryMin.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script>
			$(document).ready(function(){
				alert("成功引入jQuery");
			});
		</script>
	</body>
</html>

程序的入口

程序的入口即入口函数，会当网页元素加载完毕时调用。

方法1：

1
2
3

$(document).ready(function(){
    //执行代码
});

方法2：

1
2
3

$(function(){
    //执行代码
});

选择器

jQuery 选择器的写法是 $("") , $是函数名称，后面紧跟着的是函数参数，它会根据传参数值来返回不同的选择器对象。如 $("#box")，它会找到并返回 id 为 box 的元素。

语法	描述
$(“#id”)	i d 选择器
$(“.class”)	class 选择器
$(“div”)	标签选择器
$(“div a”)	后代选择器
等等……….

属性选择器,会根据属性值来匹配 HTML 元素.

语法	描述
$(“[属性名]”)	匹配具有指定属性的元素
$(“[属性名=’属性值’]”)	匹配与值相等的元素
$(“[属性名!=’属性值’]”)	匹配与值不相等的元素
$(“[属性名^=’属性值’]”)	匹配以值开头的元素
$(“[属性名$=’属性值’]”)	匹配以值结尾的元素
$(“[属性名*=’属性值’]”)	匹配包含值的元素

以 Box 设置背景和宽高为例.

1.匹配指定属性的元素

<div id="Box"></div>
<script type="text/javascript">
	$("[id]").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

2.匹配与值相等的元素

<div id="Box"></div>
<script type="text/javascript">
	$("[id='Box']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

3.匹配与值不相等的元素

<div id="Box2"></div>
<script type="text/javascript">
	$("[id!='Box']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

4.匹配以值开头的元素

<div id="Box"></div>
<script type="text/javascript">
	$("[id^='B']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

5.匹配以值结尾的元素

<div id="Box"></div>
<script type="text/javascript">
	$("[id$='x']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

6.匹配包含值的元素

<div id="BoxDiv"></div>
<script type="text/javascript">
	$("[id*='Div']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

位置选择器是 jQuery 用于快速匹配处于某个位置的 HTML 元素的一种选择器.

选择器	描述
$(“selector:first”)	匹配第一个元素
$(“selector:last”)	匹配最后一个元素
$(“selector:odd”)	匹配索引值为奇数的元素
$(“selector:even”)	匹配索引值为偶数的元素
$(“selector:eq(n)”)	匹配集合中索引为 n 的元素
$(“selector:gt(n)”)	匹配集合中索引大于 n 的元素
$(“selector:lt(n)”)	匹配集合中索引小于 n 的元素

选择器找的是网页元素 , 而选择器的方法可以做一些特别操作

方法	描述
$(“选择器”).not()	去除某个元素
$(“选择器”).add()	追加某个元素
$(“选择器”).parent()	查找父级元素
$(“选择器”).chidren()	查找下级元素
$(“选择器”).fin()	相当于后代选择器
$(“选择器”).siblings()	查找兄弟节点
$(“选择器”).nextAll()	查找元素全部的下级元素
$(“选择器”).prevtAll()	查找元素全部的上级元素
$(“选择器”).hasClass()	查找是否含有特定的类,返回布尔

DOM操作

查找 id 为 box 的元素的文本

1	$("#box").text()

在 id 为 box 的元素结尾追加元素

1	$("#box").append("<div>追加的内容</div>");

在 id 为 box 的元素开头插入内容

1	$("#box").prepend("<p>追加的内容</p>");

在 id 为 box 的元素后插入内容

1	$("#box").after("<li>插入的新目录</li>");

在 id 为 box 的元素之前插入内容

1	$("#box").before("<li>插入的新目录</li>");

找到 id 为 box 的元素并删除(包括后代元素)

1	$("#box").remove();

找到 id 为 box 的元素并清空里面的内容

1	$("#box").empty();

找到并复制 id 为 box 的元素，并添加在 body 元素中

1	$("body").append($("#box").clone());

找到 ul 下的第一个 li 元素，并替换成 <li>666</li>

1	$("ul li:eq(0)").replaceWith("<li>666</li>");

鼠标事件

鼠标点击事件

1
2
3

$("p").click(function(){
    alert("点击了p标签");
});

鼠标双击事件

1
2
3

$("p").dblick(function(){
    alert("双击了p标签");
});

鼠标移入事件

1
2
3

$("p").mouseenter(function(){
    alert("鼠标移入了p标签内");
});

鼠标移出事件

1
2
3

$("p").mouseleave(function(){
    alert("鼠标移出了p标签内");
});

鼠标悬停事件

1
2
3

$("p").hover(function(){
    alert("鼠标悬停在了p标签内");
});

键盘事件

键盘/按钮按下事件

1
2
3

$("input").keydown(function(){
    alert("按下了键盘/按钮");
});

键盘/按钮抬起事件

1
2
3

$("input").keyup(function(){
    alert("键盘/按钮抬起了");
});

键盘/按钮按下事件（获取焦点时）

1
2
3

$("input").keypress(function(){
    alert("在input获取焦点时按下了键盘/按键");
});

表单事件

当我们需要提交表单的时候，会发生表单事件,该事件只适用于 form 元素

<form>
    <input type="text">
    <input type="submit" value="提交表单">
</form>

1
2
3

$("form").submit(function(){
    alert("提交");
});

输入框获取焦点时触发的事件

1
2
3

$("input").focus(function(){
    alert("输入框获取了焦点");
});

输入框值发生改变时触发的事件

1
2
3

$("input").change(function(){
    alert("输入框的值发生改变");
});

输入框失去焦点时触发的事件

1
2
3

$("input").blur(function(){
    alert("输入框失去焦点");
});

窗口事件

视口滚动事件 scroll()当用户滚动指定元素的视窗时，会触发 scroll 事件
下面这里是一个有关视口滚动的事件，当视口发生滚动时增加滚动次数。

学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想!

滚动了0次

<div style="border:1px solid black; width:200px; height:100px; overflow:scroll;">
    学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想!
    学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想!
</div>
<p>滚动了<span>0</span>次</p>

$(function () {
    var x = 0;
    $("div").scroll(function () {
        $("span").text(x += 1);
    });
});

当浏览器窗口大小发生改变时触发 resize() 事件

1
2
3

$(window).resize(function(){
    alert("窗口大小发生改变");
});

类型转换

有关 jQuery对象和 DOM对象。我们知道在原生JS里 document.getElementsByName("div"); 这样获取的是一个存粹的 DOM 对象。而 jQuery对象。例如 $("div"); 使用起来却与原生 JS 截然不同，由于原生 JS 比 jQuery更庞大，原生的一些属性和方法 jQuery 没有给我们封装，所以要 DOM 的一些属性和方法就需要把 jQuery 对象转为 DOM 对象才能使用。相反，也是同样的道理。

DOM 对象转 jQuery 对象

<div>巴拉巴拉巴拉</div>
<script type="text/javascript">
    var mDiv = document.getElementsByTagName("div");
    //DOM 对象转成jQuery对象
    var newDiv = $(mDiv); 
    console.log(newDiv);
</script>

jQuery对象转 DOM 对象

<div>巴拉巴拉巴拉</div>
<script type="text/javascript">
	var mdiv = $("div");
    //jQuery对象 转 DOM 对象
	var newDiv = mdiv[0];
	console.log(newDiv);
</script>

前端开发 - jQuery 的使用