第一组函数:
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 对象在浏览器中显示出来