jQuery_02

DOM操作

// 外部之前
$('#d').before('<span style="color:red">Before</span>');

// 外部之后
$('#d').after('<span style="color:red">After</span>');

// 内部之前
$('#d').prepend('<span style="color:blue">Prepend</span><br>');

// 内部之后
$('#d').append('<span style="color:blue">Append</span><br>');

// 外部周围
$('#d').wrap('<div style="border: 5px solid red"></div>');

// 内部周围
$('#d').wrapInner('<div style="border: 5px solid green"></div>');

// 删除节点(节点+内容)
$('#d1').remove();

// 清空节点(内容)
$('#d2').empty();

// 删除父节点
$('p').unwrap();

// 节点替换
$('p').replaceWith('<h3>标题3</h3>');

杂项方法

// 声明字符串
var str = '     helloworld   ';
console.log(str);
console.log($.trim(str));
console.log($.type(str)); // string

var cars = ['奔奔', '红旗', '50宏光'];
console.log($.type(cars));
console.log(cars);

// 遍历数组
$.each(cars, function(i, v){
    console.log("索引:"+i+" 值:"+v);
});

var person = {
    username: "小新",
    age: "18",
    skill: "PHP"
};
// 遍历对象
$.each(person, function(label, value){
    console.log('属性名: '+label+'属性值: '+value);
});

// 遍历选择器选中的结果集
$('ul').children().each(function(i,v){
    // console.log(i+": "+v);
    // 获取当前节点 $(this)

    // 获取当前节点的索引
    console.log($(this).index());

    // 获取当前节点的内容
    console.log($(this).text());
});

事件绑定

绑定多个事件

$('button').bind('click mouseout', function(){
    $('#d').text('试试就试试');
});

鼠标悬浮态

$('#d').hover(function(){
    // 鼠标滑过
    $(this).text('我进来了');
}, function(){
    // 鼠标离开
    $(this).text('我离开了');
});

隐藏与显示

// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
    $('#d').hide(20000, function(){
        alert('我藏起来了');
    });
});

// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
    $('#d').show(20000);
});

// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
    $('#d').toggle(1000);
});

滑动收起

// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
    $('#d').slideUp(10000, function(){
        // alert('我藏起来了');
    });
});

// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
    $('#d').slideDown(10000);
});

// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
    $('#d').slideToggle(1000);
});

渐变

// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
    $('#d').fadeOut(10000, function(){
        // alert('我藏起来了');
    });
});

// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
    $('#d').fadeIn(10000);
});

// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
    $('#d').fadeToggle(1000);
});
});

自定义动画

// 自定义动画
$('button').click(function(){
    $('#d').animate(
        {
            left: '100px',
            top: '50px',
            width: '200px',
            height: '50px'
        },
        5000,
        function() {
            alert('动画执行完毕');
        }
    );
});

验证码点击更新-原生写法

// 1. 获取验证码对象
var c = document.getElementById('captcha');
// 2. 响应单击事件
c.onclick = function(){
    // 3. 设置src属性
    c.src = "captcha/c.php?rand="+Math.random();
}

验证码点击更新-jQuery写法

// 单击事件
$('#captcha').click(function(){
    $(this).attr('src', 'captcha/c.php?rand='+Math.random());
});

京东侧边栏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        a {
            color: #EE00EE;
            text-decoration: none;
            padding: 0 20px;
        }
        .nav {
            position: relative;
            width: 100px;
            background-color: #EEE;
        }
        .nav-1 {
            display: block;
            height: 40px;
            line-height: 40px;
        }
        .nav-2 {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            padding: 0;
            margin: 0;
            width: 200px;
            background-color: #DDFFBB;
        }
        li {
            list-style: none;
            float: left;
            line-height: 40px;
        }
    </style>
</head>
<body>

    <div class="nav">
        <a href="#" class="nav-1">北京</a>
        <ul class="nav-2">
            <li><a href="#">重庆</a></li>
            <li><a href="#">河南</a></li>
            <li><a href="#">山东</a></li>
        </ul>
    </div>

    <script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
    <script type="text/javascript">
    // 就绪函数
    $(function(){
        $('.nav-1').hover(function(){
            // 1. 鼠标进入"北京",显示其他省份
            $(this).next().show();
            $(this).css('background-color', '#DDFFBB');
        }, function(){
            // 2. 鼠标离开"北京"
            $(this).next().hover(function(){
                // 2.1 进入了"其他省份"(保持显示)
                $(this).show();
                $(this).prev().css('background-color', '#DDFFBB');
            }, function(){
                // 2.2 离开"其他省份"(隐藏)
                $(this).hide();
                $(this).prev().css('background-color', '#EEE');
            });
            // 2.3 完全离开
            $(this).next().hide();
            $(this).css('background-color', '#EEE');
        });
        
    }); 
    </script>

</body>
</html>

tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab(选项卡)</title>
    <style type="text/css">
        #tabmenu {
            width: 300px;
            height: 30px;
        }
        #tabmenu > h3 {
            width: 96px;
            height: 30px;
            line-height: 30px;
            float: left;
            margin: 0;
            background-color: #DDEEFF;
            border: 2px solid #FFFFFF;
            text-align: center;
        }
        #tabmenu > h3.active {
            background-color: #DDEEAA;
            border: 2px solid #DDEEAA;
        }
        #tabcontent {
            width: 300px;
            height: 200px;
            background-color: #DDEEAA;
        }
        #tabcontent > div {
            display: none;
        }
        #tabcontent > div.active {
            display: block;
        }
    </style>
</head>
<body>

    <h3>选项卡功能</h3>

    <div id="tab">
        <div id="tabmenu">
            <h3 class="active">西游记</h3>
            <h3>水浒传</h3>
            <h3>红楼梦</h3>
        </div>
        <div id="tabcontent">
            <div class="active">悟空,蜘蛛精,金角大王</div>
            <div>潘金莲,武松,大郎</div>
            <div>宝玉,刘姥姥,黛玉</div>
        </div>
    </div>

    <!-- 引入jQuery -->
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">

    // 单击h3(tab菜单)
    $('#tabmenu>h3').click(function(){
        // 获取当前菜单的索引值
        var index = $(this).index();
        // console.log(index);

        // 高亮当前菜单, 回调兄弟菜单
        $(this).addClass('active').siblings().removeClass('active');

        // 高亮当前内容, 隐藏兄弟内容
        // $('#tabcontent>div').eq(index).addClass('active').siblings().removeClass('active');
        $('#tabcontent>div').eq(index).show().siblings().hide();
    });

    </script>
    
</body>
</html>