jQuery

2022-07-08 00:34:05 阅读：137 来源： 互联网

jQuery

JavaScript jQuery库，里面存在大量的JavaScript函数

获取jQuery

<script>
  //原生js，选择器少，麻烦不好记
  //标签
  document.getElementsByTagName();
  //id
  document.getElementById();
  //类
  document.getElementsByClassName();

  //jQuery css中的选择器它全部都能用
  $('p').click();//标签选择器
  $('#id').click();//id选择器
  $('.class').click();//class选择器
</script>

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件、键盘事件、其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width: 500px;
            height:500px;
            border: 1px solid sandybrown;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    // $(document).ready(function (){});下面是简写
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        });
    });
</script>
</body>
</html>

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css的操作

$('#test-ul li[name=python]').css('color','red');

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

$(window).width();
$(window).height();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
    <li id="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
// $('#test-ul li[name=python]').text('123');
</script>
</body>
</html>

小技巧

1、如何巩固js(看jQuery源码，看游戏源码！)

2、巩固HTML、CSS(扒网站，全部down下来，然后对应修改看效果~)

标签：jQuery,text,li,ul,test,选择器
来源： https://www.cnblogs.com/1982king/p/16456710.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery

jQuery