<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锋利的jquery</title>
<script type="text/javascript" src='js/jquery-2.2.1.min.js'></script>
<style type="text/css">
body{
background-color: gray;
}
</style>
</head>
<body>
<a href="#">提交</a>
<script type="text/javascript">
/*
1.2.2、jquery优势
1、轻量级
2、强大的选择器
3、出色的DOM操作封装
4、可靠的时间处理机制
5、完善的Ajax
6、不可污染顶级变量
7、出色的浏览器兼容性
8、链式操作方式
9、隐式迭代
10、行为层与结构层的分离
11、丰富的插件支持
12、完善的文档
13、开源
1.3.2
ready：等待DOM文档加载完毕
onload ： 等待网页所有内容加载完毕后，包括图片
1.4.2DOM对象jQuery对象转换
var $cr = $("#cr");//jQuery对象
var cr = $cr.get(0);// DOM对象
var $cr = $(cr);
//平时使用的jQuery函数都是$()函数制造出来的，$()是JQuery的一个制造函数
第1章、认识jQuery
1.5解决jQuery和其他库的冲突
jQuery.noConfict();
//将变量$的控制权移交给其他的Javascript库
第2章、jquery选择器
a、基本选择器 p
b、层次选择器 p~span
c、过滤选择器
基本过滤选择器：first
内容过滤选择器：contains
可见性过滤选择器：hidden
属性过滤选择器：attr=
子元素过滤选择器：first-child
表单对象过滤选择器：select：selected
第3章、DOM操作
1、document.forms;//提供了一个forms对象
2、删除节点
detach：将所有匹配的元素从DOM中去除，
这个方法不会把匹配的元素从jQuery对象中去除，
因而可以在将来再使用的时候用到这些匹配的元素,
所有绑定的事件、附加的数据等都会保留下来
empty：清空所有后代节点
remove：删除节点
3、wrapAll包在外面
wrapInner包在里面
4、遍历节点
childent();
next();
prev();
siblings();
closest();//获取最近的元素
5、offset当前窗口的相对偏移量
scrollTop获取元素的滚动条到顶端的距离
第4章、jQuery中的时间和动画
1、时间绑定bind
2、合成时间toggle
3、事件冒泡：事件会像水泡一样不断向上直至顶端
同时给a和body绑定不同事件
$("a").click(function(){
console.log("a");
})
$("body").click(function(){
console.log("body");
})
$(window).click(function(){
console.log("window");
})
//点击小范围的同时会触发大范围的事件
event.stopPropagation();//阻止事件冒泡
event.preventDefault();//阻止默认事件：比如业内konga链接的点击默认调到头部
4、事件对象的属性
a、event.stopPropagation();//阻止事件冒泡
b、event.preventDefault();//阻止默认事件：比如业内konga链接的点击默认调到头部
c、
$("a").click(function(event){
console.log(event.type);//click:事件类型
})
d、
$("a").click(function(event){
console.log(event.target);//a标签
})
e、
$("a").mousemove(function(event){
console.log(event.relatedTarget);//a标签
})
f、
$(window).click(function(event){
console.log("pageX:"+event.pageX+",pageY:"+event.pageY);//a标签
//获取光标相对于页面x，y坐标，如果有滚动条，则要加上滚动条的
})
4、动画
fodeIn();//只改变透明度 由diplay:none;到完全显示;
fodeOut();//只改变透明度 由完全显示到display:none;
sliedeUp();//从下往上，直到display:none;
slideDown();//从上往下，直到display:block;
.animate({
...
},time)
.animate({
...
},time)
.
.
.
//停止动画
.stop().animate({
...
},time)
.stop().animate({
...
},time)
.
.
.
slideToggle();//切换slideUp和slideDown这两种状态
fadeToggle();//切换fadeIn()和fadeOut()这两种状态
弟6章
6.1、Ajax的优势
1、不需要插件支持
2、优秀的用户体验
3、提高web程序的性能
4、减轻服务器和带宽的负担
6.1.2、Ajax的不足
1、浏览器对XMLHttpRequest对象的支持度不够
2、破坏浏览器的前进后退按钮的正常功能
3、对搜索引擎的支持度不足
4、开发科调试工具的缺乏
var xmlhttpReq = null;
if(window.ActiveObject){//兼容IE5、IE6
xmlhttpReq = new Active XObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlhttpReq = new XMLHttpRequest();
}
xmlhttpReq.open("get",url);
xmlhttpReq.onreadystatechange = function(){
if(xmlhttpReq.readyState == 4){
if(xmlhttpReq.status == 200){
.....
}
}
}
6.7Ajax中的全局事件
ajaxStart(function(){
})
ajaxStop(function(){
})
ajaxComplete(function(){
})
ajaxError(function(){
})
ajaxSend(function(){
})
ajaxSuccess(function(){
})
第7章 插件
第8章 个性网站
第9章 jquery mobile
第10章 版本变化
第11章 性能优化和技巧
*/
</script>
</body>
</html>