jQuery

2020-03-21

字数统计: 527字 | 阅读时长≈ 2分钟

jQuery

1. 简介

jQuery和JavaScrip关系：

jQuery库，里面存在大量的JavaScript的函数
查询jQuery工具网站：http://jquery.cuishifeng.cn/

获取jQuery

https://jquery.com/

另外一种：

通过CDN引入jQuery的几种方式

http://www.jq22.com/cdn/

1 2	//百度cdn <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2. 使用

2.1 简单使用

公式： ${selector}.action()

<body>

<!--
公式 ： ${selector}.action()
-->

<a href="" id="test-jquery">点我</a>

<script>
    //选择器就是css的选择器
    $("#test-jquery").click(function () {
        alert("hellojQuery");
    })
</script>

</body>

2.2 选择器

js原生选择器

<script>
    //标签
    document.getElementById()
    //id
    document.getElementsByTagName()
    //类
    document.getElementsByClassName()
</script>

jQuery

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

2.3 事件

鼠标事件
触屏事件
键盘事件

以下以鼠标移动时间为例

<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>

2.4 操作DOM

jQuery获得值

<body>

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>


<script>
    $("#test-ul li[name=python]").text();
    $("#test-ul").html();
</script>
</body>

jQuery设置值

1 2	$("#test-ul li[name=python]").text("123"); //设置值 $("#test-ul").html("<strong>123</strong>"); //设置值

css操作

1
2
3

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

元素的显示和消失：本质display=none;

1 2	$("#test-ul li[name=python]").show() $("#test-ul li[name=python]").hide()

3. 小技巧

如果巩固js(看jQuery源码)
看游戏源码
巩固html 和 css(扒网站)
UI学习

LayUI
Elment-UI

打赏

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！