PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 演示文本操作3个功能+演示样式属性操作 3个功能+演示 效果操作 3个功能 +什么是节点以及演示节点功能操作

演示文本操作3个功能+演示样式属性操作 3个功能+演示 效果操作 3个功能 +什么是节点以及演示节点功能操作

麦兜的故事
麦兜的故事 原创
2021年07月22日 10:25:09 438浏览

文本操作

1:val() 设置或获取表单字段的值
  1. // 不带参数:获取
  2. console.log($("#user").val());
  3. // 带参数:设置
  4. console.log($("#user").val("亚瑟"));
  5. // 带参数:参数为回调函数
  6. let users = $("#user").val(()=>"米莱迪");
2:text() 设置或获取所选元素的文本内容
  1. // 获取
  2. console.log($("button").text());
  3. // 设置
  4. $("button").text("按钮");
  5. console.log($("button").text());
3:html() 设置或获取所选元素的内容(包含 HTML 标签)
  1. $("#select_s").change(function(){
  2. let select = $("#select_s").val();
  3. // console.log(select);
  4. let html_data;
  5. let html_data1;
  6. if(select == 1){
  7. html_data += '<option value="101">北京市</option>';
  8. }else if(select == 2){
  9. html_data += '<option value="201">济南市</option>';
  10. html_data += '<option value="202">青岛市</option>';
  11. html_data += '<option value="203">淄博市</option>';
  12. html_data += '<option value="204">枣庄市</option>';
  13. html_data += '<option value="205">东营市</option>';
  14. html_data += '<option value="206">菏泽市</option>';
  15. }
  16. $("#select_ss").html(html_data);
  17. let selected = $("#select_ss").val();
  18. console.log(selected);
  19. if(selected == 101){
  20. html_data1 += '<option value="2001">东城区</option>';
  21. html_data1 += '<option value="2002">西城区</option>';
  22. html_data1 += '<option value="2003">朝阳区</option>';
  23. html_data1 += '<option value="2004">丰台区</option>';
  24. html_data1 += '<option value="2005">海淀区</option>';
  25. html_data1 += '<option value="2006">顺义区</option>';
  26. }else if(selected == 201){
  27. html_data1 += '<option value="2001">历下区</option>';
  28. html_data1 += '<option value="2002">市中区</option>';
  29. html_data1 += '<option value="2003">槐荫区</option>';
  30. html_data1 += '<option value="2004">天桥区</option>';
  31. html_data1 += '<option value="2005">历城区</option>';
  32. html_data1 += '<option value="2006">长清区</option>';
  33. }
  34. $("#select_q").html(html_data1);
  35. });

样式属性操作

1:addClass() 向被选中元素添加一个或者多个类名
  1. // jq:增加类名
  2. $("input").addClass("one");
  3. // js:增加类名
  4. document.querySelectorAll("input")[0].classList.add("two");
2:removeClass() 向被选中元素删除指定类名
  1. // 删除类名js
  2. document.querySelectorAll("input")[0].classList.remove("two");
  3. // 删除类名 jq
  4. $("input").removeClass("one");
3:toggleClass() 对设置或者移动指定类进行切换
  1. // 切换类名 如果类名已经存在则删除,如果不存在则添加
  2. $("button").click(()=>$("label").toggleClass("label_1"));

效果操作

1:hide() 隐藏被选元素
  1. // jq 隐藏
  2. $(".content1").hide();
  3. // js 隐藏
  4. document.querySelector(".content1").style.display = "none";
2:show() 显示被选元素
  1. // jq 显示
  2. $(".content1").show();
  3. //js 显示
  4. document.querySelector(".content1").style.display = "";
3:toggle() 被选元素在显示与隐藏之间切换
  1. // 显示与隐藏 来回切换操作
  2. $(".content1").toggle();

什么是节点?

html代码中所有的事物都是节点,里面的元素称之为元素节点。

节点功能操作

  1. // children()
  2. console.log($("ul").children());//获取匹配元素的所有子元素
  3. // find(选择器)
  4. console.log($("body").find("div"));//获取匹配元素的所有后代,由find内的参数选择器决定
  5. // siblings()
  6. console.log($(".content").siblings("ul"));//获取匹配元素的同级元素,具体由siblings内的选择器决定
  7. // next()
  8. console.log($(".content").next());//获取匹配元素的相邻同辈元素(下面的)
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议