jQuery教程

补一下在家看的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()  //被选元素的结尾插入内容,

中间的最后位置

prepend() //被选元素的开头插入内容,

中间的起始位置

after() //被选元素之后插入内容,

之后插入

before() //被选元素之前插入,

之前插入

所以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()


jQuery教程_第1张图片


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("

xxx

");

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的目的)  - -!,说是这么一说,但是没想到这种处理的应用场景 (还木接触过需要跨域的场景~~~~~~~~~~~~)

你可能感兴趣的:(jQuery教程)