jQuery
js和jQuery关系：
jQuery库中有大量的js函数
一、获取jQuery
文档：https://jquery.cuishifeng.cn/
官网：https://jquery.com/
在官网直接点击doneload可以下载，下载好后放到lib文件夹，在head下导入
<!-- 文件导入 -->
<script src="lib/jquery导入的文件名"></script>
<!-- cdn引入 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
或者搜索CDN jQuery：https://www.jq22.com/cdn/
百度CDN：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
jQuery公式：$(selector).action()
选择器加事件
selector:css选择器
例子：
点击点我链接弹出alert
<body>
<a href="" id="test-jquery">点我</a>
</body>
<script>
$('#test-jquery').click(function(){
alert('hello');
})
</script>
二、jQuery选择器
原生js选择器少
document.getElementById()//id选择器
document.getElementsByClassName()//类选择器
document.getElementsByTagName()//标签选择器
jQuery选择器
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//类选择器
在cuishifeng文档中可以查到所有选择器
三、jQuery事件
鼠标事件、键盘事件
①鼠标事件（从上到下：按下、鼠标指针穿过元素、鼠标指针离开元素、鼠标指针在指定的元素中移动、鼠标指针从元素上移开、鼠标指针位于元素上方、元素上放松鼠标按钮）
②网页加载完后开始响应事件
// 网页加载完毕后响应事件
$(document).ready(function()){}
// 简写为
$(function(){
$('')
})
例子：获取元素上移动鼠标位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!-- cdn引入 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
background-color: blueviolet;
}
</style>
</head>
<body>
<!-- 获取鼠标当前坐标显示在span标签下 -->
mouse : <span id="mouseMove"></span>
<div id="divMove">
movehere
</div>
</body>
<script>
// 简写为
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
})
</script>
</html>
四、操作DOM元素
<body>
<ul id="test-ul">
<li class="js">js </li>
<li class="ee">ee</li>
</ul>
</body>
<script>
// js innertext
$('#test-ul li[class=js]').text();
// js innerhtml
$('#test-ul').html();
</script>
获得值及动态更改值
$('#test-ul li[class=js]').text('1234') //设置值
$('#test-ul li[class=js]').text() //获得值
$('#test-ul').html() //获得值
$('#test-ul').html('<strong>123</strong>') //设置值
css的操作
$('#test-ul li[class=js]').css("color","#ff0011")
元素的隐藏和消失
$('#test-ul li[class=js]').hide()
$('#test-ul li[class=js]').show()
等价于display=none
4667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
