爱站程序员基地JavaScript和jQuery的关系：
-
jQuery是一个 js框架,封装了js的属性和方法。让用户使用起来更加便利,并且增强了 js的功能.
-
使用原生 js是要处理很多兼容性的问题(注册事件等)，由jQuery封装了底层，就不用处理兼容性问题。
-
原生的js的dom和事件绑定和Ajax等操作非常麻烦，jQuery封装以后操作非常方便。
-
jQuery库：里面存在大量的JavaScript函数
获取jQuery
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!-- CDN引入--><script src=\"http://code.jquery.com/jquery-2.1.1.min.js\"></script></head><body></body></html>
jQuery初体验
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!-- CDN引入--><script src=\"http://code.jquery.com/jquery-2.1.1.min.js\"></script></head><body><!--公式：${selector}.action()--><a href=\"\" id=\"test-jquery\">点我哦</a><script>//以前获取的方式document.getElementById(\'test-jquery\')// 用jQuery$(\'#test-jquery\').click(function () {alert(\'hello,jquery\')})</script></body></html>
选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!-- CDN引入--><script src=\"http://code.jquery.com/jquery-2.1.1.min.js\"></script></head><body><script>//标签document.getElementsByTagName();//id选择器document.getElementById();//类选择器、document.getElementsByClassName();//jQuery$(\'p\').click() ;//标签选择器$(\'#id1\').click() ;//id选择器$(\'.class1\').click(); //class选择器</script></body></html>
文档工具站：http://jquery.cuishifeng.cn/index.html
事件
鼠标事件，键盘事件，其他事件
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!-- CDN引入--><script src=\"http://code.jquery.com/jquery-2.1.1.min.js\"></script><style>#divMove {width: 800px;height: 600px;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) //获取x和y轴})})</script></body></html>
操作DOM
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!-- CDN引入--><script src=\"http://code.jquery.com/jquery-2.1.1.min.js\"></script></head><body><ul id=\"test-ul\"><li class=\"js\">JavaScript</li><li name=\"ph\">Python</li><li id=\"java\">Java</li></ul><script>// document.getElementById(\'\');$(\'#test-ul li[name=ph]\').text(); //获得值$(\'#test-ul li[name=ph]\').text(\'设置值\'); //设置值$(\'#test-ul\').html(); //获得值$(\'#test-ul\').html(<li id=\\\"java\\\">Java</li>); //设置值</script></body></html>
css操作：
$(\'#test-ul li[name=ph]\').css({ \"color\": \"#ff0011\", \"background\": \"blue\" });
元素的显示和隐藏：本质：display=none;
$(\'#test-ul li[name=ph]\').show(); //显示$(\'#test-ul li[name=ph]\').hide(); //隐藏
娱乐测试：
$(window).width() //宽度1280$(window).height() //高度233
