JavaScript-jQuery

最新推荐文章于 2024-03-29 16:23:09 发布

小墨Sang

最新推荐文章于 2024-03-29 16:23:09 发布

阅读量185

点赞数

分类专栏： JavaScript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/xmosang/article/details/122707561

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery实质上是一个库，里面存放了大量的JS函数

10.1、获取jQuery

官网：jQuery官网

jQuery中文文档：jQuery中文文档

导入方式

本地jquery导入

<script src="JS/jquery-3.6.0.js"></script>

在线cdn导入

cdn jQuery：cdn

点击复制script标签，粘贴后下载即可

10.2、使用

公式：$(selector).action()

selector：css选择器
action：事件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body>
<a href="" id="test">点击</a>
</body>
<script>
    $('#test').click(function (){
        alert('111')
    })
</script>

10.3、选择器

对比：

JS获取网页元素：选择器类型较少

//标签选择器
document.getElementsByTagName();
//类选择器
document.getElementsByClassName();
//id选择器
document.getElementById();

jQuery获取：css中的选择器都可以使用

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

10.3、事件

鼠标事件

在这里插入图片描述

<body>
<div id="div1" style="width: 600px; height: 400px; background-color: green; border: 2px solid black" ></div>
当前鼠标位置：<p id="location"></p>
</body>
<script>
    //当网页元素加载完后，执行事件
    // $(document).ready(function (){
    //     ...
    // })
    //简化：
    //网页元素加载完毕时执行function
    $(function (){
        //获取到div1对象，当鼠标移动时执行function
        $('#div1').mousemove(function (e){
            //将坐标显示在location对象内
            $('#location').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })
</script>

<body>
<div id="div1" style="width: 600px; height: 400px; background-color: green; border: 2px solid black" ></div>
当前鼠标位置：<p id="location"></p>
</body>
<script>
    //当网页元素加载完后，执行事件
    // $(document).ready(function (){
    //     ...
    // })
    //简化：
    //网页元素加载完毕时执行function
    $(function (){
        //获取到div1对象，当鼠标移动时执行function
        $('#div1').mousemove(function (e){
            //将坐标显示在location对象内
            $('#location').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })
</script>

在这里插入图片描述

10.4、操作DOM对象

文本操作

<body>
<ll id="ll">
    <li id="java" name="java">java</li>
    <li id="python" name="python">python</li>
</ll>
</body>
<script>
    //可以用[]来指定同一标签下的某个元素
    $('#ll li[id=java]').text();//获取元素的取值
    $('#ll li[name=java]').text('123');//更改元素的取值
    $('#ll li[id=java]').html();//获取元素的超文本值
</script>

css操作

style样式修改

$('#ll li[name=java]').css("color","red")
$('#ll li[name=java]').css({"color":"red","font-size":"20px"})

显示与隐藏

$('#ll li[name=java]').show();//显示
$('#ll li[name=java]').hide()//隐藏

小墨Sang

关注

0
点赞
踩
0

收藏

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

jQuery实质上是一个库，里面存放了大量的JS函数10.1、获取jQuery官网：jQuery官网jQuery中文文档：jQuery中文文档导入方式本地jquery导入<script src="JS/jquery-3.6.0.js"></script>在线cdn导入cdn jQuery：cdn点击复制script标签，粘贴后下载即可10.2、使用公式：$(selector).action()selector：css选择器action：事件
复制链接

扫一扫