1. jQuery
jQuery是实现了一定功能的js代码的封装后的框架,类似于一个工具箱
1.1 在idea中使用jQuery
- 导入jquery包
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
第一次导包需要下载:光标移动至该行代码,同时按住 alt 和 enter 键,按提示下载即可
下载后会提示应用在那个package,可以选择当前package,后面无论哪个package使用只需再次导包(如上),无需再次下载
如果在另个package中导入了包,但在使用时提示“unresolved function or method $()”,说明缺少库,解决办法是在 Settings - Languages & Frameworks - JavaScript - Libraies-Download 中下载安装jquery后重启即可
- 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function () {
var p=$("p");//将p标签的地址赋值给p
p.text("hello jquery");//设置p标签的文本内容
p.css("color","pink");//设置p标签文本内容的字体颜色
p.css("text-align","center");//设置p标签文本内容的字体居中
p.css("font-size","66px");//设置p标签文本内容的字体大小
p.css("font-family","comic sans MS");//设置p标签文本内容的字体
p.css("font-weight","bold");//设置p标签文本内容的字体加粗
})
</script>
</head>
<body>
<p></p>
</body>
</html>
1.2 页面加载函数
因为HTML是从上往下一次解析代码,所以如果js代码写在了body代码之前,但js代码引用了body代码中某个数据,那么这个数据将在js代码中失效。例如,以下js代码中的功能是实现不了的,因为在解析js代码时,div还未被创建。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
function f() {
$("#div").text("更改之后的数据")
}
</script>
</head>
<body>
<div id="div">初始数据</div>
</body>
</html>
如果要实现js中的功能,需要先加载body(预加载)
- 方式一_body实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
function f() {
$("#div").text("更改之后的数据")
}
</script>
</head>
<body onload="f()">
<div id="div">初始数据</div>
</body>
</html>
- 方式二_jsDOM实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
window.onload=function f() {
$("#div").text("更改之后的数据")
}
</script>
</head>
<body>
<div id="div">初始数据</div>
</body>
</html>
- 方式三_jQuery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(
function f() {
$("#div").text("更改之后的数据")
}
)
</script>
</head>
<body>
<div id="div">初始数据</div>
</body>
</html>
$(function f(){})
等同于
$(document).ready(function f(){})
等同于
jQuery(document).ready(function f(){})
时
j
Q
u
e
r
y
中
的
一
种
‘
重
载
方
法
’
,
当
时jQuery中的一种‘重载方法’,当
时jQuery中的一种‘重载方法’,当()的参数为function时,表示body已被加载完毕
1.3 jQuery获取标签元素对象——选择器
- id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(
function f() {
$("#div").text("更改之后的数据")
}
)
</script>
</head>
<body>
<div id="div">初始数据</div>
</body>
</html>
- class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(
function f() {
$(".div").text("更改之后的数据")
}
)
</script>
</head>
<body>
<div class="div">初始数据</div>
</body>
</html>
- 元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(
function f() {
$("div").text("更改之后的数据")
}
)
</script>
</head>
<body>
<div>初始数据</div>
</body>
</html>
- …
1.4 操作属性
- 获取属性_.attr(“属性名”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(
function f() {
var str=$("font").attr("color");
console.info(str);//输出red
}
)
</script>
</head>
<body>
<font color="red" size="20px"></font>
</body>
</html>