JavaScript05
1.jQuery
jQuery库,里面存在大量的JavaScript函数
获取jQuery库
- 官网下载到本地
- 找CDN在线链接
<!--在线引入-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
公式:$(selector).action()
选择器加事件
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function(){
alert("hello,jQuery");
})
</script>
选择器
<script>
//原生js,选择器少,麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//类
document.getElementByClassName();
//jQuery css中的选择器它全部都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器
</script>
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件、键盘事件、其他事件
<style>
#divMove{
width:500px;
height:500px;
border;1px solid red;
}
</style>
<!--要求:获取鼠标当前的一个坐标-->
mouse:<span id='mouseMove'></span>
<div id='divMove'>
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(function()){ //等同于 $(document).ready(function(){})
$('#divMove').mousemove(function (e)){ //e代表参数,可以用任何字母或单词代替
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)//text方法加文字
}
}
</script>
操作DOM
节点文本操作
<ul id="test-ul">
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
//document.getElementById('') 原生
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('123');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
</script>
css的操作
$('#test-ul li[name=python]').css("color","red")
元素的显示和隐藏:本质 display:none
$('#test-ul li[name=python]').hide()
$('#test-ul li[name=python]').show()
其他操作
$(window).width()
$(document).width()
扩展
layer
Element-ui