JS——jQuery

文章目录

  • 1、初始jQuery和公式
  • 2、jQuery选择器
  • 3、jQuery事件
  • 4、jQuery操作DOM
  • 5、帮助文档及cdn

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>

JS——jQuery_第1张图片

4、jQuery操作DOM

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

5、帮助文档及cdn

  • 文档工具站: jQuery中文API
  • 获取jQuery: 在线jQuery cdn加速

你可能感兴趣的:(JavaScript,javascript,jquery,前端)