JQuery HTML

JQuery HTML

1. 获取与设置DOM

text() - 设置或返回所选元素的文本内容

//获取指定元素的文本内容
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

//设置指定元素的文本内容
$("#btn2").click(function(){
  $("#test1").text("Hello world!");
});

html() - 设置或返回所选元素的内容（包括 HTML 标记）

//获取指定元素的html内容
$("#btn1").click(function(){
  alert("HTML: " + $("#test").html());
});

//设置指定元素的html内容
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});

val() - 设置或返回表单字段的值

//获取指定表单字段的值
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

//设置指定表单字段的值
$("#btn2").click(function(){
  $("#test3").val("Dolly Duck");
});

attr() - 获取或添加属性值

//获取指定元素的属性值
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

//添加or覆盖指定元素的属性值
$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

//同时添加or覆盖多个指定元素的属性值
$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

removeAttr() - 删除属性值

$("button").click(function(){
  $("#w3s").removeAttr("href");
});

注意：
- 即便是html也无法获取完整的标签段落，如有这中需要可以直接使用选择器获取（$(#id)、$(.class)...）
- attr在添加属性时，若该属性已存在，则为覆盖操作；若该属性未存在，则为添加操作

1.1 回调函数

html()、text()、val()、attr()都有回调函数。
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

例：

<p class="test1">这是<b>粗体0</b>文本。</p>
<p class="test1">这是<b>粗体1</b>文本。</p>
<p class="test1">这是<b>粗体2</b>文本。</p>
<button id="btn1">显示旧/新文本</button>

<script>
	$(document).ready(function(){
		$("#btn1").click(function(){
			$(".test1").text(function(index,origText){
		      return "Old text: " + origText + " New text: Hello world! (index: " + index + ")"; 
			});
		});
	});
</script>

<!--输出结果-->
Old text: 这是粗体0文本。 New text: Hello world! (index: 0)
Old text: 这是粗体1文本。 New text: Hello world! (index: 1)
Old text: 这是粗体2文本。 New text: Hello world! (index: 2)

由例可知，origText表示旧字符串，return的字符串会取代原字符串。index表示当前操作的元素在选择器获取元素列表中的位置，比如此处选择器$(".test1")获取了3个class为test1的元素，那么当操作第一个数组的时候，它的索引(index)就是0
注意：并不是所有选择器都会产生数组，比如id选择器就只会获取最近的符合参数的元素，其长度始终为1

2. 添加与删除DOM

append() - 在被选元素的结尾插入内容
```
$("p").append("Some appended text.");
```
prepend() - 在被选元素的开头插入内容
```
$("p").prepend("Some prepended text.");
```
after() - 在被选元素之后插入内容
```
$("img").after("Some text after");
```
before() - 在被选元素之前插入内容
```
$("img").before("Some text before");
```

remove() - 删除被选元素及其子元素

//删除 id="div" 的元素
$("#div1").remove();

//删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");

empty() - 删除被选元素的子元素
```
$("#div1").empty();
```

2.1 append与after（prepend和before）的区别

append() 和 prepend() 是在被选中元素的结尾/开头添加元素，也就是说，添加的元素不会超出被选中元素标签的范围
after() 和 before() 是在被选中元素的后面/前面添加元素，即添加的元素会出现在被选中元素标签的外侧
```
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    
</ol>

```

2.2 重复添加元素

四种方法都可以多次重复添加元素，使用这个特性也可以做到动态添加元素

function appendText()
{
	var txt1 = "<p>Text.</p>";               // 以 HTML 创建新元素
	var txt2 = $("<p></p>").text("Text.");   // 以 jQuery 创建新元素
	var txt3 = document.createElement("p");  // 以 DOM 创建新元素
	txt3.innerHTML = "Text.";
	$("p").append(txt1,txt2,txt3);         // 追加新元素
}

3. CSS类

3.1 添加、删除和切换样式

前言 - 例子中所使用的样式如下

.important {
	font-weight:bold;
	font-size:xx-large;
}

.blue {
	color:blue;
}

addClass() - 向被选元素添加一个或多个类

//给所有p段落添加blue样式
$("button").click(function(){
  $("p").addClass("blue");
});

//给所有 id = "div1" 添加blue和important样式
$("button").click(function(){
  $("#div1").addClass("important blue");
});

removeClass() - 从被选元素删除一个或多个类

$("button").click(function(){
  $("p").removeClass("blue");
});

toggleClass() - 对被选元素进行添加/删除类的切换操作

使用toggle就不用同时设置addClass和removeClass两个按钮来实现样式的开关了
```
$("button").click(function(){
  $("p").toggleClass("blue");
});
```
注意：添加的样式必须提前设置好，不能添加字面量

3.2 css()

css() 方法设置或返回被选元素的一个或多个样式属性。
获取
```
$("p").css("background-color");
```

设置

//设置单个属性
$("p").css("background-color","yellow");
//设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});

django-html属性django jquery

526互联

JQuery笔记 - JQuery HTML