【学习笔记】初始JQuery
了解JQuery
jQuery和JavaScript的关系：jQuery相当于一个库，里面有大量的JavaScript函数
和Java中的工具类差不多。
获取jQuery
官网下载
[jquery.com] jquery.com
下载完成之后，就可以引入了。
CDN jQuery
可以直接引入，不用下载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始jQuery</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
</body>
</html>
jQuery的使用
公式：$(selector).action()
selector 是选择器，使用#+“ ”
action是jquery中的函数
<body>
<button id="button_id">打开弹窗</button>
<script>
$('#button_id').click(function () {
alert("这是弹窗！");
})
</script>
</body>在这个例子中我们为按钮绑定了一个点击事件，即jquery中的click()函数。
选择器
对比原生js
//原生js，选择器少，代码复杂
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery选择器，css中的选择器它都可以用
$('p').click(); //标签
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器
事件
事件分为：鼠标事件、键盘事件、其他事件
我们以鼠标事件为例：移动鼠标，获取鼠标所在位置的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#mouseArea{
width: 300px;
height: 300px;
border: 2px solid green;
}
</style>
</head>
<body>
mouse：<span id="mouseCoor"></span>
<div id="mouseArea">移动区域</div>
<script>
/**
* 网页元素加载完成后，响应事件
* $(document).ready(function () {
*
* })
* 这段代码可以简化为如下
*/
$(function () {
$('#mouseArea').mousemove(function (e) {
$('#mouseCoor').text('x:'+e.pageX + 'y:'+e.pageY)
})
});
</script>
</body>
</html>
操作DOM元素
节点文本
<body>
<ul id="ul_id">
<li class="zs">张三</li>
<li name="ls">李四</li>
</ul>
<script>
$('#ul_id li[name=ls]').text() //获取值
$('#ul_id li[name=ls]').text('lisi123') //获取值
$('#ul_id li[name=ls]').html('<strong>123</strong>') //设置值
</script>
</body>
CSS操作
$('#ul_id li[name=ls]').css('color','red')
元素的显示和隐藏
$('#ul_id li[name=ls]').show() //显示
$('#ul_id li[name=ls]').hide() //隐藏本质是元素的display:none
