jQuery选择器、事件、DOM节点和CSS操作

最新推荐文章于 2024-11-11 23:45:17 发布

q1575290554

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量113

点赞数

分类专栏：前端 # JavaScript 文章标签： jQuery JavaScript DOM操作事件处理 CSS选择器

本文链接：https://blog.csdn.net/Q1575290554/article/details/125497191

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

javaScript和jQuery的关系？

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

获取jQuery

在这里插入图片描述

公式：$(selector).action()

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src=""lib/jquery-3.4.1.js""></script>
    </head>
    <body>
        <a href="" id = "test-jquery">点我</a>
        <script>
        	//选择器就是css选择器
            $('#test-jquery').click(function(){
                alert('hello,jQuery!');
            });
        </script>
    </body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

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

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

事件

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

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
1234567
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
        <style>
            #divMove{
                width:500px;
                height:500px;
                border:1px solid red;
            }
        </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>

操作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();

q1575290554

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录