JS-jQuery

Posted Si人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-jQuery相关的知识，希望对你有一定的参考价值。

jQuery

  1. 获取jQuery

公式：$(selector).action() jQuery（选择器）.事件（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 导入在线cdn
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
-->
​
  <script src="lib/jquery-3.6.0.js">
    $(\'#text_jquery\').click(function(){
        alert(\'试试就试试\');
        });
  </script>
​
</head>
<body>
<div>
  <a href="#" id="text_jquery">点我一下试试</a>
​
</div>
​
</body>
</html>

 

  1. 选择器

（选择器），这里的选择就是css中的选择器

<script>
    //原生js选择器，种类少
    //标签
    doucument.getElementsByTagName();
    //id
    doucument.getElementById();
    //类
    doucument.getElementsByClassName();
    
    //jQuery中的选择器 （css）
    $(\'a\').click();
    $(\'#id\').click();
    $(\'.class\').click();
</script>

文档工具站：https://jquery.cuishifeng.cn/,s 使用很频繁

  1. 事件

目前电脑上的事件主要分为鼠标事件、键盘事件、其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 导入在线cdn
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
-->
<!--要求：获取鼠标当前的位置坐标-->
    <style>
        #move{
            width:1000px;
            height:1000px;
            border:1px solid pink;
        }
    </style>
  <script src="lib/jquery-3.6.0.js">
      //当网页加载完之后，再相应事件
    $(function(){
        $(\'#move\').mousemove(function (e){
            $(\'#mouseMove\').text(\'x:\'+e.pageX + \'y:\'+e.pageY);
        })
    });
  </script>
​
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="move">
  <span>
      捕捉范围
  </span>
​
</div>
​
</body>
</html>
$(function(){};
  //上面是缩写完整版如下
$(document).ready(function(){
    
});
//因为document和ready都是默认的 所以可以缩写

 

  1. 操作DOM

<div>
    <ul id="test_ul"></ul>
    <li class="js">javascript</li>
    <li name="python">Python</li>
</div>
​

节点文本操作

//括号内不写任何东西就是获取值，写引号加数值就是设置修改值
$(\'#test_ul li[name=python]\').text();
$(\'#test_ul li[name=python]\').text(\'***\');
$(\'#test_ul \').html();
$(\'#test_ul \').html(\'<strong>***</strong>\');

css操作

$(\'#test_ul li[name=python]\').css("color","red");

元素的显示和隐藏:本质是display:none;

$(\'#test_ul li[name=python]\').show()\'\'
$(\'#test_ul li[name=python]\').hide;

 

以后的重点是Ajax

以上是关于JS-jQuery的主要内容，如果未能解决你的问题，请参考以下文章

JS-jQuery

js-jquery-二维码

js-jquery-将table的td转化成可编辑的文本

js-jQuery对象与dom对象相互转换

微信小程序代码片段

VSCode自定义代码片段——CSS选择器