大佬教程收集整理的这篇文章主要介绍了【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
第一组函数：
1、val：
$(选择器).val();//无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值);//有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2、text：
$(选择器).text();//无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值);//有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3、attr：
$(选择器).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：
$(选择器).append("<div>我动态添加的 div</div>");
4、html：
$(选择器).html();//无参数调用方法，获取 DOM 数组中第一个元素的内容
$(选择器).html(值);//有参数调用，用于设置 DOM 数组中所有元素的内容
5、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 对象在浏览器中显示出来
以上是大佬教程为你收集整理的【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲全部内容，希望文章能够帮你解决【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。