jQuery进阶

最新推荐文章于 2024-09-13 10:46:15 发布

-wellplayed-

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量247

点赞数 5

分类专栏：前端文章标签： jquery 前端 javascript python 开发语言

本文链接：https://blog.csdn.net/m0_71115526/article/details/134245980

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

十三. jq书写代码的3种位置

"""js中等待页面加载完毕"""
# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

十四. 动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #d1 {
            height: 1000px;
            width: 400px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div id="d1"></div>

<script>
    /*
    .hide(msec)             // 隐藏
    .show(msec)             // 显示
    .slideUp(msec)          // 向上卷起
    .slideDown(msec)        // 向下展开
    .fadeOut(msec)          // 淡出
    .fadeIn(msec)           // 淡入
    .fadeTo(msec, opacity)  // 透明度渐变 更改透明度值来产生淡入或者淡出效果
    */
    /*
    $('#d1').hide(5000);
    $('#d1').show(5000);
    $('#d1').slideUp(5000);
    $('#d1').slideDown(5000);
    $('#d1').fadeOut(5000);
    $('#d1').fadeIn(5000);
    $('#d1').fadeTo(5000, 0.5);
    */
</script>
</body>
</html>

十五. jq实现类始于js中数组对象方法.forEach()或者.map()的.each方法: 2种.each方法实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="d1" username="jason">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

<script>
    /*
    $('div').each(function (index, obj) {});
    $.each($('li'), function (index, obj) {});
    */

    // 第一种写法:
    $('div').each(function (index) {  // 指定一个参数返回索引
        console.log(index);
    });

    $(['aaa', 'bbb', 'ccc']).each(function (index, obj) {  // 也可以指定2个参数, 第二个参数返回遍历对象的索引对应的值.
        console.log(index, obj);
    });

    // 第二种写法:
    $.each($('div'), function (index, obj) {
        console.log(index, obj);  // obj返回了标签对象
    });
</script>
</body>
</html>

十六. jq实现隐藏的标签属性

/*
$('div').data('info', 'value');
$('div').first().data('info');
$('div').last().removeData('info')
*/

$('div').data('info', '回来吧，我原谅你了!');  // 设置让标签帮我们存储数据 并且用户肉眼看不见
$('div').first().data('info');      // 查看
$('div').last().data('info');
$('div').last().removeData('info')  // 移除
$('div').last().data('info');

总结

# jq书写代码的3种位置:
    第一二重: head中, 需要预加载
        $(document).ready(function () {})
        $(function () {})

    第三种: body底部可以直接书写

# 动画效果:  最后display会等于none
    隐藏: jq对象.hide(mesc)
    展现: jq对象.show(mesc)
    上卷: jq对象.slideUp(mesc)
    下展: jq对象.slideDown(mesc)
    淡出: jq对象.fadeIn(mesc)
    淡入: jq对象.fadeOut(mesc)
    透明度渐变: jq对象.fadeTo(mesc, opacity)

# jq实现类始于js中数组对象方法.forEach()或者.map()的.each方法:  2种.each方法实现方式
    第一种:
        $('div').each(function (index, obj) {})
        $([1, 2, 3]).each(function (index, obj) {})
    第二种:
        $.($('div'), function (index, obj) {})
        $.([1, 2, 3], function (index, obj) {})
    提示: 2者对任意类型的对象, 都可以进行遍历, 使用each就替代掉了for循环遍历取值
    参数: index表示获取到的标签对象obj索引位置. obj就是索引对象. 其中index,和obj参数都是可选的.

# jq实现隐藏的标签属性:
    设置: .data(attrName, attrValue)
    获取: .data(attrName)
    删除: .removeData(attrName)

十七. js里定义的$ 和jquery的$冲突解决

// 1. 解决多个库变量名冲突的方法: 将jQuery的$变量控制权交给index.js
jQuery.noConflict(); // Conflict,中文:冲突,读音:[/ˈkɒnflɪkt/]
console.log($);

// 2. JQuery使用自制性函数: 将jQuery对象当作形参赋值给$符
(function($) {
	$(document).ready(function() {
		console.log($);
		// 使用id选择器: 使用jquery下的css方法,为box文本设置红色字体
		$('#box').css('color','red');
	});
})(jQuery);