一、jQuery基础
1.简介
? jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作。简单的说是高级版的JS。
? JS可以操作DOM，响应事件。原生的JS操作DOM，响应事件，需要很多步骤，调用很多函数、属性才能完成DOM、事件、动画的处理。比如Ajax使用异步对象需要四个步骤，不大方便。
? jQuery就相当于一个工具类。提供了一些方法简化操作。用它使用Ajax是十分方便的。现在几乎所有浏览器都支持jQuery的使用。
? 特点：跨浏览器使用。
1.2下载
? 官网下载即可。两个版本：压缩版体积比较小，适合项目上线后使用。未压缩版相对较大，可读性比较好，适合开发阶段使用。
###1.3.jQuery优点
? (1)少写代码，多做事情
? (2)免费，开源且轻量级的js库，容量很小。
? (3)兼容市面上的主流浏览器
? (4)能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步Ajax功能。
? (5)文档手册很详细。
? (6)成熟的插件可供选择，多种js组件，例如日历组件。
? (7)出错后，有一定的提示信息。
? (8)不用在HTML里面通过<*script >标签插入大量js调用命令。
##2.jQuery使用（环境搭建）
2.1步骤
? 1.需要在你的项目中加入jQuery的文件。idea中是把jQuery放在webapp目录下，一般是创建一个js目录。存放js文件的。对于HBuilder工具，放在项目的js目录中就可以了。
? HBuilder中项目文件下新建JS文件夹。把jQuery.js放到js目录下。
? 2.创建一个HTML文件或者jsp都可以，在文件中使用。
<script type="text/javascript" src="jQuery的文件的相对路径"></script>
? 3.在js代码中，调用jQuery中的函数。
2.1测试环境
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个jQuery例子</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("使用jquery了");
})
$(document).ready(myinit());
function myinit(){
alert("=====相当于οnlοad=====");
}
</script>
</head>
<body>
</body>
</html>
2.2更加简化的方式
$(function(){
alert("简单的方式使用ready");
})
PS:没有提示的话注意修改语法提示库。
3.对象的分类与转换
? 分为dom对象和jquery对象。在一个文件中同时存在两种对象。
1.dom对象
? 使用js的代码获取，创建的对象。html中的对象都是dom对象。
2.jquery
? 使用jquery获取的对象。
为什么要使用dom对象，还有jquery对象？
? 目的是要dom对象的函数或者属性，以及使用jquery中提供的函数或者属性。用dom中的内容就使用dom对象，要使用jquery函数库中的函数需要使用jquery对象。
? dom对象和jquery对象可以互相转换的。
3.1DOM对象转换jQuery对象
? 使用$(DOM对象)方式，可以DOM对象转换为jQuery对象，转换为jQuery对象才可以使用jQuery中的提供的方法，操作DOM对象。一般情况下，在命名jQuery为了与DOM对象进行区分，习惯性以这个符号开头进行区分，但这不是必须的。
<input type="text" id="t1"/>
var dom = document.getElementById("t1");
var jqueryObj = $(dom);
jqueryObj.val();
提示：为了区分dom对象和jQuery对象，可以在jQuery对象变量名上，加一个$，例如
var $jqueryObj = $(dom);
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个jQuery例子</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
var obj = document.getElementById("btn");
var $jobj = $(obj);
alert($jobj.val());
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="btnClick()"/>
</body>
</html>
3.2jQuery对象转换DOM对象
语法：jquery对象是一个数组，数组成员是dom对象。使用[下标]或get(下标)
<input type="text" id="txt1">
；
var obj = $("#txt1");
var dom = obj[0];
var dom = obj.get(0);
alert(dom.value);
示例：计算平方值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery转dom</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
var $obj = $("#txt1");
var dom = $obj[0];
var num = dom.value;
dom.value = num*num;
}
</script>
</head>
<body>
<input type="text" id="txt1" value="请输入整数"/>
<br />
<input type="button" id="btn" value="计算平方" onclick="btnClick()"/>
</body>
</html>
二、选择器
? 选择器：就是定位条件；jquery函数定位满足条件的DOM对象。定位对象的字符串。使用这个字符串作为条件定位dom对象。
? 可以使用id，class样式名称，标签名称等作为选择器使用，定位dom对象。
1.基本选择器
##1.1id选择器、class选择器、标签选择器
? 根据ID，class属性，标签类型名定位HTML元素，转为jQuery对象。
? 1.使用dom对象的id作为条件。
$("#id");
? 2.class选择器，使用对象的class名称定位dom对象。
$(".class名称");
? 3.标签选择器，使用标签名称作为条件定位dom对象。
$("标签名称0");
1.1选择器实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery转dom</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
font-size: 20pt;
color: aqua;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
var obj = $("#one");
obj.css("background","red");
}
function fun2(){
var obj = $(".two");
obj.css("background","blue");
}
function fun3(){
var obj = $("div");
obj.css("background","green");
}
</script>
</head>
<body>
<div id="one">我是id=one的div</div>
<br />
<div class="two">我是class=two的div</div>
<br />
<div>没有id,class</div>
<br />
<span>我是span</span>
<br />
<br />
<input type="button" value="获取id=one的dom对象" onclick="fun1()"/>
<br />
<input type="button" value="获取class=two的dom对象" onclick="fun2()"/>
<br />
<input type="button" value="获取标签是div的dom对象" onclick="fun3()"/>
</body>
</html>
1.2所有选择器和组合选择器
? 4.所有选择器:选取页面中所有DOM对象。
$("*");
? 5.组合选择器
? 组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id，class，标签名等。可以任意组合。
$("#id,.class,标签名");
1.2实例
function fun4(){
var obj = $("*");
obj.css("background","orange");
}
function fun5(){
var obj = $("#one,span");
obj.css("background","yellow");
}
<input type="button" value="获取所有的dom对象" onclick="fun4()"/>
<br />
<input type="button" value="获取组合选择的dom对象" onclick="fun5()"/>
2.表单选择器
? 表单选择器使用dom对象的type属性值定位dom对象的，和form标签无关。
? 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单form，均可做出相应的选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的。
<input type="text ">
<input type="password ">
<input type="radio ">
<input type="checkbox ">
<input type="button ">
<input type="file ">
<input type="submit ">
<input type="reset">
PS: $(":tr"):不能用，tr不是input标签。
? 语法：
$(":type属性值");
2.1实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
font-size: 20pt;
color: aqua;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
var obj = $(":text");
alert(obj.val());
}
function fun2(){
var obj = $(":radio");
for(var i = 0;i<obj.length;i++){
var dom = obj[i];
alert("dom的属性="+dom.value+",使用jQuery的函数="+$(dom).val());
}
}
function fun3(){
var obj = $(":checkbox");
for(var i = 0;i<obj.length;i++){
alert($(obj[i]).val());
}
}
</script>
</head>
<body>
<p>文本框</p>
<input type="text" value="我是type=text"/><br/>
<p>radio</p>
<input type="radio" value="man"/>男<br/>
<input type="radio" value="woman"/>女<br/>
<br />
<p>checkbox</p>
<input type="checkbox" value="bike"/>骑行 <br />
<input type="checkbox" value="football"/>足球 <br />
<input type="checkbox" value="music"/>音乐 <br />
<br />
<br />
<input type="button" value="读取文本框的value值" onclick="fun1()"/>
<br />
<input type="button" value="读取radio的value值" onclick="fun2()"/>
<br />
<input type="button" value="读取checkbox的value值" onclick="fun3()"/>
</body>
</html>
三、过滤器
? jQuery对象中存储的DOM对象顺序与页面标签声明位置关系。
? 过滤器是一个字符串，用来筛选dom对象的，过滤器是和选择器一起使用的。在选择了dom对象后，再进行过滤筛选。
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") ==[dom1,dom2,dom3]
? 过滤器就是过滤条件，对已经定位到数组中DOM对象进行过滤筛选，过滤条 件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。
3.1基本过滤器
? 使用dom对象在数组中的位置，作为过滤条件的。
? 1.选择第一个first，保留数组中第一个DOM对象
$("选择器：first");
? 2.选择最后个last，保留数组中最后DOM对象。
$("选择器：last");
? 3.选择数组中指定对象
$("选择器：eq（数组索引）");
? 4.选择大于某个下标的所有成员
$("选择器:gt(下标)")；
? 5.选择小于某个下标的所有成员。
$("选择器:lt(下标)");
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
alert("button单击了，执行处理函数");
})
$("#btn1").click(function(){
var obj = $("div:first");
obj.css("background","blue");
alert(obj.val());
})
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","red");
})
$("#btn3").click(function(){
$("div:eq(3)").css("background","red");
})
$("#btn4").click(function(){
$("div:lt(3)").css("background","orange");
})
$("#btn5").click(function(){
$("div:gt(3)").css("background","red");
})
});
</script>
</head>
<body>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>
我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br />
<br />
<span>我是span</span>
<br />
<br />
<input id="btn" type="button" value="绑定事件" /><br />
<input id="btn1" type="button" value="获取第一个div" /><br />
<input id="btn2" type="button" value="获取最后一个div" /><br />
<input id="btn3" type="button" value="选择下标等于3的div" /><br />
<input id="btn4" type="button" value="选择下标小于3的div" /><br />
<input id="btn5" type="button" value="选择下标大于3的div" /><br />
</body>
</html>
2.表单对象属性过滤器
? 根据对象的状态作为条件，筛选dom对象。
? 1.选择可用的文本框
$(":text:enabled");
? 2.选择不可用的文本框
$(":text:disabled");
? 3.复选框选中的元素
$(":checkbox:checked");
? 4.选择指定下拉列表的被选中元素。
$("选择器>option:selected");
? 比如选中id为lang的select就可以获取被选中的option。
<select id="lang">
<option value="java">java</option>
<option value="sql">sql</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj = $(":text:enabled");
obj.val("hello");
})
$("#btn2").click(function(){
var obj = $(":checkbox:checked");
for(var i = 0;i < obj.length;i++ ){
console.log(obj[i].value+",jquery="+$(obj[i]).val());
}
})
$("#btn3 ").click(function(){
var obj = $("select>option:selected");
console.log(obj.val());
})
});
</script>
</head>
<body>
<input type="text" value="文本1"/><br />
<input type="text" value="文本2" disabled="true"/><br />
<input type="text" value="文本3"/><br />
<input type="text" value="文本4" disabled /><br />
<br />
<br />
<input type="checkbox" value="游泳" />游泳<br />
<input type="checkbox" value="健身" checked="true"/>健身<br />
<input type="checkbox" value="电子游戏" checked />电子游戏<br />
<br />
<br />
<select id="lang">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<br />
<br />
<button id="btn1">给所有可用的文本框设置value为hello</button><br />
<button id="btn2">显示选中的复选框的值</button><br />
<button id="btn3">显示选中的下拉列表框</button><br />
</body>
</html>
四、函数
##1.第一组常用函数
###1.1.val():操作dom对象的value值
? val():没有参数，获取dom数组中第一个dom对象的value值。
? val(参数)：有参数，给dom数组中所有dom对象的value属性赋值。
###1.2.text()：操作标签的文本内容，标签开始和结束之间的内容。
? text():没有参数，把dom数组中所有dom对象的文本内容连接起来，形成一个字符串，并返回这个字符串。
? text(参数)：给dom数组中的所有成员统一赋予新的文本。
###1.3.attr()：操作value，文本以外的属性时。
? attr(“属性名”)：获取dom数组中第一个dom成员的此属性值。
? attr(“属性名”,“属性值”)：给dom数组中所有dom成员此属性赋值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var txt = $(":text").val();
alert("第一个文本框的value="+txt);
})
$("#btn2").click(function(){
$(":text").val("三国演义");
})
$("#btn3").click(function(){
alert($("div").text());
})
$("#btn4").click(function(){
$("div").text("我是div");
})
$("#btn5").click(function(){
var txt = $("img").attr("src");
alert("图片的地址"+txt);
})
$("#btn6").click(function(){
$("#img1").attr("src","img/ex2.jpg");
})
});
</script>
</head>
<body>
<input type="text" value="刘备" /><br />
<input type="text" value="关羽" /><br />
<input type="text" value="张飞" /><br />
<br />
<div>我们学习的是开发语言</div>
<div>，java语言</div>
<div>,是面向对象的OOP</div>
<br />
<br />
<img id="img1" src="img/ex1.jpg" />
<br />
<br />
<button id="btn1">读取第一个文本框的value值</button><br />
<button id="btn2">给文本框赋予新值</button><br />
<button id="btn3">读取div的所有文本</button><br />
<button id="btn4">设置div的文本值</button><br />
<button id="btn5">读取src的属性值</button><br />
<button id="btn6">设置src的属性值，换一个图片</button><br />
</body>
</html>
五、事件
1.定义事件监听元素
1.1第一种事件绑定语法
语法：
$(选择器).监听事件名称(处理函数);
? $(选择器)：选择0或多个dom对象。给他们绑定事件。
? 事件名称：就是JS中去掉on的部分。例如单击事件onclick，这里的事件名称就是click。
? 事件的处理函数：函数定义，当事件发生时，执行这个函数。
说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click。
例如：
<input type="button" id="btn" value="绑定事件" />
$("#btn").click(function(){单机的处理代码});
<input id="btn" type="button" value="读取checkbox的value值" />
<script type="text/javascript">
$("#btn").click(function(){
alert("button单击了，执行处理函数");
})
<script>
PS:
? 1.js代码是从上往下执行，如果把js代码放到上面无法找到input，所以不能执行。所以js代码放到最后才可以执行上面的代码！
? 2.还有另一种写法放在HTML页面head中也可以执行
$(function(){
$("#btn").click(function(){
alert("button单击了，执行处理函数");
})
});
btn6">设置src的属性值，换一个图片
</body>
# 五、事件
## 1.定义事件监听元素
### 1.1第一种事件绑定语法
语法：
```js
$(选择器).监听事件名称(处理函数);
? $(选择器)：选择0或多个dom对象。给他们绑定事件。
? 事件名称：就是JS中去掉on的部分。例如单击事件onclick，这里的事件名称就是click。
? 事件的处理函数：函数定义，当事件发生时，执行这个函数。
说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click。
例如：
<input type="button" id="btn" value="绑定事件" />
$("#btn").click(function(){单机的处理代码});
<input id="btn" type="button" value="读取checkbox的value值" />
<script type="text/javascript">
$("#btn").click(function(){
alert("button单击了，执行处理函数");
})
<script>
PS:
? 1.js代码是从上往下执行，如果把js代码放到上面无法找到input，所以不能执行。所以js代码放到最后才可以执行上面的代码！
? 2.还有另一种写法放在HTML页面head中也可以执行
$(function(){
$("#btn").click(function(){
alert("button单击了，执行处理函数");
})
});
|