Jquery 常用笔记 (二)

此系列博客主要是记录常用到的Jquery的功能，如果有不正确的地方请大家指教，后续部分不定时更新（zouw）

3.内容操作

示例：

<p id="test">这是段落中的<b>粗体</b>文本</p>
<input type="text" id="name" value="米老鼠"></p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button>
<button id="btn3">显示 input中的value值</button>
<button id="btn4">设置文本</button>
<button id="btn5">设置HTML</button>
<button id="btn6">设置input中的value值</button>

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

获取：

$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });

输出：这是段落中的粗体文本

设置：

$("#btn4").click(function(){
    $("#test").text("这里是设置的内容");
  });

结果：段落中内容改变为：这里是设置的内容

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

获取：

$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });

输出：这是段落中的<b>粗体</b>文本

设置：

$("#btn5").click(function(){
    $("#test").html("("<b>Hello world!</b>");
  });

结果：段落中内容改变为：Hello world!  (为加粗样式)

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

获取：

$("#btn3").click(function(){
    alert($("#name").val());
  });

输出：米老鼠

设置：

$("#btn3").click(function(){
    $("#name").val("唐老鸭");
  });

结果：input中内容改变为  唐老鸭

4.属性操作

.attr()

获取或设置属性

<a href="http://www.baidu.com" id="link">www.baidu.com</a>
<button id="btn1">获取链接地址</button>
<button id="btn2">设置链接地址</button>

$("btn2").click(function(){
    alert($("#link").attr("href"));
  });

效果：弹出对话框：http://www.baidu.com

$("btn2").click(function(){
    $("#link").attr("href","http://www.google.com");
  });

效果：将连接地址改变为  http://www.google.com

 5.移除内容

<div id="div"> This is some text in the div. </div>

<button id="btn1">获取div中内容以及本身</button>

<button id="btn2">设置div中内容</button>

1.remove() - 删除被选元素（及其子元素）

$("btn1").click(function(){    

　　$("#div").remove();

});

效果：div 中内容删除掉，div本身也删除掉

2.empty() - 从被选元素中删除子元素（自己不删除）

$("btn2").click(function(){    

　　$("#div").empty();

});

效果：div 中的内容删除掉，但是div还保留，

 

转载于:https://www.cnblogs.com/cq2win/p/4606190.html