jQuery操作Html记录

痛定思痛。 2022-04-08 10:59 215阅读 0赞

做web开发前端通常都会使用jQuery这个js库的，通过jQuery来对html元素进行操作是一件很方便的事情，但是不可能将这些操作的方式都记住的包括鄙人，所以一直就想整理一下在日常开发中使用jQuery操作html的文章  
免责声明：以下内容均来自于互联网收集整理，如有疑问就有疑问吧! \_，对了本篇文章将持续更新  
\#\#jQuery对html元素属性操作

jQuery对元素设置属性主要有2个方法prop(),attr()  
1.prop：这是高版本jQuery新增的方法，用于操作html元素固有的属性；例如：name、id、value等  
2.attr：既可以像prop那样操作固有属性，也能操作我们对html元素自定义的属性；例如：select的option我们定义< option name=‘name’>< /option >这里的name就是我们自定义的属性，只能通过attr来进行操作。

\#\#\#jQuery控制元素的显示和隐藏  
从官网可以看到元素的显示和隐藏通过show()、hide()这两个方法完成  
.hide()，官网解释  
The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( “display”, “none” )从这句可以看出来hide本质是上为元素添加了display:none这一css  
.show()，官网解释  
The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( “display”, “block” )可以看出show是将元素的display:none修改为display:block，因此该方法也仅适用与通过jQuery隐藏的元素或者该元素display:none属性的元素。

\#\#\#jQuery获取表单元素的值以及设置表单元素的值  
jQuery获取表单元素的值和设置表单元素的值很简单  
1.KaTeX parse error: Expected 'EOF', got '\#' at position 3: ('\#̲element').val()…(’\#element).val(‘要设置的值’);  
\#\#\#jQuery使用html()方法  
$(selector).html()用于对元素的inner html进行操作，请记住是inner Html  
如果html()不带参数这返回该元素的inner html内容，如果带有参数则将该元素的inner html内容替换为参数内容  
当然还有更详细的内容

使用函数来设置元素内容  
使用函数来设置所有匹配元素的内容。  
语法  
$(selector).html(function(index,oldcontent))  
index - 可选。接收选择器的 index 位置。  
oldcontent - 可选。接收选择器的当前内容。