您的位置:首页 > Web前端 > JQuery

jQueryHTML

2019-06-09 19:57 1456 查看
开发工具与关键技术:VS    jQuery
作者:宋永烨
撰写时间:2019-6-1

jQuery拥有可以操作HTML的元素与属性的强大方法.在jQuery中,有一个很重要的部分,那就是操作DOM,通过操作它,使得jQuery访问和操作元素变得简单
注:DOM = Document Object Model(文档对象模型)
jQuery操纵DOM的三个实用方法
1.text();在text方法没有参数时,该方法获取文本值,有参数时,设置值.获取与设置的值为选中的文本值,注:如果用text输出标签会在页面上已文本的方式显示而非解析为标签
代码
输出后的效果

2.html方法,与上述text方法功能类似,使用方法相同,唯一的不同在于输出的值,该方法返回的文本若为标签,会被解析为标签而非文本值
此图片的代码与上图展示的代码唯一不同为,将text替换为html

3.除上述两种方法外,还有一个方法功能与上文类似但适用范围小,
val():设置或返回表单字段的值,val()方法用于设置和返回表单中的字段 因为这是封闭标签,需要添加文本只能通过标签本身的属性value的值
此为html代码
创建一个input标签,给一个id value值为空,在jQuery中用id选择器选中该标签,使用val方法,设置该标签的值,故该标签输出的结果不为空


此方法在数据交货的页面会大量使用,用于数据的获取,回填,修改等
4.上文介绍了几种获取内容的方法,通过获取内容,去修改,回填等,而为使页面更加美观与动态性更强,jQuery提供了获取属性的方法,让使用者可以轻易修改几乎任何属性
attr():无值输入,获取选中标签的所有属性的值,一个值,获取输入的属性对应的值
多个值,通过键值对的格式,设置需要修改的任意元素
该属性的效果包含了css方法
css方法:修改或获取选中的标签的css的属性值
attr方法可以修改的属性值包括css方法的属性值,但修改css属性使用css方法更加简便
attr方法格外的强大,它同样可以修改value值,即取代val方法,但同样会稍微复杂一点
使用attr与css修改css属性的对比

attr因为功能的强大,所以配置项也会更多,更复杂,但同样适用性更广.
attr支持回调函数,函数的参数有两个
第一个:被选中的元素的当前下标
第二个:原始值,
回调函数通过return返回希望使用的字符串
5.jQuery可以非常简易的操作CSS的属性
语法: css(‘需要匹配的属性’); 用于匹配属性对应值
css(‘需要匹配的属性’,‘值’); 用于修改具体的属性的值
6.添加HTML内容
上述的除html方法外,都是修改HTML,而append等类型方法可以添加html元素
append方法会在元素的末尾追加内容
添加的元素个数无上限,添加的内容为html字符串,与html方法类似,它不会被解析为纯文本,而是一个HTML的标签
prepend方法与append方法类似,但插入的位置为开头
after方法插入的位置为选中的元素的之后
before方法插入的位置为选中的元素之前
总结:
jQuery方法必须用jQuery对象
attr虽然可以达到与css方法与val方法一样的效果,当代码会更加复杂
text输出的值会被转化为文本,如果需要输出一个标签而不是标签的文本,那请使用html输出
下图为左边为代码 , 右边为效果图

实际效果与方法本身效果有差异在于代码执行先后的问题!
本文部分参考W3Shcool

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: