jQuery - jQuery $()和 常见方法

加载本地的jQuery文件适合开发和测试时使用

<script src="js/jquery.min.js"></script>

下面的方式适合商业项目通过CDN服务器来加速获取jQuery的js文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

根据样式表选择器获取元素，获取到的不是原生的js对象

而是经过jQuery封装过后的对象（有更多的方法方便操作）

$('#hide').on('click', function(){
        // 根据样式表选择器获取元素，获取到的不是原生的js对象 
        // 而是经过jQuery封装过后的对象（有更多的方法方便操作）
        $('#data').fadeOut(1000);
});

fadeOut(时间)：淡出效果
fadeIn(时间):淡入效果

$('#pretty').on('click', function(){
        //除第一列以外的奇数列
        $('#data tr:gt(0):odd').css({
            'background-color': '#00FFFF',
            'font-size': '20px',
        });
        //除第一列以外的偶数列
        $('#data tr:gt(0):even').css('background-color', '#ccc');
});

$( )的四种用法：

$函数的第一种用法：

$函数的参数是另一个函数
传入的函数是页面加载完成之后要执行的回调函数

$(function(){});

$函数的第二种用法：

参数是一个选择器字符串
获取元素并得到与之对应的jQuery对象（伪数组）

$('#fruits a').on('click', removeItem);

$函数的第三种用法：

参数是一个标签字符串
创建新元素并的得到与之对应的jQuery对象
text()添加文本
append()添加子节点

$('<li>').text(fruitName).append()

阻止默认事件

evt.preventDefault();

$函数的第四种用法：

参数是原生JavaScript对象
将原生的JS对象包装成对应的jQuery对象

$(evt.target).parent().remove();

完整实例

<script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            function removeItem(evt){
                evt.preventDefault();
                // $函数的第四种用法：参数是原生JavaScript对象
                // 将原生的JS对象包装成对应的jQuery对象
                $(evt.target).parent().remove();
            }
            // $函数的第一种用法：$函数的参数是另一个函数
            // 传入的函数是页面加载完成之后要执行的回调函数
            $(function(){
                // $函数的第二种用法：参数是一个选择器字符串
                // 获取元素并得到与之对应的jQuery对象（伪数组）
                $('#fruits a').on('click', removeItem);
                $('#ok').on('click', function(){
                    var fruitName = $("#name").val().trim();
                    if(fruitName.length > 0){
                        $('#fruits').append(
                            // $函数的第三种用法：参数是一个标签字符串
                            // 创建新元素并的得到与之对应的jQuery对象
                            $('<li>').text(fruitName).append(
                                $('<a>').attr('href', '').text('×').on('click', removeItem)
                            )
                        );
                    }
                    // 对jQuery对象通过下标运算或调用get()方法会得到原生的JS对象
                    $('#name').val('').get(0).focus();
                });
            });
        </script>