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

博客列表 > 第20章 0112-jQuery编程基础1,学习心得、笔记($(): 参数的四种类型,常用的getter/setter方法: attr(),css(),val(),html(),text()...)

第20章 0112-jQuery编程基础1,学习心得、笔记($(): 参数的四种类型,常用的getter/setter方法: attr(),css(),val(),html(),text()...)

努力工作--周工--Robin
努力工作--周工--Robin 原创
2021年01月26日 16:29:50 713浏览

今天所学心得、笔记

1、$()函数的四个参数

  1. // 1. 选择器
  2. $(".item1").css("background", "pink");
  3. // 2. 原生js对象,(包装器功能)
  4. // 2.1 将原生js对象,变成jQuiery对象
  5. console.log($(document.querySelector(".item2")));
  6. $(document.querySelector(".item2")).css("background", "lightyellow");
  7. // 2.2 将jQuiery对象,变成原生js对象
  8. console.log($(".item3").get(0));
  9. $(".item3").get(0).insertAdjacentHTML("afterend","<li>HI, 大家晚上去嗨皮111~~</li>");
  10. $(".item3")[0].insertAdjacentHTML("afterend","<li>HI, 大家晚上去嗨皮222~~</li>");
  11. // 3. html字符串, 创建dom元素
  12. $("<li>大家早晨好呀~~</li>").appendTo($(".item5"));
  13. // 4. $(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它
  14. $(() => {
  15. $("<li>大家都吃完了吗?~~4. $(callback回调函数)样式~~</li>").appendTo($(".item4"));
  16. });

示例代码截图

" class="reference-link">

2、课堂上提及的所有getter/setter方法

  1. // 1. attr():获取/设置元素属性
  2. // attr(name):getter
  3. // attr(name,value): setter
  4. // 获取,修改class属性
  5. console.log($("li.item1").attr("class"));
  6. $("li.item1").attr("class", "class-item1");
  7. console.log($("li:first-of-type").attr("class"));
  8. console.log("----------------------------------------------");
  9. // 通过判断method属性,动态设置请求地址
  10. console.log($("form").attr("action"));
  11. // console.log($("form").attr("method"));
  12. $("form").attr("action", function() {
  13. let method = $(this).attr("method").toUpperCase();
  14. return method === "GET" ? "login.php?id=111" : "login.php";
  15. })
  16. console.log($("form").attr("action"));
  17. console.log("------------------------------------------------");
  18. // 设置CSS样式,和以对象方式一次设置多样CSS样式
  19. $("li.item2").css("color", "red");
  20. $("li.item2").css({
  21. "color": "blue",
  22. "background-color": "lightcyan",
  23. });
  24. // 通过回调,获取判断表单method的值,动态设置CSS样式
  25. $("li.item3").css("background-color", () => {
  26. let method = $("form").attr("method").toUpperCase();
  27. return method === "GET" ? "pink" : "lightblue";
  28. });
  29. // 通过回调,动态随机设置CSS样式
  30. $("li.item5").css("background-color", () => {
  31. const r = Math.floor(Math.random()*256).toString(16);
  32. const g = Math.floor(Math.random()*256).toString(16);
  33. const b = Math.floor(Math.random()*256).toString(16);
  34. // console.log("#"+r+g+b);
  35. return "#"+r+g+b;
  36. });
  37. // 获取input框文本
  38. console.log($('input[name=username]').val());
  39. // 获取单选框的值
  40. console.log($('input:radio:checked').val());
  41. // 获取元素text文本
  42. console.log($("h1").text());
  43. // 获取元素html内容
  44. console.log($("h1").html());

示例代码截图

" class="reference-link">

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议