1、JavaScript和jQuery库
jQuery库：里面存在大量的JavaScript函数
在线的jQuery（CDN）
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
jQuery公式: $(selector选择器).action,选择器就是CSS的选择器
初识jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<!-- 公式: $(selector选择器).action -->
<a href="" id="test_jquery">点我</a>
<script>
$('#test_jquery').click(function () {
alert('hello jquery');
})
</script>
</body>
</html>
2、jQuery选择器
css中的选择器在jQuery中也可以使用
$('p').click();// 标签选择器
$('#id').click(); // id选择器
$('.class').click();// class选择器
3、jQuery事件
鼠标事件，键盘事件
鼠标事件：
- mousemove 移动鼠标
- mousedown 按下鼠标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.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>
</html>
3、jQuery操作DOM元素
节点文本操作
//获得值
$('#test-ul li[id=java]').text();
//设置值
$('#test-ul li[id=java]').text('设置值');
//获得值
$('#test-ul ').html();
//设置值
$('#test-ul ').html('<strong>123</strong>');
css的操作
$('#test-ul li[id=java]').css("color","red")
元素的隐藏和显示
本质：display:none
// 显示
$('#test-ul li[id=java]').show()
// 隐藏
$('#test-ul li[id=java]').hide()
扫一扫
1880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
