jQuery

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

一什么欧

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

阅读量56

点赞数

本文链接：https://blog.csdn.net/weixin_44199948/article/details/118708754

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery

获取jQuery

<!--  CDN引入-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

jQuery公式

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

选择器

//原生JS
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery
$('p').click();
$('#id').click();
$('.class').click();

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

事件

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

简写

$(document).ready(function (){
})
// 简写
$(function (){  
})

鼠标点击事件

  <style>
    #divMove{
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
    .text{
      margin: 0 auto;
    }
    body{
      text-align: center;
    }
  </style>
</head>
<body>
<!--  获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove" class="text"></span>
<div id="divMove" class="text">
在这里移动鼠标试试
</div>
<script>
<!-- 当网页元素加载完毕之后，响应事件-->
// 简写
$(function (){
 $('#divMove').mousemove(function (e){
   $('#mouseMove').text(('x:'+e.pageX+'y:'+e.pageY));
 })
})
</script>
</body>

操作Dom元素

文本操作

//获得值
$('#test-01 li[name="py"]').text()
//设置值
 $('#test-01 li[name="py"]').text('hello')
 //获得值
 $('#test-01').html()
 //设置值
 $('#test-01').html('<strong>hello</strong>')

CSS操作

$('#test-01').css('color','red');
$('#test-01 li[name="py"]').css({'color':'red','fontSize':'200px'});

元素的显示和隐藏：本质就是display：none

$('#test-01').hide()
jQuery.fn.init [ul#test-01]
$('#test-01').show()
jQuery.fn.init [ul#test-01]
//显示隐藏切换
$('#test-01').toggle()

一什么欧

关注

0
点赞
踩
0

收藏

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

jQuery获取jQuery <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>jQuery公式<a href="#" id="test-jquery">点我</a><script> document.getElementBy
复制链接

扫一扫

专栏目录