一、使用方法
jQuery 不需要安装，要使用它只需要引入一个 js 文件即可，该文件可以放在外部站点上，也可以放在自己的服务器上。但是在实际开发过程中还是使用本地服务器更加方便一些。
各大开发公司都提供 jquery 下载的 CDN，本课件以百度 CDN 的 jquery 2.1.4 为基础。可以使用下面的路径引入 jquery。
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
在实际开发中，第三方服务器可能由于网络，自启等第三方因素导致 jquery 不能访问，所以建议将其下载到本地。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>引用jQuery库</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="div"></div>
<script>
// document.getElementById("div").innerHTML="hello world！"
$("#div").html("hello world！！");
</script>
</body>
</html>
在引用样式表文件的代码之后，是包含 JavaScript 文件的代码，这里需要注意的是，引用 jQuery 库文件的<script>标签，必须放在引用自定义脚本文件的<script> 标签之前。否则，在自定义脚本文件中编写的代码中将引用不到 jQuery 框架。
二、选择器
jQuery 允许通过标签名、属性名或内容对 DOM 元素进行快速、准确的选择，而不必担心浏览器的兼容性。与传统的 JavaScript 获取页面元素和编写事务相比，jQuery 选择器具有明显的优势。
基本选择器：基本选择器是 jQuery 中使用最频繁的选择器，它由元素 id、class、元素名、多个选择符组成， 通过基本选择器可以实现大多数页面元素的查找，其具体使用说明如下所示。
#id 根据提供的id属性值匹配一个元素 单个元素
Element 根据提供的元素名匹配所有的元素 元素集合
.class 根据提供的类名称匹配所有的元素 元素集合
* 匹配所有元素 元素集合
s1,sn 将每一个选择器匹配到的元素合并后-起返回 元素集合
案例:
<body>
<div id="div"></div>
<span></span>
<span></span>
<span></span>
<div class="class_div"></div>
<div class="class_div"></div>
<div class="class_div"></div>
<div class="class_div"></div>
<ul class="my_div">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/jquery.js"></script>
<script>
$("#div").html("hello world!")
$("span").html("123465")
$(".class_div").html("<h1>123465</h1>")
$(".my_div li").text("<h1>123</h1>")
$(".my_div li,span").text("<h1>1</h1>")
</script>
</body>
三、增加节点
要在页面中动态创建 一个 div 元素，并设置其内容与属性，具体代码如下所示：
var div = "<div class='new_class'>创建的新的div块</div>";
$("body").append(div);
从上面可知，在页面中动态创建元素需要执行节点的插入或追加操作。而在 jQuery 中，有很多方法可以实现该功能，上述例子用到的 append() 方法仅仅是其中一种， 按照插入元素的顺序来划分，可以将插入节点分为内部插入和外部插入两种方法。
①内部插入节点
②外部插入节点
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>java 学习平台</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<span id="span3">3</span>
<div id="append">
<span>1</span>
</div>
<div id="prepend">
<span>1</span>
</div>
<script>
$("#append").append("<span>2</span>");
$("#append").append($("#span3"));
$("#prepend").prepend("<span>2</span>");
$("#append").after("<span>4</span>");
$("#append").before("<span>5</span>");
</script>
</body>
</html>
四、删除节点
在 DOM 操作页面时，删除多余或指定的页面元素是经常使用到的，jQuery 提供了两种可以删除元素的方法，即 remove() 和 empty() 。严格的说，empty() 方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包含的所有后代元素，并非删除节点与元素。remove() 方法的语法结构如下所示：
remove([expr])
其中参数 expr 为可选项，如果接受参数，则该参数为筛选元素的 jQuery 表达式，通过该表达式获取指定的元素进行删除。
empty() 方法的语法结构如下所示：
empty()
其功能为清空所选择的页面元素及其所有后代元素。
案例：
<body>
<ul>
<li title="1">这是第一条新闻</li>
<li title="2">这是第二条新闻</li>
<li title="3">这是第三条新闻</li>
<li title="4">这是第四条新闻</li>
</ul>
<input type="button" value="删除操作" id="btn1"/>
<input type="button" value="清空操作" id="btn2"/>
<script>
//单击事件
$("#btn1").click(function () {
$("ul li").remove("li[title=1]");
$("ul li:eq(2)").remove();
})
$("#btn2").click(function () {
$("ul").empty();
})
</script>
</body>
五、替换遍历节点
在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 方法， replaceWith() 方法的语法结构如下所示：
replaceWith(content)
该方法的功能是将所有选择的元素替换为执行的 HTML 或 DOM 元素，其中参数 content 为被所选元素替换的内容。
案例:
<body>
<div>
<p>姓名：<span id="span1">张三</span></p>
<p>班级：<span id="span2">计科1班</span></p>
<input type="button" value="点击替换" id="btn"/>
</div>
<span id="span3">测试</span>
<script>
//单击事件
$("#btn").click(function () {
$("#span1").replaceWith("<span>李四</span>");
$("#span2").replaceWith($("#span3"));
})
</script>
</body>
遍历节点
在 DOM 元素操作中，有时需要对统一标记的全部元素进行统一操作。 在 JavaScript 中，需要先获取元素的总长度，然后用 for 语句循环处理。而在 jQuery 中可以直接使用 each() 方法轻松实现元素的遍历，其语法结构如下所示：
each(callback)
其中参数 callback 是一个 function 函数，该函数还可以接受一个形参 index 和 当前遍历的 DOM 元素（不是 jQuery 对象），此形参为遍历元素的序号(从 0 开始)；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取。
案例：
<ul>
<li>这是第一条新闻</li>
<li>这是第二条新闻</li>
<li>这是第三条新闻</li>
<li>这是第四条新闻</li>
</ul>
<input type="button" value="为新闻添加序号" id="btn"/>
<script>
//单击事件
$("#btn").click(function () {
$("ul li").each(function (i, j) {
console.info(i, j)
console.info(j.innerHTML)
console.info($(j).html())
//为新闻添加序号
let content = $(this).text();
console.info(content)
$(this).html(i + 1 + "、" + content);
})
})
</script>
六、属性样式操作
在 jQuery 中，可以对元素的属性执行获取、设置、删除操作。通过 attr() 方法可以对元素属性执行获取与设置操作，通过 removeAttr() 方法则可以执行删除元素属性操作。
(1)获取元素属性
可通过attr()方法获取元素的属性，其语法结构如下所示：
attr(name)
其中，参数 name 表示属性的名称，以元素属性名称为参数来获取元素的属性值。
(2)设置元素的属性
在页面中，attr() 方法不仅可以用来获取元素的属性值，还可以用来设置元素的属性，其设置元素属性的语法格式如下所示：
attr(key,value)
其中参数 key 表示属性的名称，value 表示属性的值。如果要设置多个属性，也可通过 attr() 方法 实现，其语法结构如下所示：
attr({key0:value0,key1:value1})
(3)删除元素属性
jQuery 中通过 attr() 方法设置元素的属性后，使用 removeAttr() 方法可以将元素的属性删除，其语法结构如下所示：
removeAttr(name)
其中，参数 name 为元素属性的名称。
<body>
<ul title="新闻列表">
<li>这是第一条新闻</li>
<li>这是第二条新闻</li>
<li>这是第三条新闻</li>
<li>这是第四条新闻</li>
</ul>
<input type="button" value="属性操作" id="btn"/>
<script>
$("#btn").click(function () {
console.info($("ul").attr("title"));
$("ul").attr("title", "我的新闻列表");
$("ul").attr({"title": "我的新闻列表", class: "list"});
$("ul").removeAttr("title");
})
</script>
</body>
样式操作
在页面中，元素的样式操作包含直接设置样式、增加 CSS 类别、类别切换、删除类别四部分。
(1)直接设置元素样式
在 jQuery 中可以通过 css() 方法直接为某个指定的元素设置样式值，其语法结构如下所示：
css(name,value)
其中 name 为样式名称，value 为样式的值，比如可以使用下面的代码使 p 元素字体变粗，其语法结构如下所示：
$("p").css("font-weight","bold");
(2)增加 CSS 类别
通过 addClass() 方法可以增加元素类别的名称，其语法结构如下所示：
addClass(class)
其中，参数 class 为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法结构如下所示：
addClass(class0 class1..)
(3)类别切换
通过 toggleClass() 方法可以切换不同的元素类别，其语法结构如下所示：toggleClass(class) 其中参数 class 为类别名称，其功能是当元素中含有名称为 class 的 CSS 类别时，删除该类别名称，否则增加一个该名称的 CSS 类别。
$(".div_frame").click(functionO{
$(this).toggleClass("divred");
})
(4)删除类别
与增加 CSS 类别的 addClass() 方法相对应，removeClass() 方法则用于删除类别，其语法结构如下所示：
removeClass([class])
其中，参数 class 为类别名称，该名称是可选项，当选择该名称时，则删除名称是 class 的类别， 有多个类别时用空格隔开。如果不选择该名称，则删除元素中的所有类别。
案例：
<body>
<ul title="新闻列表">
<li>这是第一条新闻</li>
<li>这是第二条新闻</li>
<li>这是第三条新闻</li>
<li class="red add">这是第四条新闻</li>
</ul>
<input type="button" value="样式操作" id="btn"/>
<script>
$("#btn").click(function () {
$("li:eq(0)").css("font-weight", "bold");
$("li:eq(1)").addClass("red")
$("li:eq(2)").toggleClass("red")
$("li:eq(3)").removeClass("red")
$("li:eq(3)").removeAttr("class")
})
</script>
</body>
练习：
1.按照设计图完成如下编码
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>章节练习</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<style>
* {
margin: 0;
padding: 0
}
.loadTxt {
height: 50px;
line-height: 50px;
width: 531px;
text-align: center;
font-size: 30px;
color: #29B6FF;
font-family: Arial;
margin: 0 auto;
}
.loadBox {
height: 15px;
background: #F5FAFD url(img/test2.jpg) no-repeat left center;
width: 471px;
position: relative;
padding: 0 30px;
margin: 0 auto;
}
.loadBox img {
position: absolute;
left: 50px;
top: 0;
}
</style>
</head>
<body>
<div class="loadTxt">加载中<span>.</span><span>.</span><span>.</span></div>
<div class="loadBox">
<img src="img/test1.jpg"/>
</div>
<script>
var delVal = 50;
function autoMove() {
delVal++;
if (delVal > 400) {
delVal = 50;
}
$(".loadBox img").css("left", delVal);
}
setInterval(autoMove, 8);
function autoTsq() {
$(".loadTxt span").css("color", "#F5FAFD");
setTimeout(function () {
$(".loadTxt span").eq(0).css("color", "#29B6FF")
}, 0);
setTimeout(function () {
$(".loadTxt span").eq(1).css("color", "#29B6FF")
}, 500);
setTimeout(function () {
$(".loadTxt span").eq(2).css("color", "#29B6FF")
}, 1000);
}
setInterval(autoTsq, 1500);
</script>
</body>
</html>
七、内容操作
在 jQuery 中，操作元素内容的方法包括 html() 和 text()，前者与 JavaScript 中的 innerHTML 属性相似，即获取和设置元素的 HTML 内容；而后者类似于 JavaScript 中的 innerText 属性，即获取或设置元素的文本内容。
二者的语法格式和功能区别如下所示。
html() 用于获取元素的HTML内容 无
html(value) 用于设置元素的HTML内容 参数为元素的HTML内容
text() 用于获取元素的文本内容 无
text(value) 用于设置元素的文本内容 参数为元素的文本内容
在 jQuery 中，如果要获取 input、select 元素的值，可以通过 val() 方法来实现，其语法结构如下所示：
val(value)
如果不带参数 value，则是获取元素的值：反之则是将参数 value 的值赋给元素，该方法常用于表单中获取和设置元素对象的值，另外通过 val() 方法还可以获取 select 元素的多个选项值，其语法结构如下所示：
val().join(",")
案例：
<body>
<div class="divframe">
<select multiple="multiple">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<p id="p1"></p>
</div>
<div>
<input type="text"/>
<p id="p2"></p>
</div>
<script>
//列表框值发生改变事件
$("select").change(function () {
//获取列表框所选中的全部选项的值
var strSelect = $("select").val().join(",");
//显示选中的值
$("#p1").html(strSelect);
});
//文本框值发生改变事件（需要失去焦点才校验文本内容发生变化）
$("input").change(function () {
//获取文本框的值
var strText = $("input").val();
//显示选中的值
$("#p2").html(strText);
});
//文本框focus事件
$("input").focus(function () {
//清空文本框的值
$("input").val("");
});
</script>
</body>
在 val(value) 方法中，如果有参数，其参数还可以是数组的形式，即 val(array)，其作用是设置元素被选中。
练习：手风琴菜单：按照如下设计图完成练习，点击对应的父菜单展开内部的子菜单。再次点击又折叠子菜单。
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #09fbd2;
text-align: center;
}
.menu {
text-align: left;
width: 400px;
margin: 20px auto;
}
.menu .list {
border-bottom: 1px solid #324252;
list-style: none;
background: #3e5165;
}
.menu .list a {
text-decoration: none;
color: #fff;
padding: 17px 0px 17px 45px;
display: block;
height: 100%;
}
.menu .list > a {
padding-left: 10px;
}
.menu .list > a:before {
content: "▶";
margin-right: 10px;
color: white;
}
.menu .list.active > a:before {
content: "▼";
}
.menu .list > a:after {
content: "△";
float: right;
margin-right: 20px;
color: white;
}
.menu .list.active > a:after {
content: "▽";
}
.menu .list a:hover {
background-color: #576676;
color: #09fbd2;
}
.menu .items li {
background-color: #324252;
padding: 0px;
border-bottom: 1px solid #3e5165;
list-style: none;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<h1>手风琴菜单(Accordion Menu)</h1>
<ul class="menu">
<li class="list"><a href="#">系统管理</a>
<ul class="items">
<li><a href="#">用户管理</a></li>
<li><a href="#">角色管理</a></li>
<li><a href="#">资源管理</a></li>
</ul>
</li>
<li class="list"><a href="#">商品配置</a>
<ul class="items">
<li><a href="#">商品分类</a></li>
<li><a href="#">商品规格</a></li>
<li><a href="#">商品价格</a></li>
</ul>
</li>
<li class="list"><a href="#">业务管理</a>
<ul class="items">
<li><a href="#">订单业务</a></li>
<li><a href="#">拼团业务</a></li>
<li><a href="#">营销业务</a></li>
</ul>
</li>
</ul>
<script>
$(".items").css("display", "none");
function accordion() {
if ($(this).find(".items").css("display") == "block") {
$(this).find(">a").css({
"color": "#fff",
"font-weight": "normal",
})
$(this).removeClass("active")
$(this).find(".items").css("display", "none")
} else {
$(this).find(">a").css({
"color": "#09fbd2",
"font-weight": "bold",
})
$(this).addClass("active")
$(this).find(".items").css({"display": "block"});
}
}
$('.list').bind('click', accordion);
</script>
</body>
</html>
2.星级评分：使用 jquery 完成如下的星级评分模块。
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星级评分</title>
<style>
* {
margin: 0;
padding: 0
}
.stars {
margin: 10px;
padding: 10px;
border: 1px saddlebrown solid;
}
.stars span {
float: left;
height: 30px;
line-height: 30px;
}
.stars i {
width: 30px;
height: 30px;
line-height: 30px;
float: left;
margin-right: 30px;
background: #ccc;
color: #fff;
text-align: center;
cursor: default;
font-style: normal;
}
.stars .on {
color: #a71417;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="stars">
<span>商品评价：</span>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<input type="text"/>
</div>
<div class="stars">
<span>商家评价：</span>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<input type="text"/>
</div>
<div class="stars">
<span>物流评价：</span>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<input type="text"/>
</div>
<script>
$('.stars i').click(function () {
let num = $(this).index();
$(this).parent().children('i').removeClass('on');
$(this).addClass('on').prevAll('i').addClass('on');
$(this).siblings('input').val(num);
});
$('.stars i').mouseover(function () {
$(this).parent().children('i').removeClass('on');
$(this).addClass('on').prevAll('i').addClass('on');
});
$('.stars i').mouseout(function () {
$(this).parent().children('i').removeClass('on');
let score = $(this).siblings('input').val();
for (let i = 0; i < score; i++) {
$(this).parent().find('i').eq(i).addClass('on');
}
});
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
