1、初始jQuery和公式

jQuery库： 里面存在大量的JavaScript函数
获取jQuery： 在线jQuery cdn加速

公式： $(selector).action()

<!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>
        <a href="" id="text-jquery">点我</a>
    </body>
    <script>
        $('#text-jquery').click(
            function (){
                alert('HelloWord');
            }
        )
    </script>
</html>

2、jQuery选择器

css选择器在jQuery中均可使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>


        <script>
            //标签选择器
            $("p").click();
            //id
            $('#div1').click();
            //类
            $('.p1').click();
        </script>
    </body>
</html>

文档工具站： jQuery中文API

3、jQuery事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-2.1.1.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>

在这里插入图片描述

4、jQuery操作DOM

节点文本操作：
1. 获得值： $('#test-ul li[name=python]').text();
2. 设置值： $('#test-ul li[name=python]').text('设置值');
3. 获得值： $('#test-ul li[name=python]').html();
4. 设置值： $('#test-ul li[name=python]').html('设置值');
CSS的操作： $('#test-ul li[name=python]').css("color","red");