jQuery介绍
jQuery是一个轻量级JS库，使用十分简单；
jQuery的核心是选择器，用于获取页面元素；
jQuery提供了大量高效的方法，开发速度大幅提升；
jQuery选择器
- jQuery选择器用于选中需要操作的页面元素
- 语法1：jQuery(选择器表达式)
- 语法2：$(选择器表达式)
基本选择器
| 语法 | 说明 |
|---|---|
| $("#id") | ID选择器，指定Id元素的对象 |
| $("标签") | 元素选择器，选择指定标签名的选择器 |
| $(".class") | 类选择器，选中拥有指定css类的元素 |
| $("S1,S2,SN") | 组合选择器，对元素进行组合 |
层叠选择器
| 语法 | 说明 |
|---|---|
| $("ancestor descendant") | 后代选择器 |
| $("ancestor>descendant") | 子选择器 |
| $("prev~siblings") | 兄弟选择器 |
属性选择器
| 语法 | 说明 |
|---|---|
| $("selector[attribute=value]") | 选中属性值等于具体值的组件 |
| $("selector[attribute^=value]") | 选中属性值以某值开头的组件 |
| $("selector[attribute$=value]") | 选中属性值以某值结尾的组件 |
| $("selector[attribute*=value]") | 选中属性值包含某值的组件 |
位置选择器(不常用)
| 语法 | 说明 |
|---|---|
| $("selector:first") | 获取第一个元素 |
| $("selector:last") | 获取最后一个元素 |
| $("selector:even") | 获取偶数位置的元素(从0开始) |
| $("selector:odd") | 获取奇数位置的元素(从0开始) |
| $("selector:eq(n)") | 获取指定位置的元素(从0开始) |
表单选择器(不常用)
| 语法 | 说明 |
|---|---|
| $("selector:input") | 所有输入元素 |
| $("selector:text") | 获取文本框 |
| $("selector:password") | 获取密码框 |
| $("selector:submit") | 获取提交按钮 |
| $("selector:reset") | 获取重置按钮 |
| ... |
操作元素属性
- attr(name|properties|key) - 获取或设置元素属性
$("a[href*='163']").attr("href", "http://www.163.com");将网易邮箱地址改为网易主页地址 - removeAttr(name) - 移除元素属性
$("a").removeAttr("href");将所有a标签的href属性移除
操作元素的CSS样式
- css() - 获取或设置匹配元素的样式属性
$("a").css("color", "red");将所有a标签的color样式设置为red
$("a").css({"color":"red","font-weight":"bold"});传入JSON对象一次设置多个属性值 - addClass() - 为每个匹配的元素添加指定的类名
$("li").addClass("highlight myclass");为li标签增加两个css类 - removeClass() - 从所有匹配的元素中删除全部或者指定的类
$("p").removeClass("myclass");移除p标签的myclass类
设置元素内容
- val() - 获取或设置输入项的值
$("input[name='username']").val();获取文本框的值
$("input[name='username']").val("请输入姓名");设置文本框的值 - text() - 获取或设置元素的纯文本
$("span").text("<b>你好啊！</b>");将span中的内容设置为<b>你好啊</b>(文本中的html标签进行转义) - html() - 获取或设置元素内部的HTML
$("span").html("<b>你好啊！</b>");将span中的内容设置为你好啊！(文本中的html标签不进行转义)
jQuery事件处理方法
- on("click", function) - 为选中的页面元素绑定单击事件
- click(function) - 是绑定事件的简写形式
- 处理方法中提供了event参数包含了事件的相关信息
jQuery常用事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| mouseover |
实例
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>
<style type="text/css">
.div1 {
float: left;
50px;
line-height: 30px;
background-color: lightgray;
margin-left: 10px;
text-align: center;
vertical-align: middle;
}
.div2 {
300px;
height: 300px;
border: solid gray 1px;
margin-top: 60px;
color: red;
}
</style>
</head>
<body>
<h2>请选择背景颜色</h2>
<div>
<div id="blue" class="div1">蓝色</div>
<div id="green" class="div1">绿色</div>
</div>
<div class="div2" id="bg"></div>
<div>
输入颜色首字母： <input type="text" name="color">
</div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
alert("欢迎来到设置颜色的页面");
$("#blue").click(function(){
$("#bg").css("background-color", "blue");
$("#bg").text("蓝色背景");
});
$("#green").click(function(){
$("#bg").css({"background-color":"green","font-weight":"bold"});
$("#bg").text("绿色背景");
});
$("input[type='text']").keypress(function(event){
if(event.keyCode == 66){
$("#bg").css("background-color", "blue");
$("#bg").text("");
}
if(event.keyCode == 71){
$("#bg").css("background-color","green");
$("#bg").text("");
}
});
</script>
</body>
</html>