jQ常用操作dom元素的属性方法
程序员文章站
2022-07-14 22:17:48
...
平时都是写angular，突然想写jquery的时候发现，有时候操作元素的方法，好多都忘记了，现在抽时间把之前用过的方法都重心在熟悉一下，方便自己以后。
以下就介绍一些经常使用的jq中操作dom元素的常见方法：
.val() 和 .html() 方法
- .val() :用于设置或返回选中元素的值
- .html() : 用于设置或返回选中元素的HTML内容
示例:
val()方法： 用于 返回 或设置被选元素的值。
语法：
$('#id').val(value)；
- value参数是 选填 的，它 用于规定被选元素的新内容 。
- 如果value 有值 的话，就是 设置 新值；
- 如果value 没值 的话，就是 获取并返回 被选元素的当前值；
- 多用于input元素；
html() 方法 与 val()方法的不同之处在于：html()方法返回的或设置的是被选元素的内容（类似innerHTML）；
html() 的参数 可以包含标签 :
$("p").html("Hello <b>world</b>!");
html()要注意的两点：
- 参数为空时，取值，但 只返回第一个被选元素的内容
$('p').html();
- 参数不为空时，设置内容，但它会 覆盖所有匹配元素的内容
$(selector).html(content);
// content 可选。规定被选元素的新内容。该参数可包含 HTML 标签。
attr() 和 removeAttr()
- attr(): 用于设置或返回匹配元素的属性和值；
- removeAttr() ： 用于移除指定的属性；
attr() 方法设置或返回被选元素的属性值
常见的几种使用情形：
- 返回指定元素的指定属性的值：
$(选择器).attr(要获取的某个属性的属性名)；
// 比如要获取id为demo的元素的高度
$('#demo').attr("height");
记得属性名也要加引号！
- 设置属性/值
$("选择器").attr("属性名"， "属性值");
// 比如设置元素的宽度
$("#id").attr("width", "600");
- 一次设置多个属性/值
- 使用{}，以key-val的键值对形式指定属性名：属性值，多个之间以逗号隔开
$(selector).attr({attribute:value, attribute:value ...})
// 示例：
$("#id").attr({"width": "300", "height": "100" });
与之相反的是 removeAttr() 方法，它用于移除被选元素的指定属性
$(selector).removeAttr(attribute);
要注意的是，必须指定要移除哪个属性，也就是说attrbute这个属性名是必填的。
- 示例：
$("div").removeAttr("color");
addClass() 和 removeClass()
- addClass() : 用于 添加指定的类，这个有时候会很有用；
- removeClass() : 与上面的方法正好相反，用于 删除 全部或某个特定的类；
- 这两个方法其实有时候也可以 连起来一起使用，比如你先移除某个类，在追加另一个类：
<style>
.className1{ // style1 }
.className2{ //style2 }
</style>
$("p").removeClass("className1").addClass("className2");
addClass() 向被选元素添加一个或多个类
$(选择器).addClass(className);
注意：
- 这个方法 不会移除已经存在的class属性 ，它只是在原有的基础上增加了一个或多个新的class属性，不会覆盖之前存在的class；
- 要增加 多个class 的话， 中间以空格隔开
$("p").addClass("class1 class2");
removeClass() 方法从被选元素移除一个或多个类
$(selector).removeClass(class);
class ,参数选填，指定移除的类的名称；
移除多个，中间加空格；
$("p").removeClass('class1 class2');
- 如果class为空时，则移除备选元素的所有class
$("#p").removeClass();//移除id为p的元素的所有类
toggleClass() ： 模拟反选，从匹配的元素中添加或删除一个类
toggleClass() ： 可以对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。
如果不存在则添加类，如果已设置则删除之。
这样就可以达到切换效果。
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
$(selector).toggleClass(class,switch);
示例：
实现的效果就是，如果p标签有main这个类就移除，没有就添加。
这个很有用，记得最早之前，我做反转效果，还是用的for循环，使用的排他思想，太麻烦了；
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p class='main'>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
如何判断被选元素是否包含指定类-- hasClass()
hasClass() 方法检查被选元素是否包含指定的 class。
$(selector).hasClass(class);
- class 必需参数，它规定需要在指定元素中查找的类。
- 返回的结果是 布尔值：
- 如果有指定class返回true；
- 如果不含有指定class，则返回false；