jQuery HTML/CSS 参考文档

news2024/12/26 14:27:51

jQuery HTML/CSS 参考文档

文章目录

应用样式
1. 示例
属性方法
示例

jQuery HTML/CSS 参考文档

应用样式

addClass( classes ) 方法可用于将定义好的样式表应用于所有匹配的元素上。可以通过空格分隔指定多个类。

示例

以下是一个简单示例，设置了para标签 <p> 的 class 属性−

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         (document).ready(function() {("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>

      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>  
   </head>

   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

这将产生以下结果−

jQuery HTML/CSS 参考文档

属性方法

以下表格列出了你可以使用的一些有用的方法来操作属性和属性。

序号	方法与描述
1	attr( properties ) 将一个键/值对象设置为所有匹配元素的属性。
2	attr( key, fn ) 在所有匹配的元素上，将一个属性设置为计算值。
3	removeAttr( name ) 从每个匹配元素中移除一个属性。
4	hasClass( class ) 如果在匹配的元素集合中至少存在一个指定的 class，则返回 true。
5	removeClass( class ) 从匹配元素集合中移除所有或指定的 class。
6	toggleClass( class ) 如果不存在指定的 class，则添加；如果存在，则删除。
7	html( ) 获取第一个匹配元素的 HTML 内容（innerHTML）。
8	html( val ) 设置每个匹配元素的 HTML 内容。
9	text( ) 获取所有匹配元素的合并文本内容。
10	text( val ) 设置所有匹配元素的文本内容。
11	val( ) 获取第一个匹配元素的输入值。
12	val( val ) 如果在 `<input>` 上调用，则设置每个匹配元素的 value 属性；如果在带有传递的 `<option>` 值的 `<select>` 上调用，则选择传递的选项；如果在复选框或单选框上调用，则选中所有匹配的复选框和单选框。

示例

与上面的语法和示例类似，下面的示例将帮助您理解在不同情况下使用各种属性方法的方法。

这里是不同情况下属性方法的完整列表 –

序号	选择器和描述
1	$(“#myID”).attr(“custom”) 这将返回与ID myID匹配的第一个元素的属性custom的值。
2	$(“img”).attr(“alt”, “Sample Image”) 这将把所有图片的alt属性设置为新值”Sample Image”。
3	$(“input”).attr({ value: “”, title: “Please enter a value” }); 把所有元素的值设置为空字符串，并将jQuery示例设置为字符串Please enter a value。
4	$(“a[href^=https://]”).attr(“target”,”_blank”) 选择具有以 https:// 开头的href属性的所有链接，并将其target属性设置为 _blank 。
5	$(“a”).removeAttr(“target”) 这将移除所有链接的 target 属性。
6	$(“form”).submit(function() {$(“:submit”,this).attr(“disabled”, “disabled”);}); 这将在点击提交按钮时，将disabled属性修改为值”disabled”。
7	$(“p:last”).hasClass(“selected”) 如果最后一个`<p>`标签有关联的class为 selected ，则返回true。
8	$(“p”).text() 返回包含所有匹配的`<p>`元素的组合文本内容的字符串。
9	`$("p").text(" <i>Hello World</i>")` 这将把`<I>Hello World</I>`设置为匹配的`<p>`元素的文本内容。
10	$(“p”).html() 返回所有匹配段落的HTML内容。
11	$(“div”).html(“Hello World”) 这将把所有匹配的`<div>`的HTML内容设置为Hello World。
12	$(“input:checkbox:checked”).val() 获取已选中复选框的第一个值。
13	$(“input:radio[name=bar]:checked”).val() 获取一组单选按钮中的第一个值。
14	$(“button”).val(“Hello”) 设置每个匹配元素`<button>`的value属性。
15	$(“input”).val(“on”) 这将选中所有值为”on”的单选按钮或复选框。
16	$(“select”).val(“Orange”) 这将在下拉框中选择选项Orange，可选项为Orange、Mango和Banana。
17	$(“select”).val(“Orange”, “Mango”) 这将在下拉框中选择选项Orange和Mango，可选项为Orange、Mango和Banana。