一.
JavaScript
jQuery库,里面存在大量的JavaScript函数
1.1 获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id');
//选择器就是CSS的选择器
$('#test-jquery').click(function(){
alert("hello jquery");})
</script>
</body>
</html>
1.2 选择器
//原生js 选择器少 不好记忆
//标签
document.getElementByTagName()
//id
document.getElementById()
//类
document.getElementByClassName()
//jQuery css中的选择器全部都能用
$('p').click()//标签选择器
$('#id').click//id选择器
$('.class1').click//class选择器
1.3 事件
鼠标事件、键盘事件、其他事件
<!--获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(function(){
$('#divMove').mousemove(function(e){
$('#mousemove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
1.4 操作DOM
1.4.1节点文本操作
$('test-ul li[name=python]').text()//获得值
$('test-ul li[name=python]').text('设置值')//设置值
$('test-ul').html();//获得值
$('test-ul').html('<strong>123</strong>');//设置值
1.4.2 CSS的操作
$('test-ul li[name=python]').css({"color","red"})
1.4.3 元素的显示和隐藏 本质 hidden:none;
$('test-ul li[name=python]').show()
$('test-ul li[name=python]').hide()
1.4.4 娱乐测试
$(window).width()
$(window).height()
$('test-ul li[name=python]').toggle();