jQuery

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

m0_64100645

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

阅读量155

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_64100645/article/details/126303411

版权

一.

JavaScript

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

1.1 获取jQuery

<!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>
<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('id');
    //选择器就是CSS的选择器
    $('#test-jquery').click(function(){
    alert("hello jquery");})
</script>
</body>
</html>

1.2 选择器

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

1.3 事件

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

<!--获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    $(function(){
      $('#divMove').mousemove(function(e){
        $('#mousemove').text('x:'+e.pageX+'y:'+e.pageY)
     })
    });
</script>

1.4 操作DOM

1.4.1节点文本操作

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

1.4.2 CSS的操作

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

1.4.3 元素的显示和隐藏本质 hidden:none;

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

1.4.4 娱乐测试

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