百木园第一组函数：
1、val：
- 操作 DOM 数组中的对象的 value 属性
$(选择器).val();//无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值);//有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2、text：
- 操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text();//无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值);//有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3、attr：
- 可以对 DOM 对象的 value，文字显示内容之外的其他属性进行操作
$(选择器).attr(“属性名”);//根据”属性名“获取 DOM 数组中第一个 DOM 对象的属性值
$(选择器).attr(“属性名”,“值”);//根据”属性名“对数组中所有 DOM 对象的属性重新赋值
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>函数练习</title>
<style type=\"text/css\">
div{
background: greenyellow;
width: 100px;
height: 30px;
}
</style>
<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>
<script type=\"text/javascript\">
$(function(){
$(\"#btn1\").click(function(){
//获取dom数组中第一个对象的value属性值
var value = $(\":text\").val();
alert(value);
})
$(\"#btn2\").click(function(){
//修改所有文本框的value值
$(\":text\").val(\"修改后的value\");
})
$(\"#btn3\").click(function(){
//获取所有span的文本值,连接成一个字符串,再将他输出看看
alert($(\"span\").text());
})
$(\"#btn4\").click(function(){
//修改所有span的文本值
$(\"span\").text(\"喜羊羊和灰太狼都上天堂了\");
})
$(\"#btn5\").click(function(){
//输出第五个按钮的class属性值
alert($(\":button:eq(4)\").attr(\"class\"));
})
$(\"#btn6\").click(function(){
//修改第五个按钮的class属性值
$(\":button:eq(4)\").attr(\"class\",\"我被修改了！！！\");
})
})
</script>
</head>
<input type=\"text\" name=\"我是第一个文本框的name属性!\" value=\"第一个value\" /><br />
<input type=\"text\" value=\"第二个value\" /><br />
<input type=\"text\" value=\"第三个value\" /><br />
<span>你好，我是喜羊羊</span><br />
<span>你好，我是灰太狼</span><br />
<input type=\"button\" value=\"获取dom数组中第一个对象的value属性值\" id=\"btn1\" />
<input type=\"button\" value=\"修改所有文本框的value值\" id=\"btn2\" />
<input type=\"button\" value=\"获取所有span的文本值连接的字符串\" id=\"btn3\" />
<input type=\"button\" value=\"修改所有span的文本值\" id=\"btn4\" />
<input type=\"button\" value=\"输出第五个按钮的class属性值\" id=\"btn5\" class=\"我是第五个按钮的class属性值\"/>
<input type=\"button\" value=\"修改第五个按钮的class属性值\" id=\"btn6\" />
<body>
</body>
</html>
第二组函数：
1、remove：
$(选择器).remove();//将数组中所有 DOM 对象及其子对象一并删除
2、empty：
$(选择器).empty();//将数组中所有 DOM 对象的子对象删除
3、append：
- 为数组中所有 DOM 对象添加子对象
$(选择器).append(\"<div>我动态添加的 div</div>\");
4、html：
- 设置或返回被选元素的内容（innerHTML）
$(选择器).html();//无参数调用方法，获取 DOM 数组中第一个元素的内容
$(选择器).html(值);//有参数调用，用于设置 DOM 数组中所有元素的内容
5、each：
- each 可以对 数组，json 或 dom 数组等进行遍历，对每个元素调用一次函数（$.each中的参数）
- $ 相当于是 java 的一个类名。each 就是类中的静态方法，静态方法调用，可以使用 【类名.方法名称 】的方式调用
-
index: 数组的下标（json中的“key”也可以看作为下标）
-
element: 数组的对象
$.each( 要遍历的对象, function(index,element) { 处理程序 } );//语法 1
jQuery 对象.each( function( index, element ) { 处理程序 } );//语法 2
练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>函数练习2</title>
<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>
<script type=\"text/javascript\">
$(function(){
$(\"#btn1\").click(function(){
//使用remove:删除父和子所有的dom对象
$(\"select\").remove();
})
$(\"#btn2\").click(function(){
//使用empty 删除子dom对象
$(\"select\").empty();
})
$(\"#btn3\").click(function(){
//使用append,增加dom对象
$(\"select\").append(\"<option value=\'爱心超人\'>我是新来的爱心超人</option>\");
})
$(\"#btn4\").click(function(){
//使用html()函数,获取数组中第一个dom对象的文本值，包括html代码(innerHTML)
//alert($(\"select\").text());//不包括hmtl代码(innerText)
alert($(\"select\").html());
})
$(\"#btn5\").click(function(){
//使用html(有参数)，设置dom对象的文本值
$(\"span\").html(\"<h3>我是新来的GG棒！！！</h3>\");
})
$(\"#btn6\").click(function(){
//循环普通数组,非dom数组
var arr = [1,2,3];
$.each(arr,function(i,n){
alert(\"下标=\"+i + \"元素=\"+ n);
})
})
$(\"#btn7\").click(function(){
//josn对象:
var json = {\"name\":\"王狗蛋\",\"age\":20};
$.each(json,function(i,n){
//循环json
alert(\"key=\"+i+\",value=\"+n);
})
})
$(\"#btn8\").click(function(){
//dom数组
var domArray = $(\"option\")
$.each(domArray,function(i,n){
alert(\"下标=\"+i+\",option的value=\"+n.value);
})
})
$(\"#btn9\").click(function(){
//each的另一种写法
$(\":button\").each(function(i,n){
alert(\"i=\"+i+\"，n=\"+ n.value);
})
})
})
</script>
</head>
<body>
<select>
<option value=\"\" selected>-- 超人选择 --</option>
<option value=\"开心超人\">开心超人</option>
<option value=\"小心超人\">小心超人</option>
<option value=\"粗心超人\">粗心超人</option>
</select>
<br />
<span>我是GG棒！！！</span><br />
<input type=\"button\" value=\"删除select对象\" id=\"btn1\" />
<input type=\"button\" value=\"删除select对象的子对象\" id=\"btn2\" />
<input type=\"button\" value=\"添加select对象的子对象\" id=\"btn3\" />
<input type=\"button\" value=\"获取select对象的文本值\" id=\"btn4\" />
<input type=\"button\" value=\"修改span文本值\" id=\"btn5\" />
<input type=\"button\" value=\"遍历普通数组\" id=\"btn6\" />
<input type=\"button\" value=\"遍历json\" id=\"btn7\" />
<input type=\"button\" value=\"遍历dom数组(option)\" id=\"btn8\" />
<input type=\"button\" value=\"遍历dom数组(button)\" id=\"btn9\" />
</body>
</html>
随笔：
1、hide：
$(选择器).hide();//将数组中所有 DOM 对象隐藏起来2、show：
$(选择器).show();//将数组中所有 DOM 对象在浏览器中显示出来
来源：https://www.cnblogs.com/Burning-youth/p/16075976.html
本站部分图文来源于网络，如有侵权请联系删除。