jQuery笔记

jQuery是JS的函数库，"量少功能多"，可以进行HTML元素选取、操作，CSS操作，HTML事件处理函数，JS特效、动画，DOM遍历、修改，AJAX异步请求等等功能。

使用:jQuery是JS的函数库，需要在<script></script>内部引用它，如果下载了可以直接引用  src="jquery-1.10.2.min.js"

如果没有下载jQuery,可以通过CDN(content delivery network)引用 获取jQuery版本

百度的CDN：src="https:apps.bdimg.com.libs/jquery/2.1.4/jquery.min.js"

jQuery语法 $(selector).action():  $符号用于定义jQuery selector是选择符(选择html元素)action是对元素要执行的动作|事件

如 $("p").hide()  隐藏所有<p>的元素  $(this).hide() 隐藏当前的元素

selector(选择器): 均以$()开头 

$("element")选取所有html元素     

$("#id")为id选择器，选择id相同的所有元素

$(".class")为class选择器，选择class相同的所有元素

jQury事件

一般来说使用$(document).ready()允许在文档全部加载完全后执行对应的函数，一般使用js匿名函数的形式

$(document).ready(function(){
 //jQuery code to be executed
});

常见事件： click(0  dbclick()  mouseenter() mouseleave() mousedown() mouseup()    //->鼠标的事件

hover(fun1,fun2)//enter和leave的结合，需要两个函数动作参数  

focus()//获取焦点 鼠标点击或者tab移动到元素  blur()//失去焦点  submit()//提交  change()//改变   --->表单的事件

load() resize() scoll() unload()  //----->window dom的事件

keypress() keydown() keyup() //------->键盘的事件

jQuery效果 

show() hide() 动作

$(selector).(hide|show)([speed[,function]]) //function是隐藏或者显示之后执行的函数动作 

$("hideBtn").click(function(){
 $("#texttobehide").hide(1000,function(){
  window.alert("text has been hiden");
});
});

hide一般和show成对出现  使用toggle()方法来切换hide()和show()方法  参数

淡入淡出效果:  fadeIn()  fadeOut() fadeToggle()  fadeTo()

fade(In|Out)([speed[,function]]):淡入已经隐藏的元素|淡出可见的元素

同hide/show  淡入淡出也可以切换 fadeToggle([speed[,function]]);

  fadeTo(speed,opacity[,function])方法 // opacity不透明度 将元素渐变为给定的不透明度

滑动:(元素上下滑动) slideDown() slideUp() slideToggle() 

使用方法完全同hide show  

动画:（允许自定义动画）  animate()

$(selector).animate({cssParams}[,speed,function])  //注意html元素默认是无法移动的  故而元素css属性要设置position的值

//animate()操控css属性的时候  要用驼峰命名 如:  margin-left属性要使用marginLeft

$("btnChangeCss").click(function(){
 $("#changeDiv").animate({
 left:'100px',
 opacity:'0.8',
 height:'+=100px',//animate可以使用-= +=做相对值
 width:'toggle'});//animate使用预定义的值  show | hide | toggle
});

animate()可以使用相对值(使用-= +=) 还能使用预定义的值 如上

animate()动画队列  可以使指定的元素 依次执行动画  

停止动画:stop()

以上各方法的可选函数function都是在动画100%执行完之后执行的函数--->callback

链Chaining:允许在相同的元素上执行多条jQUery指令(方法或者动作)，顺序执行

$(selector)(.action())+

jQuery DOM 获取/设置内容和属性

text() //获取/设置文本内容

html() //获取/设置元素内容 含标记

val()//获取表单字段的值

attr("attr")//获取属性的值

$("btn").click(function(){
 window.alert('text'+ $("#txt").text());//改为val获取输入字段的值
});

 (text|html|val)("content"[,callbackfun])//设置元素的值  可以设置回调函数 设置完毕后调用

attr("attr","newAttrToReplaceTheOld");//第二个参数是新的属性值 替换原来的属性值

attr("attr",function(i,oriValue){ return ...})//回调函数: 第一个参数是元素在元素列表的下标 oriValue是原先的值

添加元素/内容 : 

元素的内部添加 ： append() //末尾添加    prepend()//开头添加    

元素前后添加  :  before()  after() 

各方法的参数都可以任意个数

function test(){
 var append1 = "<h1>node append</p>";
 var prepend1 = "<b>prepend</b>";
 $("#test").append(append1).prepend(prepend1).after("text behind element").before("text ahead");
}

删除元素/内容:

remove([过滤参数])  删除(匹配参数的)元素 以及子元素     empty()  删除元素的子元素 

$("body").remove("#test")//删除body标签内部 id为test的元素

jQuery操作CSS，获取并设置CSS

addClass("classes")  removeClass("class")   toggleClass("class")  css()

一般已经定义了css样式表   可以使用这几种方法增删class属性

字符串参数内部可以使用空格分割 可以添加多个class $("p").addClass("css1 css2");

css("propertyName"[,"value"]);//获取css属性的值   第二个参数使用 用于设置属性的值

可以使用js对象的格式{("properName":"value")[,"properName":"value"]?} 用于对一个元素的多个CSS属性进行设置

$("p").css({"color":"red","font-size":"100px"});；

尺寸:宽度和高度  X --> Height/Width

padding: 内边距   border:边框   margin:外边距

X()为元素实际的宽高    innerX() 算上内边距的宽高  outerX()算上内边距边框的宽高 outerX(true)算上所有的宽高

jQuery 遍历:  (例子 div元素里有 ol ul 等元素-->展开元素形成树的格式 div是根节点父元素) 

 parent(); 返回直接父亲元素   parents([指定父元素]) 返回所有祖先元素  可以设置参数指定父元素

parentUntil("ele") 返回两个元素之间的所有指定元素   $("span").parentUntil("div"); 获取span和div元素之间的所有祖先元素

children() 获取所有直接子元素  find("childEle")获取所有指定匹配的子元素

siblings() 所有兄弟元素  

next() 被选元素的下一个兄弟元素 nextAll()后面的所有兄弟元素  nextUntil("arg")返回两兄弟元素之间所有的兄弟元素

prev和next相反  prev() prevAll()  prevUntil()

过滤: first()  last() //被选元素中第一个/最后一个元素

eq(index)//获取被选元素中索引号指定的元素

$("div p").firt();
$("div p").last;
$("h1").eq(0);//index从0开始 

filter("arg")  not("arg")// 获取匹配的元素  not获取不匹配的所有元素

$("div").filter(".text");//获取div元素内所有class为text的元素

jQuery && AJAX

AJAX是异步加载的重要方法  可以不重新加载全部页面的情况下  实现对指定部位地方进行修改的技术 一般初始化网页也可以进行AJAX加载 实现高效加载

$(selector).load(url[,data[,callbackFunction]])

url指定要异步加载的url  data指定要与请求一同发送的字符串key/value对的集合 fun为回调函数

load的回调函数 function(responseTxt,statusTxt,xhr)//分别为 成功调用的结果  调用的状态 XMLHttpRequest对象

AJAX的  post()  和  get()  方法

GET: 从服务器获取数据  一般可能会获取缓存的数据

POST:也是从服务器中获取数据 但是不会缓存数据 通常同请求一起发送数据

语法格式   

$.get(url,callbackFunction)   

$.post(url,data,callbackFunction)  data为连同请求一同发送的数据

function(data,status):  data为返回的数据 status为状态