【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲

最新推荐文章于 2022-07-12 15:18:50 发布

转载最新推荐文章于 2022-07-12 15:18:50 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/Burning-youth/p/16075976.html

文章标签：

#it

本文介绍了jQuery中常用的DOM操作方法，包括val、text、attr等函数的使用，以及remove、empty、append等操作DOM的方法，并提供了丰富的示例代码。

第一组函数：

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>");

河南党政培训 www.bjganxun.cn

4、html：

设置或返回被选元素的内容（innerHTML）

$(选择器).html();//无参数调用方法，获取 DOM 数组中第一个元素的内容$(选择器).html(值);//有参数调用，用于设置 DOM 数组中所有元素的内容

5、each：

each 可以对数组，json 或 dom 数组等进行遍历，对每个元素调用一次函数（$.each中的参数）
$ 相当于是 java 的一个类名。each 就是类中的静态方法，静态方法调用，可以使用【类名.方法名称】的方式调用
index: 数组的下标（json中的“key”也可以看作为下标）
element: 数组的对象

$.each( 要遍历的对象, function(index,element) { 处理程序 } );//语法 1jQuery 对象.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){//循环jsonalert("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 对象在浏览器中显示出来