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

博客列表 > 通过下载并引用jQuery +通过案例对比下`JavaScript` 和 `jQuery`+列出 $() 的参数+列出选择器,并查看效果。

通过下载并引用jQuery +通过案例对比下`JavaScript` 和 `jQuery`+列出 $() 的参数+列出选择器,并查看效果。

麦兜的故事
麦兜的故事 原创
2021年07月20日 16:32:39 467浏览

通过下载并引用jQuery

通过在jQuery的官网下载jQuery的代码,下载到本地,通过引用的方式引入

<script src="../jquery.js"></script>

通过案例对比下JavaScriptjQuery

  1. // 获取标签li
  2. // 通过使用js方式获取
  3. let js = document.querySelectorAll("li");
  4. console.log(js);
  5. // 通过使用jq方式获取
  6. let jq = $("li");
  7. console.log(jq);
  1. // 通过class 获取标签ul
  2. // 通过使用js方式获取
  3. let js = document.querySelector(".nav");
  4. console.log(js);
  5. // 通过使用jq方式获取
  6. let jq = $(".nav");
  7. console.log(jq);

列出 $() 的参数

1:选择器
  1. $(".item").css("font-size","18px");
2:包装器
  1. $(".item").style.color = "green";
3:设置html文本
  1. $("<p>学习时刻</p>").insertAfter("h2");
4:回调
代码编译从上至下,如果有些html代码在jq下方,就需要用到回调
  1. $(()=>{
  2. $("h2").css("color","green");
  3. })
1:选择器

列出选择器

  1. // id选择器
  2. $("#list").css("color","#ff6700");
  3. // class选择器
  4. $(".item").css("font-size","18px");
  5. // 标签选择器
  6. $("li").css("background-color","#ccc");
  7. // 混合选择器
  8. $("#list li").css("font-weight","1000");
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议