1.介绍
jQuery 是一个 JavaScript 函数库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
2.安装
1.本地下载引用 <script src="jquery.js"></script>
2.CDN载入
1) Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
2) Microsoft CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
3.语法
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
4.文档就绪函数
文档就绪函数:$(document).ready(function(){})
是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
5.jQuery选择器
选择器允许您对元素组或单个元素进行操作。
5.1 jQuery元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
5.2 jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
5.3 jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");
5.4 jQuery其他选择器
$(this) 当前 HTML 元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
6.事件
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
实例:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素:
$("p").hide();
$(selector).click(function(){}) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
7.属性
获取属性 attr() 设置或返回匹配元素的属性和值
1.attr(‘title’) 一个参数时:获取title这个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
// console.log($('a').attr('href'));
alert($('a').attr('href'));
})
})
</script>
</head>
<body>
<a href="http://www.baidu.com">跳转百度</a>
<button>显示a标签内的href内容</button>
</body>
</html>
2.attr(‘title’,‘hello’) 两个参数时:获取title这个属性并修改成第二个参数
attr() 方法也允许您同时设置多个属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
// $('button').click(function () {
// $('a').attr('href', 'http://www.baidu.com')
// });
// attr() 方法也允许您同时设置多个属性。
$('button').click(function () {
$('a').attr({
'href': 'http://www.baidu.com',
'title': '百度'
});
});
})
</script>
</head>
<body>
<!-- <a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a>
<button>改变href的值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值。</p> -->
<a href="http://www.w3school.com.cn" id="w3s" title="W3S教程">W3School.com.cn</a>
<button>改变href的值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值。</p>
</body>
</html>
8.设置内容
设置内容 - text()、html() 以及 val()
-
text() 设置或返回所选元素的文本内容
-
html() 设置或返回所选元素的内容(包括 HTML 标记)
-
val() 设置或返回表单字段的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
// text() - 设置或返回所选元素的文本内容
// html() - 设置或返回所选元素的内容(包括 HTML 标记)
// val() - 设置或返回表单字段的值
$(document).ready(function () {
$("#btn1").click(function () {
$("#test1").text("Hello world!");
});
$("#btn2").click(function () {
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function () {
$("#test3").val("Dolly Duck");
});
})
</script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
9.添加元素
- jQuery append() 在被选元素的结尾插入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
$('p').append('<b>add appended text </b>')
});
$('#btn2').click(function () {
$('ul').append('<li>appended li </li>')
})
})
</script>
</head>
<body>
<p>This is paragraph</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
- jQuery prepend() 在被选元素的开头插入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
$('p').prepend('<b>add appended text </b>')
});
$('#btn2').click(function () {
$('ul').prepend('<li>appended li </li>')
})
})
</script>
</head>
<body>
<p>This is paragraph</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
-
jQuery after() 方法在被选元素之后插入内容。
-
jQuery before() 方法在被选元素之前插入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("img").before("<b>Before</b>");
});
$("#btn2").click(function () {
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.piaodown.com%2Fupload%2F20176%2F2017060127336317.jpg&refer=http%3A%2F%2Fwww.piaodown.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633768422&t=8eb3ee19e1e33f7c62e01c9f138331bc"/>
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>
10.删除元素
- remove() 删除被选元素(及其子元素)
remove() 方法也可接受一个参数,允许您对被删元素进行过滤。 - empty() 从被选元素中删除子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
// remove() 方法删除被选元素及其子元素。
// $('button').click(function () {
// $('.c2').remove();
// });
// remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
// jQuery empty() 方法删除被选元素的子元素。
// $('button').click(function () {
// $('.c2').empty();
// });
// 我是class1
// 我是class3
})
</script>
</head>
<body>
<div class="c1">我是class1</div>
<div class="c2">我是class2
<div class="c2.1">我是class2.1</div>
<div class="c2.2">我是class2.2</div>
</div>
<div class="c3">我是class3</div>
<button>删除class2</button>
</body>
</html>
思考:
- 明明empty删除的是选中元素的子节点,为什么class2没有了?
打开控制台查看器可以看到,class2还是存在的,但是’我是class2’就不存在了,
是因为在DOM里’我是class2’是一个文本节点,在使用empty方法删除的时候是删除他选中的子节点,
这时候文本节点也包括在内一起被删除了。
11.获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() 向被选元素添加一个或多个类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
})
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本!</div>
<br>
<button>向元素添加类</button>
</body>
</html>
- removeClass() 从被选元素删除一个或多个类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1,h2,p").removeClass("blue");
});
})
</script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p>
<br>
<button>从元素上删除类</button>
</body>
</html>
- toggleClass() 对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html lang="em">
<head>
<script src="./jquery-3.6.0.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
</html>
- css() 设置或返回样式属性
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<p style="background-color:pink">这是一个段落。</p>
<p style="background-color:chartreuse">这是一个段落。</p>
<p style="background-color:cyan">这是一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>
</html>
设置返回多个css属性
<!DOCTYPE html>
<html lang="em">
<head>
<script src="./jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css({ "background-color": "yellow", "font-size": "200%" });
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<p style="background-color:pink">这是一个段落。</p>
<p style="background-color:chartreuse">这是一个段落。</p>
<p style="background-color:cyan">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>
12.jQuery静态方法
静态方法属于定义在jQuery函数上的方法,通过jQuery或者$直接调用的方法
12.1数组及对象操作:each、map、toArray、merge
each()通用遍历方法,可用于遍历对象和数组
map()把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象
12.2测试操作:
1.type()
用于检测obj的数据类型
console.log($.type($)); //function
console.log(jQuery.type(true) === "boolean");//true
console.log(jQuery.type(3) === "number");//true
console.log(jQuery.type("test") === "string");//true
console.log(jQuery.type(function(){}) === "function");//true
console.log(jQuery.type([]) === "array");//true
2.isEmptyObject()
测试对象是否是空对象(不包含任何属性),这个方法既检测对象本身的属性,也检测从原型继承的属性
console.log(jQuery.isEmptyObject({})); // true
console.log(jQuery.isEmptyObject({ foo: "bar" })); //false
3.isPlainObject()
测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)
console.log(jQuery.isPlainObject({})); // true
console.log(jQuery.isPlainObject("test")); // false
console.log($.isPlainObject($('body')))//false
4.isNumberic()
确定它的参数是否是一个数字
$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样,它返回 true。否则,它返回false。该参数可以是任何类型的
console.log($.isNumeric("-10")); // true
console.log($.isNumeric(16)); // true
console.log($.isNumeric(0xFF)); // true
console.log($.isNumeric("0xFF")); // true
console.log($.isNumeric("8e5")); // true (exponential notation string)
console.log($.isNumeric(3.1415)); // true
console.log($.isNumeric(+10)); // true
console.log($.isNumeric(0144)); // true (octal integer literal)
console.log($.isNumeric("")); // false
console.log($.isNumeric({})); // false (empty object)
console.log($.isNumeric(NaN)); // false
console.log($.isNumeric(null)); // false
console.log($.isNumeric(true)); // false
console.log($.isNumeric(Infinity)); // false
console.log($.isNumeric(undefined)); // false
注意:其他更多关于测试的操作,例如$.isArray(obj)判断是否是数组、
$.isFunction(obj)判断是否是函数等,请移步[https://jquery.cuishifeng.cn/](https://jquery.cuishifeng.cn/)
12.3字符串操作:
1.param
将表单元素数组或者对象序列化。
var obj={name:"张三",age:12}
var str = jQuery.param(obj);
$("#results").text(str);
2.trim
去掉字符串起始和结尾的空格,多用于用户数据的清洗
console.log('--'+$.trim(" hello, how are you? ")+'--');