》》Jqurey html

1部分:jQuery HTML

1.获取内容和属性

--  获取内容:

text():设置或获取所选元素的文本内容

html():设置或获取所选元素的内容(包括HTML标记)

val():设置或获取表单字段的值

--  获取属性:

attr():设置或获取属性值

  ps1:以上函数不传入参数时是获取;传入参数时是设置。

  ps2:以上函数均有最后一个参数设置为回调函数。回调函数有两个值:当前选中元素下标,旧值。

2.添加元素

· append():在被选元素的末尾插入内容

· preappend():在被选元素的开头插入内容

· after():在被选元素之后插入内容

· before():在被选元素之前插入内容

ps:append/preappend:选择元素内部嵌入;before/after:选择元素外部追加。

未追加前效果:

追加后效果:

插入后:hello tomorrow是使用append():插入到div里面了,并与div里面的元素内容相联合;而hello yesterday是使用after():插入待div外面,即div元素的后面。

3.jQuery 删除元素:

remove():删除被选元素及子元素。ps:remove()可接受一个参数,对被删元素进行过滤。参数是jQuery选择器的语法。例如:$('p').remove('.test1');

empty():从被选元素中删除子元素(被选元素没有被删除,相当于留了一个外壳)

4.获取/设置css类:

addClass():向被选元素中添加一个或多个类;

removeClass():向被选元素中删除一个或多个类;

toggleClass():切换addClass()和removeClass();

css():设置或获取css属性。(有参数设置值;无参数获取值);css有参数:css("propertyname":"value"),建议属性名和属性值都加上引号;如果属性名不加引号,要使用驼峰标记法:如margin-left变为marginLeft。

5.jQuery尺寸

· width()/height():设置或获取当前元素的宽度/高度(不包括内边距,边框,外边距)

· innerWidth()/innerHeight():设置或获取当前元素的宽度/高度(包括内边距)

· outerWidth()/outerHeight():设置或获取宽度/高度(包括内边距和边框);

2部分:jQuery遍历

因为DOM其实就是树状结构,因此相关算法中树的概念可以很容易的引申过来。

1.遍历--祖先(父元素以上都是祖先元素):

· parent():返回被选元素的直接父元素

· parents():返回被选元素的所有祖先元素,它会一直遍历到文档根元素(<html>)

· parentsUntil():返回介于两个指定元素间的所有祖先元素。如:$('span').parentsUntil('div'):代表span与div之间所有的祖先元素。

2.遍历--后代(子元素一下都是后代元素):

· children():返回被选元素的直接子元素

· find():返回被选元素的所有子元素(一直遍历到最后一个子元素)

3.遍历--同胞(siblings;兄弟元素,具有相同的父元素)

· siblings():返回被选元素的所有同胞(兄弟)元素;可选参数可以用来进行过滤:$('h2').siblings('p'):返回与h2具有相同父元素的p元素

· next():返回被选元素的下一个同胞元素(只返回一个元素)

· nextAll():返回被选元素后面的同胞元素

· nextUntil():介于两个参数之间的同胞元素

· prev();prevAll();prevUntil():与上述类似,只不过遍历方向是向上走。

4.遍历--过滤

· first():返回被选元素的第一个元素

· last():返回被选元素的最后一个元素

· eq():返回被选元素中带有指定索引号的元素;索引号从0开始;如:$('p').eq(1):返回第二个<p>元素

· filter():如:$('p').filter('.test'):返回带有class="test"的<p>元素

· not():返回不符合标准的所有元素,与filter()执行结果相反。

 

3部分:jQuery AJAX

了解AJAX:Ajax之路

其实jQuery Ajax就是将ajax实现代码封装,同时兼顾了不同浏览器的Ajax实现。

1.jQuery load():从服务器加载数据,并将返回的数据放入被选元素中。

·   url:必须,希望加载的URL;ps:可以将url选择器添加到url中;

·   data:可选参数,与请求一起发送的字符串键值对集合;

·   callback:可选,load()完成后执行的回调函数;可设置的参数:

  responseTxt:包含调用成功的结果内容;

statusTxt:包含调用的状态;"success"或"error"

xhr:XMLHttpResponse对象

2.get()与post()方法

$.get():

  url:必选;callback:可选;callback第一个参数存放请求页面的内容,第二个参数存放请求的状态。

  如:

$.post():

  url:必须;其它可选参数。

 

4部分:jQuery noConflict()

jQuery使用作为简写。所以存在一个问题:如果其它js框架使用了作为jQuery的简写。所以存在一个问题:如果其它js框架使用了符号,或者书写的js代码中定义了$作为变量或者函数名,这时候就会产生冲突。

释放$,使用jQuery替代:

$.noConflict()返回的引用,可以存入变量。

posted on 2017-12-23 12:00  风过无涟漪  阅读(191)  评论(0编辑  收藏  举报