JavaScript：JQuery

已工作的小白

已于 2022-05-01 17:28:00 修改

阅读量769

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-04-26 11:28:53 首次发布

本文链接：https://blog.csdn.net/code34/article/details/124421480

版权

JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

1.获取JQuery
2.选择器
3.事件
4.操作DOM
5.小技巧

1.获取JQuery

javaScript和jQuery的关系？

jQuery库，里面存在大量的JavaScript函数
公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入在线Jquery-->
<!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
<!--    导入本地JQuery-->
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="id">点我</a>
<script>
    $('#id').click(function (){
        alert('hello world');
    });
</script>
</body>
</html>

2.选择器

//原生js，选择器少，麻烦不好记
 //标签
 document.getElementByTagName();
 //id
 document.getElementById();
 //class
 document.getElementByClassName();
 
 //jQuery css中的选择器它全部都能用！
 $('p').click();//标签选择器
 $('#id1').click();//id选择器
 $('.class1').click;//class选择器

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

3.事件

鼠标事件、键盘事件，其他事件
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入本地JQuery-->
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 300px;
            border: lime solid 2px;
        }
    </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>

展示：
在这里插入图片描述

4.操作DOM

节点文本操作

 $('#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

 $('#test-ul li[name=python]').show();
 $('#test-ul li[name=python]').hide();

娱乐测试

 $(window).width()
 $(window).height()
 $('#test-ul li[name=python]').toggle();

未来ajax()；

 $('#form').ajax()
 $.ajax({url:"test.html",context:document.body,success:function(){
     $(this).addClass("done");
 }})

5.小技巧

1、如何巩固JS（看jQuery源码，看游戏源码！

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

已工作的小白

关注

1
点赞
踩
0

收藏

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

文章目录1.获取jQuery2.选择器3.事件4.操作DOM5.小技巧1.获取jQueryjavaScript和jQuery的关系？jQuery库，里面存在大量的JavaScript函数公式：$(selector).action()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!--
复制链接

扫一扫

专栏目录