博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery HTML
阅读量:7231 次
发布时间:2019-06-29

本文共 2472 字,大约阅读时间需要 8 分钟。

第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:

其实
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()返回的引用,可以存入变量。

想要学习前端开发的同学,可以加群:
543627393 学习哦!

转载地址:http://ngdfm.baihongyu.com/

你可能感兴趣的文章
mysql数据库主从复制
查看>>
Shell标准输出、标准错误 >/dev/null 2>&1
查看>>
Android自定义对话框(Dialog)位置,大小
查看>>
设置python的默认编码为utf8
查看>>
简易sqlhelper-java
查看>>
通过案例对SparkStreaming 透彻理解三板斧之一:解密SparkStreaming运行机制
查看>>
HBuilder 学习笔记
查看>>
利用OpenStreetMap(OSM)数据搭建一个地图服务
查看>>
TopN算法与排行榜
查看>>
lucene排序算法之向量空间模型(一)
查看>>
新浪微博数据Json格式解析
查看>>
WLAN 802.11 wifl区别
查看>>
oracle授权动态视图权限给用户
查看>>
Debian – 出现-bash: pip: command not found错误解决办法
查看>>
Zxing扫描二维码
查看>>
我的友情链接
查看>>
aspcms后台拿shell漏洞(非添加模块)及修复方法
查看>>
C语言冒泡排序法
查看>>
B2B行业门户网站群发邮件时间及发送频率
查看>>
关于虚拟机能ping通物理机,而物理机ping不通虚拟机问题解决。
查看>>