文章目录
- 属性操作
- 设置或获取固有属性
- 设置或获取自定义属性
- 内容文本值
- 普通元素内容
- 普通元素文本内容
- 表单值
- 遍历
- 创建
- 添加
- 删除
属性操作
设置或获取固有属性
获取固有属性:
$(\"selector\").prop(\"attribute\");//获取固有属性
设置固有属性:
$(\"selector\").prop(\"attribute\",\"value\");//设置固有属性
设置或获取自定义属性
获取自定义属性:
$(\"selector\").attr(\"attribute\",\"value\");//获取自定义属性
设置自定义属性:
$(\"selector\").attr(\"attribute\",\"value\");//设置自定义属性
内容文本值
普通元素内容
获取:
$(\"selector\").html();//获取普通元素内容
设置:
$(\"selector\").html(\"\");//设置普通元素内容
普通元素文本内容
获取:
$(\"selector\").text();//获取普通元素文本内容
设置:
$(\"selector\").text(\"\");//设置普通元素文本内容
表单值
获取:
$(\"selector\").val();//获取表单值
设置:
$(\"selector\").val(\"\");//设置表单值
元素操作
遍历
遍历:对同一类元素进行不同的操作
代码格式:
$(\"selector\").each(function(index,domEle){ codeblock;});//遍历元素,并对每个元素进行操作$(\"selector\").each({\"attribute\":\"value\"},function(i,ele){codeblock;});//对对象的属性和属性值进行操作
其中,index参数表示遍历的元素的索引,domEle参数表示DOM对象,使用时要注意转换成jQurey对象;i参数表示对象的属性,ele参数表示对象的属性值。
创建
代码格式,比如我要在列表创建一个小li:
$(\"<li></li>\");//创建
添加
内部添加:
$(\"selector\").append();//在元素内部的最后面添加$(\"selector\").prepend();//在元素内部的最前面添加
外部添加:
$(\"selector\").after();//在目标元素的后面添加$(\"selector\").before();//在目标元素的前面添加
内部添加就相当于给目标元素添加子元素,外部添加就相当于给目标元素添加兄弟元素。
删除
删除也分为多种形式:
$(\"selector\").remove();//把自己以及自己的子元素都删除$(\"selector\").empty();//只删除自己的子元素$(\"selector\").html(\"\");//把元素内容置为空,相当于删除了自己的子元素
总结
其实学习知识的过程大都是单调且枯燥的,但我们也要坚持下去,因为在后面实际使用中我们就会发现,页面中各种各样的功能其实都是通过将这些基础知识按照一定逻辑排列使用来实现的,所以我们不能急于求成,要打好基础,毕竟万丈高楼平地起,下层基础才能决定上层建筑,加油!!!