补一下在家看的jQuery内容
1.jQuery是一个JavaScript库
2.jQuery库的主要功能又：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
另外，jQuery还有一些自带插件
3.jQuery需要引入文件
4.jQuery基本语法
$(selector).action()
其中selector是css选择器语法加jQuery自定义的部分语法，action为jQuery定义的函数
$(document).ready(function(){ ...});
等效于 $(function(){});
实现文档就绪后执行jQuery方法。（注意，这里说的是文档，是否为一个html页面可以理解为一个文档呢？）
5.选择器
jQuery中，所有的选择器以 $() 开头，基于css选择器的提供了类、id、类型、属性、属性值等选择器以“查找”元素
常用的有：
$("*") //选取所有元素
$(this) //选取当前HTML元素
$("p.intro") //选取p下所有class为intro的元素
$("p:first") //选取第一个p元素
$("ul li:first") //选取第一个ul下的第一个li元素
$("ul li:first-child") //选取每个ul下的第一个li元素
$("[href]") //选取带有href属性的元素
$("a[target='_blank']") //选取所有target=_blank的a元素
$(":button") //选取所有类型为button或本身为button的元素
$("tr:even") //选取所有偶数位置的tr元素
$("tr:odd") //选取所有基数位置的tr元素
6.为了易于维护jQuery，最好是把它的引用放到一个独立文件中，这样子便于修改jQuery版本信息
7.jQuery事件(也就是之前说的action,jQuery语法$()选择出来的是jQuery对象，应该使用jQuery事件)
常见的jQuery事件：
鼠标事件：click dblclick mouseenter mouseleave hover（鼠标悬停）
键盘事件：keypress keydown keyup
表单事件：submit change focus blur
文档/窗口事件 load resize scroll unload
jQuery事件使用方法： $("p").click(function(){...}); ($("p").click()为调用一次)
8.hover的一个特殊写法
$("p").hover(function(){alert("进入p")}，function(){alert("离开p")} );
//可以模拟mouseenter 和mouseleave的效果，
//这里的特殊性是，一个方法体内定义了两个以“，”分隔的方法，进入悬停和离开悬停状态时依次调用，这里有可能是依赖于hover方法的特殊定义实现方式，也有可能是依赖于jQuery对于方法体，函数队列的处理方式
//做了两个测试，一个是在click中加入多个function实现体，定义了两个num++和两个alert，结果为无论定义多少个function实现体，执行且只执行第二个 （这里应该可以作为复写控件click事件的一种黑科技，但是是生化武器，小心使用，不要被自伤）
第二个测试是在hover中添加了三个方法体，只有第一个和第二个有效
9.jQuery效果方法
隐藏/显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback); //开关隐藏显示
淡入/淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
其中speed为速度，可以用“show”和“fast”的预设值或者自定义的毫秒数
callback为回调函数,opacity为透明度（0-1）
10.jQuery动画
10.1
语法：$(selector).animate({params},speed,callback);
必须的params参数定义形成动画的css属性。
10.2默认情况下，所有html元素都有一个静态位置，且无法移动。如需要对位置进行操作，需要把元素的CSS position属性设置为relative、fixed或absolute
10.3animate()方法几乎可以操作所有的CSS属性，但是需要使用Camel标记法书写所有属性名（what is Camel标记法？），比如使用paddingLeft而不是padding-left等等
10.4另外，色彩动画不包含在核心jQuery库中，如果需要用颜色动画，需要下载颜色动画插件
10.5 animate()的params可以使用相对值 ，类似于
$("p").animate({left:'+=100px'})
10.6 animate()使用预定义值 "show","hide"或“toggle”
$("div").animate({height:'toggle'});
10.7 animate()使用队列功能
同一元素的多个animate会自定形成队列（这让连续复杂动画成为可能）
10.8 停止动画
$(selector).stop(stopAll,goToEnd);
stopAll参数规定是否应该清除动画队列，默认为false
goToEnd参数规定是否立即完成当前动画，默认为false
10.9 callback函数在动画100%完成时执行
10.10 jQuery链（Chaining）
类似于 $("p").css("color","red").slideUp(2000).slideDown(2000);
//核心原理应该是 这些方法执行完都是返回this
11.JQuery HTML
11.1 获取元素内容
text() //设置或返回所选元素的文本内容
html() //设置或返回所选元素的内容
val() //设置或返回表单字段的值
这三个jQuery方法的回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
范例：
$("p").html(function(i,origText){
alert(i+" : "+origText);
return origText+":被修改";
});
//这三个方法的调用，如果带有参数或回调，作用其实主要在于设置和处理值
11.2 获取属性
attr()
范例:
$("#lik").attr("href");
回调函数同样带有两个参数，一个是被选元素列表中当前元素的下标，第二个是旧值，而返回值代表的是希望返回的新值。
11.3添加元素
append() //被选元素的结尾插入内容，<p>和</p>中间的最后位置
prepend() //被选元素的开头插入内容,<p>和</p>中间的起始位置
after() //被选元素之后插入内容,<p>和</p>之后插入
before() //被选元素之前插入,<p>和</p>之前插入
所以jQuery语法中要实现DOM中的appendChild的效果，可以有两种方式，第一种是获取子元素中最后一个，使用after()；第二种是直接用父级，使用append();
11.4 删除元素
remove() //删除被选的元素以及其子元素
empty() //删除被选元素的子元素
这两个方法可以带过滤，比如
$("p").remove(".italic") //删除所有class为italic的p元素
11.5 CSS类
常用的操作CSS的方法：
addClass() //向被选元素添加一个或多个类
removeClass() //从被选元素中删除一个或多个类
toggleClass() //对被选元素的进行添加、删除类的切换
css() //设置或返回样式属性
这里默认用到了一个CSS的类选择器概念。
.impo{ font-weight:bold; font-size:xx-large; } //这个CSS选择器设置所有impo类元素样式，通过addClass等可以给元素设置或删除类属性，设置完成后，CSS的类样式会实时生效。正是通过实时生效这个特性，使得jQuery可以通过Class来设置元素样式
11.6 css()方法
get语法为： css("propertyname")
set语法为： css("propertyname","value") 或 css("propertyname":"value","propertyname":"value")
12.jQuery尺寸
常用方法：
width() height() innerWidth() innerHeight() outerWidth() outerHeight()
13.jQuery遍历
（应该是基于html中元素的文档结构实现的）
13.1祖先
parent() //直接父元素
parents() //所有祖先元素
parentsUntil() //介于指定两个元素间的所有祖先元素，开区间（开区间=不包含，闭区间=包含，半闭半开区间=只包含一半）
注：parents()是支持过滤语法的
13.2后代
children() //所有后代元素，支持过滤语法
find()
13.1同胞（sibling）
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
14.过滤
常用过滤方法
first()
last() //一个等效于append的last写法 $("ol").children().last().after("<p>xxx</p>");
eq() //返回被选元素中带有指定索引号的元素
filter() //过滤选择出匹配选择器语法的元素
not() //过滤选择出不匹配选择器语法的元素
15.AJAX(Asynchronous JavaScript and XML,异步的JavaScript和XML)
15.1 AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现对部分网页的更新
15.2 jQuery提供多个与AJAX有关的方法，通过使用jQuery AJAX方法，可以使用HTTP Get和HTTP Post从远程服务器请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页的被选元素中。
15.3 load()方法
load方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
URL必需的希望加载的URL
data参数可选规定一同发送的查询字符串键/值对集合
callback是load完成后的回调，回调参数为 responseTxt，statusTXT，xhr
responseTxt包含调用成功时的结果内容
statusTXT包含调用的状态
xhr包含XMLHttpRequest对象
15.4 get() 和post()方法
GET，从指定的资源请求数据（可能返回缓存数据）
POST，向指定的资源提交要处理的数据（POST不会缓存数据，常用于连同请求一起发送数据）
$.get(URL,callback);
$.post(URL,callback);
16.noConflict()方法
noConflict()方法会释放$标识符的控制，这样其他脚本就可以使用它。
范例：
$.noConflict();
jQuery(document).ready(function(){
...
});
或
var jq = $.noConflict();
jq(document).ready(function($){
$("p").html("abc");
});
17.JSONP(JSON with Padding，跨域读取数据)
- -！ 没看太明白这个东东 0 0！
对于核心要解决的跨域问题没有一个很好的认识（看了一下，大致意思是，出于同源策略的限制，服务器1的网页A无法访问非同域名或端口下的网页B，为了解决这种跨域访问问题，利用JS文件可以跨域访问的特性，结合服务器的语法配合，来实现A访问B中的内容。核心实现策略是，在A中建立一个外壳方法，把方法名传递给B，B通过语法拼接，直接把数据结合写成外壳方法调用的方式，A获取B的内容后，自动执行，这样就达成了A访问B的目的） - -！，说是这么一说，但是没想到这种处理的应用场景 （还木接触过需要跨域的场景~~~~~~~~~~~~）
网友评论