1 什么是jquery
是js的一款框架产品。
Jquery解决的问题:
1.原生js编程复杂, 获取标签对象document.getElementById(“id值”)。
2.屏蔽浏览器差异。
3.含有插件 、表单验证、图片放大器。
2 第一个jquery程序
2.1 搭建开发环境
1.点击File–>New–>Module,如图所示:
2.选择Java,点击Next。如图所示:
3.修改相应即可,点击Finish。如图所示:
4.选择jquery如图所示:右键并点击。
5.选择Web,点击OK即可。如图所示:
6.在项目中引入jquery相关的js文件。
在web目录下创建js目录,把jquery-1.8.3js放入到js目录下。如图所示:
7.在需要使用jquery的HTML页面中引入相关js文件的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 代码 书写Jquery语法
</script>
</head>
<body>
</body>
</html>
如图所示:
2.2 Jquery编程
1.编写first.html的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 代码 书写Jquery语法
function test1() {
// js
var div = document.getElementById("d");
alert($(div).text()); // 转化为Jquery对象
// Jquery 获取标签对象,使用的时选择器 id选择器 $(#+标签的id值)
// text(); 获取标签内部文本信息
// var div = $("#d");
// console.info(div); //原生js对象 DOM对象 (Object HTMLdivElment )
// alert(div.get(0).innerText); 转化为js对象
}
</script>
</head>
<body>
<div id="d">Adair</div>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
注意:
原生js对象和jquery对象不是同一个对象。
Js对象中的属性和方法不能与jquery混用。
Js对象和jquery对象可以转换的:
Js对象—>jquery对象:$(js对象)。
Jquery对象—>js对象:jquery对象.get(0)。
3 标签对象的获取 (选择器)
1.基本选择器【重点 常用】。
a.id选择器 【常用】 通过标签id属性值获取标签对象 获取的时单个标签对象。
语法:$(“# id值”)。
b.标签选择器 通过标签名获取标签对象 获取的是标签数组。
语法:
(
“
标
签
名
”
)
。
c
.
类
选
择
器
通
过
标
签
c
l
a
s
s
属
性
值
获
取
标
签
对
象
。
语
法
:
(“标签名”)。 c.类选择器 通过标签class属性值获取标签对象。 语法:
(“标签名”)。c.类选择器通过标签class属性值获取标签对象。语法:(“.class属性值”)。
d.多路选择器 通过多个选择器选择标签对象。
语法:
(
“
选
择
器
,
选
择
器
.
.
.
”
)
。
2.
层
级
关
系
选
择
器
。
后
代
选
择
器
语
法
:
(“选择器,选择器...”)。 2.层级关系选择器。 后代选择器 语法:
(“选择器,选择器...”)。2.层级关系选择器。后代选择器语法:(“选择器 选择器”) 获取所有内部标签。
直接子代选择器 语法:$(“选择器>选择器”) 只获取子代标签 孙子不算。
3.过滤选择器 基于一组标签对象进行再次筛选。
:first 一组标签中第一个标签对象。
:last 一组标签中最后一标签对象。
:eq(index) 获取指定位置的标签对象,index:下标。
:gt(index) 获取大于指定位置的标签对象。
:lt(index) 获取小于指定位置的标签对象。
4.属性选择器 通过标签中的一些属性获取标签对象。
$(“选择器[属性名]”) 获取含有指定属性的标签对象。
$(“选择器[属性名=值]”) 获取含有指定属性名等于对应值的标签对象。
5.针对于单选按钮和复选按钮。
:checked 获取已经选择的单选或者复选框。
6.针对于下拉列表。
:selected 获取已经选择的option选项。
7.和表单相关的选择器。
:checkbox 获取页面中所有的复选框。
:radio 获取页面中所有的单选框。
:text 获取页面中所有的文本框。
:button 获取页面中所有的按钮。
…
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// 标签选择器 css.("display","none"); // 隐藏选中的元素
// $("li").css("display","none");
// 类选择器
// $(".c1").css("display","none");
// 多路选择器
// $(".c1,#l1,input").css("display","none");
// 层级关系选择器
// 后代选择器
// $("#o1 li").css("display","none");
// 直接子代选择器
// $("#o1 > li").css("display","none");
// 过滤选择器
// $("o1 > li:first").css("display","none");
// $("o1 > li:last").css("display","none");
// $("#o1 > li:eq(1)").css("display","none");
// $("#o1 > li:gt(1)").css("display","none");
$("#o1 > li:lt(1)").css("display","none");
}
</script>
</head>
<body>
<ol id="o1">
<li>Adair1</li>
<li class="c1">Adair2</li>
<li class="c1">Adair3</li>
<li class="c1">Adair4</li>
<li class="c1">Adair5</li>
<div>
AdairW
<li class="c1">AdairXX</li>
</div>
</ol>
<ol>
<li id="l2">Adair11</li>
<li class="c1">Adair22</li>
<li class="c1">Adair33</li>
<li class="c1">Adair44</li>
<li class="c1">Adair55</li>
</ol>
<li >Adair6</li>
<li >Adair7</li>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
演示2的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// 属性选择器
// $("input[id]").css("display","none")
// 针对于单选按钮和复选按钮
// $("input[type = checkbox] :checked").css("display","none")
// 针对于下拉列表
// $("#city > option :selected").css("display","none")
// 和表单相关的选择器
$(":checkbox")
}
</script>
</head>
<body>
<input type="checkbox" name="likes" value="1">
<input type="checkbox" name="likes" value="2">
<input id="box3" type="checkbox" name="likes" value="3">
<input type="checkbox" name="likes" value="4">
<input type="checkbox" name="likes" value="5">
<input type="checkbox" name="likes" value="6">
<or/>
<select id="city">
<option>贵州</option>
<option>云南</option>
<option>四川</option>
<option>北京</option>
</select>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
4 标签对象的遍历
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
var boxs = $(":checkbox");
// 1.下标遍历 数组长度属性:length,Jquery:size()
for (var i = 0; i < boxs.size(); i ++){
// 遍历过程中,当前元素js对象,如果需要调用JQuery方法,需要转换
alert($(boxs[i]));
}
// 2.foreach
boxs.each(function () {
// 遍历过程中 用当前对象 this。当前元素js对象,如果需要调用JQuery方法,需要转换。
alert($(this));
});
}
</script>
</head>
<body>
<input type="checkbox" name="likes" value="1">
<input type="checkbox" name="likes" value="2">
<input id="box3" type="checkbox" name="likes" value="3">
<input type="checkbox" name="likes" value="4">
<input type="checkbox" name="likes" value="5">
<input type="checkbox" name="likes" value="6">
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
5 通过jquery操作页面结构
1.增加
创建对象:var div = $(“
追加节点:父节点.append(子节点)。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// 创建标签对象和文本
var name = "Adair";
var div = $("<div>" + name +"</div>");
$("#bd").append(div);
}
</script>
</head>
<body id="bd">
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
2.删除 要删除的标签本身调用方法。
empty(); 移除标签内部内容 本身不动。
remove(); 连带本身一起删除。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// $("#d").empty();
$("#d").remove();
}
</script>
</head>
<body id="bd">
<div id="d">Adair</div>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
3.修改
(
)
代
表
j
q
u
e
r
y
标
签
对
象
。
a
.
标
签
内
部
文
本
。
获
取
:
()代表jquery标签对象。 a.标签内部文本。 获取:
()代表jquery标签对象。a.标签内部文本。获取:().text() 等价于 js中的innerText。
(
)
.
h
t
m
l
(
)
等
价
于
j
s
中
的
i
n
n
e
r
H
T
M
L
。
修
改
:
().html() 等价于 js中的innerHTML。 修改:
().html()等价于js中的innerHTML。修改:().text(“文本”)。
$().html(“文本”)。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// var result = $("#d").text();
// alert(result);
$("#d").text("XingWang");
}
</script>
</head>
<body id="bd">
<div id="d">Adair</div>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
b.css样式
获取:
(
)
.
c
s
s
(
“
c
s
s
样
式
属
性
名
”
)
。
修
改
:
().css(“css样式属性名”) 。 修改:
().css(“css样式属性名”)。修改:().css(“css样式属性名”,”新值”)。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div{
border: solid 1px red;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// 获取对应样式的值
// $("#d").css("width");
// 修改样式
$("#d").css("width","200px").css("height","200px").css("background-color","yellow");
}
</script>
</head>
<body id="bd">
<div id="d">Adair</div>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
c.class属性。
添加class属性值 : $().addClass(“c1”);
移除class属性值 : $().removeClass(“c1”);
$().removeClass() //移除class全部值。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.c1{
background-color: blue;
font-size: 20px;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1(tr) {
$(tr).addClass("c1");
}
function test2(tr) {
$(tr).removeClass("c1");
}
</script>
</head>
<body id="bd">
<table border="1px" width="75%" align="center" >
<tr>
<td>ID</td><td>NAME</td><td>AGE</td><td>BIRTHDAY</td>
</tr>
<tr onmouseover="test1(this)" onmouseout="test2(this)">
<td>1</td><td>Adair</td><td>26</td><td>1995-02-26</td>
</tr>
<tr onmouseover="test1(this)" onmouseout="test2(this)">
<td>2</td><td>TableL</td><td>28</td><td>1993-11=10</td>
</tr>
<tr onmouseover="test1(this)" onmouseout="test2(this)">
<td>3</td><td>LiTiao</td><td>24</td><td>1997-06-20</td>
</tr>
<tr onmouseover="test1(this)" onmouseout="test2(this)">
<td>4</td><td>luTingTing</td><td>22</td><td>1999-10-12</td>
</tr>
</table>
</body>
</html>
如图所示:
d.input标签的value属性值。
获取:
(
)
.
v
a
l
(
)
;
修
改
:
().val(); 修改:
().val();修改:().val(“值”);
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// var name = $("#name").val();
// alert(name);
$("#name").val("Adair");
}
</script>
</head>
<body id="bd">
姓名:<input id="name" type="text" name="name">
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
e.标签的其他属性
获取:
(
)
.
p
r
o
p
(
“
属
性
名
”
)
a
t
t
r
(
“
属
性
名
”
)
修
改
:
().prop(“属性名”) attr(“属性名”) 修改:
().prop(“属性名”)attr(“属性名”)修改:().prop(“属性名”,”属性值”) attr(“属性名”,”属性值”)
prop:1.6之后 attr:1.6之前。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// var result = $("#img1").prop("src");
// alert(result);
$("#img1").prop("id","2.jpg");
}
</script>
</head>
<body id="bd">
<img id="img1" src="1.jpg">
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
6 全选/取消全选
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test1() {
// 全选操作
// 获取除第一个之外所有的复选框,设置checked属性 = 第一个复选框的checked属性。
$(":checkbox:gt(0)").prop("checked",$("#s1").prop("checked"));
}
</script>
</head>
<body id="bd">
全选:<input id="s1" type="checkbox" onclick="test1()">
<br/>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
</html>
如图所示:
7 标签绑定事件的方式
1.标签式事件绑定 事件属性直接写在标签中 (不利于后续修改)。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 代码 书写Jquery语法
function test1() {
alert( $("#d").text());
}
</script>
</head>
<body>
<div id="d">Adair</div>
<input type="button" value="点击" onclick="test1()"/>
</body>
</html>
如图所示:
2.编程式事件绑定【常用】
Js:
标签对象.onclick = function(){ //执行的功能 }
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 编程式事件绑定的方式 事件属性特征:js中的事件属性去掉on 后边加()
// 监听函数的功能就是当前事件的参数
function test1(){
$("#btn").click(function () {
// 单击之后执行的功能
alert($("#d").text());
});
}
</script>
</head>
<body onload="test1()">
<div id="d">Adair</div>
<input id="btn" type="button" value="点击" />
</body>
</html>
如图所示:
Jquery :
标签对象.click( function (){ //执行的功能 });
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 页面加载完毕之后执行的内容, $(function () { 先加载页面在执行功能 })
$(function () {
// 编程式事件绑定的方式 事件属性特征:js中的事件属性去掉on 后边加()
// 监听函数的功能就是当前事件的参数
$("#btn").click(function () {
// 单击之后执行的功能
alert($("#d").text());
});
})
</script>
</head>
<body>
<div id="d">Adair</div>
<input id="btn" type="button" value="点击" />
</body>
</html>
如图所示:
分析如图所示:
8 加载页面之后执行的功能
方式一:
$(document).ready(function(){
// 先加载页面 再执行的内容
})
方式二:【记忆】
$(function(){
// 先加载页面 再执行的内容
})
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 页面加载完毕之后执行的内容, $(function () { 先加载页面在执行功能 })
$(function () {
// 编程式事件绑定的方式 事件属性特征:js中的事件属性去掉on 后边加()
// 监听函数的功能就是当前事件的参数
$("#btn").click(function () {
// 单击之后执行的功能
alert($("#d").text());
});
$("#d").mousemove(function () {
// 鼠标移入之后的操作
alert("你猜");
});
$("#d").mouseout(function () {
// 鼠标移出之后的操作
alert("你再猜");
});
})
</script>
</head>
<body>
<div id="d">Adair</div>
<input id="btn" type="button" value="点击" />
</body>
</html>
如图所示:
9 Jquery中常见的事件属性
特征:js中的事件属性去掉on后边加上()。
单击 click()。
双击 dblclick()。
鼠标移入 mouseover()。
鼠标移出 mouseout()。
丢失焦点 blur()。
获得焦点 focus()。
下拉列表值改变 change()。
10 复合事件属性
1.hover(func1,func2) 鼠标的移入移出事件。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.c1{
background-color: blue;
font-size: 20px;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
// 给表格的tr绑定hover事件
$("tr:gt(0)").hover(function () {
// 鼠标移入时的操作
$(this).addClass("c1");
},function () {
// 鼠标移出时的操作
$(this).removeClass("c1");
});
});
</script>
</head>
<body id="bd">
<table border="1px" width="75%" align="center" >
<tr>
<td>ID</td><td>NAME</td><td>AGE</td><td>BIRTHDAY</td>
</tr>
<tr>
<td>1</td><td>Adair</td><td>26</td><td>1995-02-26</td>
</tr>
<tr>
<td>2</td><td>TableL</td><td>28</td><td>1993-11=10</td>
</tr>
<tr>
<td>3</td><td>LiTiao</td><td>24</td><td>1997-06-20</td>
</tr>
<tr>
<td>4</td><td>luTingTing</td><td>22</td><td>1999-10-12</td>
</tr>
</table>
</body>
</html>
如图所示:
2.toggle(func1,func2,func3…); 多个单击事件。
演示的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Jquery的js文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").toggle(function () {
// 第一次单击
alert("亲爱的,我走啦");
},function () {
// 第二次单击
alert("这一走。。。");
},function () {
// 第三次单击
alert("我就换个女朋友!!!");
});
});
</script>
</head>
<body id="bd">
<input id="btn" type="button" value="点击" />
</body>
</html>
如图所示: