对于jQuery简单的认识

jQuery具体可以干什么

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

如何获取jQuery

下载法

百度jQuery官网进行相应版本下载，或者前往https://code.jquery.com/jquery-3.6.0.js复制代码保存文件。

cdn加速法

百度搜索jQuery即可找到相关网站，复制网站提供的js链接，如

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

npm法

在cmd中使用 npm i jquery的方法下载文件，记得要npm init -y 初始化文本

如何使用jquery

选择器

部分常用选择器：

#idid选择器，$("#id"); 选择指定id标签
.class 类名选择器，$(".class");选择指定类名标签
element 标签选择器，$("element");选择指定标签，是集合
* 通配符选择器，$("*");匹配所有元素
selector1，selector2，selector3 并集选择器，$("selector1，selector2，selector3");匹配所有指定元素
  子代选择器，$("parent>child")；匹配指定父元素下的所有指定子元素
parent child 后代选择器，$("parent child")；匹配指定父元素下的所有指定后代元素
prev+next 相邻兄弟选择器，$("prev+next")；匹配指定兄元素下第一个弟元素
prev~next 兄弟选择器，$("prev next")；匹配指定兄元素下后面所有弟元素

还有其他选择器如

:first，:odd，:even 等

可以自行前往:not(selector) | jQuery API 3.2 中文文档 | jQuery API 在线手册 (cuishifeng.cn)网站搜索学习

部分操作代码如下所示

​
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
  <div id="div1">click me</div>
  <ul>
    <li class="liC">1</li>
    <li class="liC">2</li>
    <li>3</li>
    <li class="liC">4</li>
    <li>5</li>
    <li>6</li>
    <li class="liC">7</li>
    <li class="liC">8</li>
  </ul>
<ul></ul>
  <input type="text">
  <input type="password">
</body>
</html>
<script>
  const div1=document.getElementById('div1')//js获取dom
 // $('#div1')//jquery获取dom
  
  // js dom和jq dom可以相互转换
  console.log($(div1))//js dom ==>jq dom
  console.log($('#div1')[0])//jq dom==>js dom id选择器
  
  console.log($('.liC'))//类名选择器
  console.log($('ul'))//标签选择器
  console.log($('ul>li'))//子代选择器
  console.log($('ul,div'))//并集选择器
  console.log($('#div1+ul'))//相邻兄弟选择器
  console.log($('#div1~ul'))//兄弟选择器
 
  
</script>

 

 

 

posted @ 2021-12-09 10:59  小岳的库  阅读(66)  评论(0)    收藏  举报