jQuery——JavaScript 库
- jQuery官网：jquery.com
- jQuery采用独立JS文件发布：jquery-3.x.js
- IDE：Eclipse、Hbuilder、sublime、webstorm
jQuery下载安装
在官网下载：压缩的和未压缩的版本，在学习过程中可以使用未压缩版，线上使用压缩版提高效率
Download the compressed, production jQuery 3.6.0 slim build
Download the uncompressed, development jQuery 3.6.0 slim build
将js文件包放到webapp\js文件夹下备用
jQuery选择器实验室
输出要选择的标签名（或者后面的选择器格式），点击选择按钮将页面中所有该标签设置高亮样式
lab.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实验室</title>
<style>
.myclass{
font-style:italic;
color:darkblue;
}
/*高亮css类*/
.highlight{
color:red;
font-size:30px;
background:lightblue;
}
</style>
</head>
<body>
<div class="section">
<h2>jQuery选择器实验室</h2>
<input style="height:24px" id="txtSelector"/>
<button id="btnSelect" style="height:30px">选择</button>
<hr/>
<div>
<p id="welcome">欢迎来到选择器实验室</p>
<ul>
<li>搜索引擎：<a href="http://www.baidu.com">百度</a><span> <a style="color:darkgreen" href="http://www.so.com">360</a></span>
<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a><span> <a style="color:darkgreen" href="http://mail.qq.com">QQ邮箱</a></span>
<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a><span> <a style="color:darkgreen" href="http://www.pku.edu.cn">北京大学</a></span>
</ul>
<span class="myclass">我是拥有myclass类的span标签</span>
<p class="myclass">我是拥有myclass类的p标签</p>
<form id="info" action="#" method="get">
<div>
用户名：<input type="text" name="uname" value="admin" />密码：<input type="password" name="upsd" value="123456"/>
</div>
<div>
婚姻状况：<select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div calss="left clear-left">
<input type="submit" value="提交" /><input type="reset" value="重置" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
document.getElementById("btnSelect").onclick = function(){
var selector = document.getElementById("txtSelector").value;
//jquery的选择器
//在增加高亮之前移除所有的highlight类
$("*").removeClass("highlight");
//选择器将输入的标签名进行高亮显示
$(selector).addClass("highlight");
}
</script>
</body>
</html>
web页面开发的两个要素
在使用HTML开发页面时，有两个基本要点：
- 选择HTML页面上在哪些元素
- 在这些元素上做哪些动作
jQuery选择器
jQuery选择器用于选中需要操作的页面元素
语法1：jQuery（选择器表达式）
语法2：$（选择器表达式）
基本选择器
基本选择器是jQuery最基础也是最常用的选择器表达式
| 语法 | 说明 |
|---|---|
| $(“#id”) | ID选择器，指定ID元素的对象 |
| $(“标签”) | 元素选择器，选择指定标签名的选择器 |
| $(“.class”) | 类选择器，选中拥有指定css类的元素 |
| $(“S1,S2,SN”) | 组合选择器，对元素进行组合 |
层叠选择器
层叠选择器是根据元素的位置关系来获取元素的选择器表达式
| 语法 | 说明 |
|---|---|
| $(“ancestor descndant”) | 后代选择器（选中祖先节点下所有节点） |
| $(“ancestor>descendant”) | 子选择器（只选中父节点的直接子节点） |
| $(“prev~siblings”) | 兄弟选择器（选中同级的兄弟节点） |
例子：span~p
属性选择器
属性选择器是根据元素的属性值来选择元素的选择器表达式
| 语法 | 说明 |
|---|---|
| $(“selector[attribute=value]”) | 选中属性值等于具体值的组件 |
| $(“selector[attribute^=value]”) | 选中属性值以某值开头的组件 |
| $(“selector[attribute$=value]”) | 选中属性值以某值结尾的组件 |
| $(“selector[[attribute*=value]]”) | 选中属性值包含某值的组件 |
例子：a[href^="http://www.baidu"]
位置选择器
位置选择器是指通过位置获取指定的元素，例如“获取第三个元素”
| 语法 | 说明 |
|---|---|
| $(“selector:first”) | 获取第一个元素 |
| $(“selector:last”) | 获取最后一个元素 |
| $(“selector:even”) | 获取偶数位置的元素(从0开始) |
| $(“selector:odd”) | 获取奇数位置的元素(从0开始) |
| $(“selector:eq(n)”) | 获取指定位置的元素(从0开始) |
例子：.myclass:first li:eq(2)
表单选择器
表单选择器是获取表单的简化形式，例如：获取所有文本框
| 语法 | 说明 |
|---|---|
| $(“selector:input”) | 所有输入选中 |
| $(“selector:text”) | 获取文本框 |
| $(“selector:password”) | 获取密码框 |
| $(“selector:submit”) | 获取提交按钮 |
| $(“selector:reset”) | 获取重置按钮 |
| … | … |
例子：:text :input
操作元素属性
- attr(name|properties|key) - 获取或设置元素属性
- removeAttr(name) - 移除元素属性
sample1.html 下方script部分
<script type="text/javascript">
var href_attr = $("a[href*='163']").attr("href"); //获取属性href
alert(href_attr);
$("a[href='163']").attr("href","www.163.com"); //设置属性href
//如果选择器选择多个属性，则attr会返回第一个属性；但是注意：设置属性值的时候，会设置所有选择的属性值
var attr = $("a").attr("href");
alert(attr);
//移除a标签的所有href属性
$("a").removeAttr("href");
</script>
操作元素CSS属性
- css() - 获取或设置匹配元素的样式属性
- addClass() - 为每个匹配的元素添加指定的类名
- removeClass() - 从所有匹配元素中删除全部或指定的类
sample2.html 下方script部分
<script type="text/javascript">
//设置单个css属性
//$("a").css("color","red");
//传入json设置多个css属性
$("a").css({"color":"red","font-weight":"bold","font-style":"italic"});
//$("li").addClass("highlight");
$("li").addClass("highlight mycalss"); //设置多个标签定义的css类
$("p").removeClass("myclass"); //移除指定标签的css类
var color = $("a").css("color");
alert(color);
</script>
设置元素内容
- val() - 获取或设置输入项的值
- text() - 获取或设置元素的纯文本
- html() - 获取或设置元素内部的HTML
sample3.html 下方script部分
<script type="text/javascript">
$("input[name='uname']").val("administrator"); //设置属性值
var v = $("input[name='uname']").val(); //获取属性值
alert(v);
//text与html方法最大的区别在于对文本中的html标签是否进行转义；text不转义，html转义
$("span.myclass").text("<b>你好啊啊啊啊啊</b>"); //设置元素的纯文本
//$("span.myclass").html("<b>你好啊啊啊啊啊</b>");
//不传参数获取内容；在平时开发中没有特别的需要使用text()方法，如果需要获取html处理则用html()
var vspan = $("span.myclass").text();
alert(vspan);
</script>
jQuery事件处理方法
on(“click”, function) - 为选中的页面元素绑定单机事件
click(function) - 是绑定事件的简写形式，和上面功能相同
处理方法中提供了event参数包含了事件的相关信息
jQuery常用事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click单机 | keypress完整的键盘按下，弹起的一次过程 | submit提交 | load文档加载时 |
| dblclick双击 | keydown某键按下 | change输入项内容变化 | resize文档或窗口尺寸发生变化时 |
| mouseenter鼠标移入 | keyup某键弹起 | focus某一个表单获得焦点 | scroll窗口滚动时 |
| mouseleave鼠标移出 | blur某一个表单失去焦点 | unload窗口关闭或卸载时 | |
| mouseover鼠标在组件上移动的过程 |
sample3.html 下方script部分
<script type="text/javascript">
$("p.myclass").on("click",function(){
//$(this)是指当前事件产生的对象
$(this).css("background-color","yellow");
});
$("span.myclass").click(function(){
$(this).css("background-color","lightgreen");
});
//设置当键盘输入空格变为红色,通过控制台可以看到空格的keyCode32
$("input[name='uname']").keypress(function(event){
console.log(event);
if(event.keyCode==32){
$(this).css("color","red");
}
});
</script>
3133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
