JavaScript jQuery

公式
选择器
事件
操作 DOM元素

JavaScript个人整理

公式

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


<script>
   // 选择器就是css的选择器
   $('#test-jquey').click(function()
        alert('我叫史迪奇')
   )
</script>

选择器

<script>
//原生js的css选择器
    // 标签选择器
    document.getElementsByTagName();
    // id选择器
    document.getElementsById();
    // 类 class选择器
    document.getElementsByClassName();
    
// jQuery的css选择器
    // 标签选择器
    $('p').click()
    // id选择器
    $('#id3').click()
    // 类 class选择器
    $('.class3').click()
</script>

事件

鼠标事件
+ mousedown()按下
+ mouseenter()当鼠标指针穿过元素时
+ mouseleave()离开
+ mousemove()移动
+ mouseout()当鼠标指针从元素上移开时
+ mouseover()点击结束
+ mouseup()元素上放松鼠标按钮

<head>
    <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 blue;
        }
    </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>

定位板 mouse:

在这里移动鼠标

操作 DOM元素

节点文本操作

<head>
    <title>节点文本操作</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <ul id="Syp">实验品
        <li name="Stitch">史迪奇</li>
        <li name="Reuben">鲁本</li>
        <li name="Angel">安琪</li>
    </ul>
    <script>
        $('#Syp li[name=Stitch]').text()
        $('#Syp').html
    </script>
</body>

浏览器输入来实现效果

// 获得值
$('#Syp li[name=Stitch]').text()
// 设置值
$('#Syp li[name=Stitch]').text("我叫史迪奇")
// 获得值
$('#Syp').html()
// 设置值
$('#Syp').html("<strong>我叫史迪奇</strong>")

css的操作

浏览器输入来实现效果

$('#Syp li[name=Stitch]').css({"color":"blue"})

元素的显示与隐藏

浏览器输入来实现效果

// 本质 display: none;
    // 显示
    $('#Syp li[name=Stitch]').show()
    // 隐藏
    $('#Syp li[name=Stitch]').hide()

window操作

浏览器输入来实现效果

// 查看窗口宽度
$(window).width()
// 查看窗口高度
$(window).height()
// 切换显示与隐藏
$('#Syp li[name=Stitch]').toggle();

ajax操作

浏览器输入来实现效果

$("#Syp").ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

以下为实验对象

节点文本操作

史迪奇
鲁本
安琪

作者: 我叫史迪奇
本文来自于: https://sdq3.link/JavaScript-jQuery.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议