jQuery

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

努力终有回报

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

阅读量78

点赞数 3

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45902969/article/details/106121656

版权

JavaScript和jQuery的关系：

jQuery是一个 js框架,封装了js的属性和方法。让用户使用起来更加便利,并且增强了 js的功能.
使用原生 js是要处理很多兼容性的问题(注册事件等)，由jQuery封装了底层，就不用处理兼容性问题。
原生的js的dom和事件绑定和Ajax等操作非常麻烦，jQuery封装以后操作非常方便。
jQuery库：里面存在大量的JavaScript函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    CDN引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
</body>
</html>

jQuery初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    CDN引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <!--
  公式：${selector}.action()
   -->
  <a href="" id="test-jquery">点我哦</a>
<script>
    //以前获取的方式
    document.getElementById('test-jquery')
    // 用jQuery
    $('#test-jquery').click(function () {
     alert('hello,jquery')
    })
</script>
</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    CDN引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
    //标签
    document.getElementsByTagName();
    //id选择器
    document.getElementById();
    //类选择器、
    document.getElementsByClassName();

     //jQuery
    $('p').click() ;//标签选择器
    $('#id1').click() ;//id选择器
    $('.class1').click(); //class选择器




</script>
</body>
</html>

文档工具站：http://jquery.cuishifeng.cn/index.html

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    CDN引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        #divMove {
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    // 当网页元素加载完毕后，响应元素
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x' + e.pageX + 'y' + e.pageY)  //获取x和y轴
        })
    })
</script>
</body>
</html>

操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    CDN引入-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="ph">Python</li>
    <li id="java">Java</li>
</ul>
<script>
     // document.getElementById('');

    $('#test-ul li[name=ph]').text();  //获得值
    $('#test-ul li[name=ph]').text('设置值');  //设置值
     $('#test-ul').html(); //获得值
   $('#test-ul').html(<li id=\"java\">Java</li>);  //设置值

</script>
</body>
</html>

css操作：

 $('#test-ul li[name=ph]').css({ "color": "#ff0011", "background": "blue" });

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

$('#test-ul li[name=ph]').show();  //显示
$('#test-ul li[name=ph]').hide();  //隐藏

娱乐测试：

$(window).width()  //宽度
1280
$(window).height()  //高度
233

努力终有回报

关注

3
点赞
踩
1

收藏

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

JavaScript和jQuery的关系：jQuery是一个 js框架,封装了js的属性和方法。让用户使用起来更加便利,并且增强了 js的功能.使用原生 js是要处理很多兼容性的问题(注册事件等)，由jQuery封装了底层，就不用处理兼容性问题。原生的js的dom和事件绑定和Ajax等操作非常麻烦，jQuery封装以后操作非常方便。jQuery库：里面存在大量的JavaScript函数获取jQuery<!DOCTYPE html><html lang
复制链接

扫一扫

jQuery

“相关推荐”对你有帮助么？