jQuery
1. 简介
jQuery和JavaScrip关系：
- 获取jQuery
https://jquery.com/
另外一种：
通过CDN引入jQuery的几种方式
http://www.jq22.com/cdn/
1
2
| //百度cdn
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
|
2. 使用
2.1 简单使用
公式 ： ${selector}.action()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<!--
公式 ： ${selector}.action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css的选择器
$("#test-jquery").click(function () {
alert("hellojQuery");
})
</script>
</body>
|
2.2 选择器
- js原生选择器
1
2
3
4
5
6
7
8
| <script>
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
</script>
|
- jQuery
1
2
3
4
|
$('p').click()
$('#id1').click()
$('.class1').click()
|
2.3 事件
以下以鼠标移动时间为例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<!--要求：获取鼠标的当前坐标-->
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(function () {
$("#divMove").mousemove(function (e) {
$("#mouseMove").text("x"+e.pageX + "y" + e.pageY)
})
})
</script>
</body>
|
2.4 操作DOM
- jQuery获得值
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$("#test-ul li[name=python]").text();
$("#test-ul").html();
</script>
</body>
|
- jQuery设置值
1
2
| $("#test-ul li[name=python]").text("123");
$("#test-ul").html("<strong>123</strong>");
|
- css操作
1
2
3
| <script>
$("#test-ul li[name=python]").css("color","red")
</script>
|
- 元素的显示和消失：本质display=none;
1
2
| $("#test-ul li[name=python]").show()
$("#test-ul li[name=python]").hide()
|
3. 小技巧
- 如果巩固js(看jQuery源码)
- 看游戏源码
- 巩固html 和 css(扒网站)
- UI学习
打赏
