jQuery

最新推荐文章于 2024-07-12 16:27:40 发布

ᝰꫀꪶꪖρડ꧖ꦿ846

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量77

点赞数

文章标签： jquery servlet 前端

本文链接：https://blog.csdn.net/weixin_61417335/article/details/126331178

版权

一、获取jQuery

二、公式：$(selector).action()

一、获取jQuery

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

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

</body>
</html>

二、公式：$(selector).action()

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

</body>
</html>

三、选择器

<script>
    //原生的js，选择器少，麻烦不好记
    //标签选择器
    document.getElementsByTagName();
    //id选择器
    document.getElementById();
    //类选择器
    document.getElementsByClassName();

    //jQuery选择器,css中的选择器全部都能用
    //标签选择器
    $('p').click()
    //id选择器
    $('#id1').click()
    //类选择器
    $('.class1').click()
</script>

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

四、事件

鼠标事件

mousedown()–>按下

mouseleave()–>离开
mousemove()–>移动
mouseover()–>点击结束

键盘事件
其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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>
    //当网页元素加载完毕之后，响应事件
    $(function (){
        $('#divmove').mousemove(function (e){
            $('#mousemove').text('x:'+e.pageX+'y'+e.pageY)
        })
    });
</script>


</body>
</html>

五、操作DOM

1、节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('123');//设置值，此处设置值为123
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

2、css操作

$('#test-ul li[name=python]').css("color","red");

3、元素的显示和隐藏

本质 display:none;

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">javaScript</li>
    <li name="python">Pathon</li>
</ul>
<script>
    //原来写法  document.getElementById('')
   // $('#test-ul li[name=python]').text();
    $('#test-ul').html();

    $('#test-ul li[name=python]').css("color","red");
</script>
</body>
</html>

4、娱乐测试

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

5、未来ajax( ):

$('#from').ajax()

ᝰꫀꪶꪖρડ꧖ꦿ846

关注

0
点赞
踩
0

收藏

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

文档工具站：http://jquery.cuishifeng.cn/jQuery库，里面存在大量的JavaScript函数。mouseover()–>点击结束。mouseleave()–>离开。本质 display:none;mousedown()–>按下。mousemove()–>移动。
复制链接

扫一扫