javaScript和jQuery的关系?
jQuery库,里面存在大量的JavaScript函数
公式:$(selector).action()
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
    </head>
    <body>
        <a href="" id = "test-jquery">点我</a>
        <script>
            //选择器就是css选择器
            $(‘#test-jquery‘).click(function(){
                alert(‘hello,jQuery!‘);
            });
        </script>
    </body>
</html>
//原生js,选择器少,麻烦不好记 //标签 document.getElementByTagName(); //id document.getElementById(); //class document.getElementByClassName(); //jQuery css中的选择器它全部都能用! $(‘p‘).click();//标签选择器 $(‘#id1‘).click();//id选择器 $(‘.class1‘).click;//class选择器
文档工具站:http://jquery.cuishifeng.cn/
鼠标事件、键盘事件,其他事件
mousedown()(jQuery)----按下 mouseenter()(jQuery) mouseleave()(jQuery) mousemove()(jQuery)----移动 mouseout()(jQuery) mouseover()(jQuery) mouseup()(jQuery)
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.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>
            //当网页元素加载完毕之后,响应事件
            //$(document).ready(function(){})
            $(function(){
                $(‘#divMove‘).mousemove(function(e){
                    $(‘#mouseMove‘).text(‘x:‘+e.pageX+"y:"+e.pageY)
                })
            });
        </script>
    </body>
</html>
节点文本操作
$(‘#test-ul li[name=python]‘).text();//获得值 $(‘#test-ul li[name=python]‘).text(‘设置值‘);//设置值 $(‘#test-ul‘).html();//获得值 $(‘#test-ul‘).html(‘<strong>123</strong>‘);//设置值
CSS的操作
$(‘#test-ul li[name=python]‘).css({"color","red"});
元素的显示和隐藏,:本质display:none
$(‘#test-ul li[name=python]‘).show();
$(‘#test-ul li[name=python]‘).hide();
娱乐测试
$(window).width()
$(window).height()
$(‘#test-ul li[name=python]‘).toggle();
未来ajax();
$(‘#form‘).ajax() $.ajax({url:"test.html",context:document.body,success:function(){ $(this).addClass("done"); }})
1、如何巩固JS(看jQuery源码,看游戏源码!)
2、巩固HTML、CSS(扒网站,全部down下来,然后对应修改看效果~)
原文:https://www.cnblogs.com/qiu-hua/p/13022216.html