JS-jQuery

时间：2021-06-02 14:55:16 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：事件 atom containe lin height var script 公式 tom

jQuery

获取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>

选择器

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

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

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

事件

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

<!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都是默认的 所以可以缩写

操作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

标签：事件 atom containe lin height var script 公式 tom

原文地址：https://www.cnblogs.com/Share-my-life/p/14823769.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行