喜迎
牛年

前端开发 - jQuery 的使用

Posted by 陈陈菌 on 2020-12-07
Estimated Reading Time 8 Minutes
Words 2.1k In Total
Viewed Times

jQuery

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

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

测试 JQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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.匹配指定属性的元素

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

2.匹配与值相等的元素

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

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

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

4.匹配以值开头的元素

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

5.匹配以值结尾的元素

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

6.匹配包含值的元素

1
2
3
4
<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 元素

1
2
3
4
<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

1
2
3
4
5
<div style="border:1px solid black; width:200px; height:100px; overflow:scroll;">
学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想!
学的不仅仅是技术,更是梦想! 学的不仅仅是技术,更是梦想!
</div>
<p>滚动了<span>0</span></p>
1
2
3
4
5
6
$(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 对象

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

jQuery对象 转 DOM 对象

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