【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲
第一组函数：
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 对象在浏览器中显示出来
版权声明：本文为猿头猿脑的王狗蛋原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。