w3school中的jQuery小例子练习（二）

text()和html()的区别（html将下面例子的加粗的标签也输出出来了。）

//获取内容——text()、html()的区别
$("#btn1").click(function () {
    alert("text:" + $("#test").text());
    //这是段落中的粗体文本
});
$("#btn2").click(function () {
    alert("html:" + $("#test").html());
    //这是段落中的<b>粗体</b>文本
});

<!--获取内容——text()、html()的区别-->
<p id="test">这是段落中的<b>粗体</b>文本</p>
<button id="btn1">显示text()获取的内容</button>
<button id="btn2">显示html()获取的内容</button>

val()的例子如下:

// val() 方法获得输入字段的值
$("button").click(function () {
     alert("文本框的值： " + $("#test").val());
     //邢树亮
});

<!--val() 方法获得输入字段的值-->
<p>姓名：<input type="text" id="test" value="邢树亮"></p>
<button>显示值</button>

attr()和val()的区别如下：

//获取属性——attr()它可以获得 id、class、type、value 的值，而val()则特指 value 的值
 $("button").click(function () {
    alert("val()获取的值：" + $("#test").val());  //邢树亮
    alert("attr()获取的值：" + $("#test").attr('name'));  //xsl
});

<!--获取属性——attr()它可以获得 id、class、type、value 的值，而val()则特指 value 的值-->
<input id="test" value="邢树亮" name="xsl">
<button>获取</button>

jQ更改div元素的值等

// jQ更改div,文本框元素的值 
$("#btn1").click(function () {
	$("#div1").text("<b>我是用text()更改的</b>");
});
$("#btn2").click(function () {
    $("#div2").html("<b>我是用html()更改的</b>");
});
$("#btn3").click(function () {
    $("#test").val("我是用val()更改的");
});

<!--jQ更改div,文本框元素的值-->
<div id="div1">我是div1。</div>
<div id="div2">我是第二个div.</div>
<p>文本框<input type="text" id="test" value="我是文本框的值"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置HTML</button>
<button id="btn3">设置值</button>

运行后效果图如下：

jQuery attr() 方法也用于设置/改变属性值。

// 改变a标签href的值
$("button").click(function () {
	$("#w3s").attr("href","https://blog.csdn.net/weixin_42814467/article/details/103769638")
});

<!--改变a标签href()的值-->
<a href="http://www.w3school.com.cn" id="w3s">点我跳转</a><br><br>
<button>改变href的值</button>

jQuery - 添加元素

//jQ追加元素append()
$("#btn1").click(function () {
	$("p").append("<b>今年13岁了。</b>");
});
$("#btn2").click(function () {
	$("ol").append("<li>我不喜欢滑冰</li>");
});

<!--jQ追加元素append()-->
<p>我的名字是王晓天，</p>
<ol>
    <li>1.我喜欢吃香蕉</li>
    <li>2.我喜欢打羽毛球</li>
    <li>3.我不喜欢滑冰</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>

jQuery - 删除元素remove()和empty()的区别

//remove()和empty()的区别
$("#empty").click(function () {
      $("#div1").empty();
      //当执行完empty方法后，id为“div1”的元素的子元素被删除。
});
$("#remove").click(function () {
	$("#div1").remove();
	//当执行完remove方法后，id为“div1”的元素以及它的子元素都被删除了。
});

<!--jQuery - 删除元素remove()和empty()的区别 -->
<div id="div1" style="height: 100px;width: 300px;border: 1px solid black; background-color: yellow;">
  我是阿尔法，今天蜜桃成告密我的小鸡在王晓天家偷吃饲料。
    <p>王晓天揍了我的小鸡并挑衅的留了言！</p>
</div>
<br>
<button id="empty">清空div</button>
<button id="remove">删除 div 元素</button>

效果图如下

jQuery - 部分删除元素（过滤被删除的元素）

//部分删除元素（过滤被删除的元素
$("button").click(function(){
     $("p").remove(".abandon");
     //将p元素的class="abandon"删除掉
});

<!--部分删除元素（过滤被删除的元素-->
<p>小确幸</p>
<p class="abandon">不开心的事儿</p>
<p class="abandon">讨厌的人</p>
<button>删除class="abandon"的所有元素</button>

效果图如下：