JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

BenBuYi

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/weixin_48295367/article/details/108804690

版权

jQuery

jQuery库：一个封装了大量JavaScript函数方法的库

中文文档：https://jquery.cuishifeng.cn/

获取jQuery

CND引入

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

源文件引入

<script src="lib/jquery-3.5.1.js"></script>

公式

$(slector).action()

实例

<!--
$(slector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,world');
    })
</script>

jQuery与JavaScript的区别

选择器

<script>

    //原生js，选择器少，不容易记忆
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery css中的选择题他都可以用
    $('p').click() //标签选择器
    $('#id1').click() //id选择器
    $('.class1').click() //class选择器

</script>

事件

鼠标事件

键盘事件

其他事件（陀螺仪，触屏）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: red 1px solid;
        }
    </style>
</head>
<body>

<!--
$(slector).action()
-->
<!--获取鼠标当前坐标-->
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>

操作DOM

节点文本操作

$('#test_ul li[name=python]').text(); //获取值
$('#test_ul li[name=python]').text('C++');//修改值
$('#test_ul').html(); //获取值
$('#test_ul').html('<strong>123</strong>'); //修改值

CSS操作

$('#test_ul li[name=python]').css({'color': 'blue',"background": "blue" });

元素的显示与隐藏 display

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

娱乐内容

$(document).width()
$(window).height()

BenBuYi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

jQueryjQuery库：一个封装了大量JavaScript函数方法的库中文文档：https://jquery.cuishifeng.cn/获取jQueryCND引入<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>源文件引入<script src="lib/jquery-3.5.1.js"></script>公式$(slector).acti
复制链接

扫一扫