2022-09-03 15:11 福州理工学院 Web前端发布于福建

关注

JS基础第四课、JQ基础第一课（BOM、JQuery框架）

注意：
使用JQuery一定要记得引入，否则会$报错

回忆：
outline: none; //去掉输入框默认的边框
decodeURI(arr[1]) //解码中文
str.split('&')

BOM

一、location对象：解析URL

1、url：proticol://host:post/pash/pash?query#fragment
（1）proticol：通信协议（http、https）
（2）host：主机域名
（3）post：端口号
（4）path：路径，文件在服务器上的地址
（5）query：参数，一般以键值对的形式提交
（6）fragment：锚点#

2、属性
（1）获取整个url：location.href
（2）获取主机：location.host
（3）获取端口号：location.post
（4）获取路径：location.path
（5）获取参数：location.search
（6）获取片段（锚点）：location.hash

3、（1）获取url参数
①登录框

<body>
    <form action="./try.html">
        <input type="text" name="user">
        <br>
        <input type="password" name="password">
        <br>
        <button>登录</button>
    </form>
</body>

②登录后跳转页面

<h1>欢迎您，xxx</h1>
<script>
	console.log(location.search);
	var str = location.search
	str = str.substr(1)
	var arr = str.split('&')
	arr = arr[0].split('=')
	console.log(arr[1]);
	var h1 = document.querySelector('h1')
	h1.innerHTML = '欢迎您，'+decodeURI(arr[1]) 
</script>

（2）location的方法

①跳转页面：location.assign(href)

②代替页面（没有历史记录）：location.replace()

③重新加载页面（f5）：location.reload()

<body>
<button>点击</button>
<script>
    var btn = document.querySelector('button')
    btn.onclick = function(){
        // location.assign('https://www.baidu.com/')    //跳转页面
        // location.replace('https://www.baidu.com/')   //代替页面
        location.reload('https://www.baidu.com/')   //刷新加载页面
    }
</script>
</body>

二、navigator对象：监听设备对象

<body>
<script>
    console.log(navigator);
    if(/Android|webOS|iPhone|BlackBerry/i.test(navigator.userAgent)){
        console.log('手机');
    }
    else{
        console.log('电脑');
    }
</script>
</body>

三、history对象：与浏览器历史进行交互，修改对象包含用户（在浏览器窗口）访问过的url

1、后退：back()
2、前进：forward()
3、前进和后退：go()
（1）前进一页：go(1)
（2）后退两页：go(-2)
代码例子：三个文件，效果后续发表相关视频给小伙伴看🧐

<body>
<h1>1</h1>
<a href="./try2(1).html">去2</a>
<a href="./try2(2).html">去3</a>
<div>
    <button class="add">前进</button>
    <button class="back">后退</button>
    <button class="go">前进2页</button>
</div>
<script>
    var go = document.querySelector('.go')
    var add = document.querySelector('.add')
    var back = document.querySelector('.back')
    add.onclick = function(){
        history.forward()
    }
    back.onclick = function(){
        history.back()
    }
    go.onclick = function(){
        history.go(2)
    }
</script>
</body>

四、本地存储：数据存储在浏览器中，设置、读取方便，甚至页面刷新也不会消失

1、容器较大
（1）sessionStorage 5M
（2）localStorage 20M
值存储字符串，可以编码json.stringify编码字符串来存储对象

2、window.sessionStorge
（1）生命周期：关闭浏览器
（2）在同一个页面，数据共享，以键值对的形式存储

3、window.localStorage
（1）生命周期：永久有效，除非手动删除，关闭也会存在
（2）可以多个窗口共享，以键值对的形式存储
（3）删除removeItem
代码例子：效果后续发表相关视频给小伙伴看🧐

<script>
    sessionStorage.setItem('index',123);//仅在同一个页面
    console.log(sessionStorage.getItem('index'));
    localStorage.setItem('name','小明')//可以多个窗口共享
    console.log(localStorage.getItem('name'));
    localStorage.removeItem('name')//删除
    console.log(localStorage.getItem('name'));
</script>

JQuery

一、JQuery：一个快速、简洁的JavaScript库，设计的宗旨"write less,Do More"

1、简介
（1）JavaScript库：一个封装好的特定的集合（方法和函数），该库里封装了很多定义好的函数，支持js的常规操作以及一些扩展
（2）学习JQuery本质：学习调用函数（方法）

2、jq的引入及输出

<script src="../jquery-3.6.0.js"></script>
console.log(jQuery);

二、入口函数（类似于onload）

1、文档加载完毕，图片不加载时候就可以执行函数

（1）写法一：

<body>
    <script>
        $(document).ready(function(){
            var div = document.querySelector('div')
            console.log(div);
        })
    </script>
    <div></div>
</body>

（2）写法二

<body>
    <script>
        $(function(){
            var div = document.querySelector('div')
            console.log(div);
        })
    </script>
    <div></div>
</body>

2、文档加载完毕，图片加载完毕的时候执行该函数

<body>
    <script>
        $(window).ready(function(){
            var div = document.querySelector('div')
            console.log(div);
        })
    </script>
    <div></div>
</body>

3、顶级对象$，JQuery的别称

console.log($);//相当于console.log(jQuery);

需要用jq的方法必须把元素对象包裹成jq对象

$(标签对象)变成jq的对象【单独的标签对象不可以用jq方法，只有用$包裹变成jq的对象才可以用方法】

三、常用API（jQuery 选择器 | 菜鸟教程 (runoob.com)）

1、选择器：原生js获取方法有很多，且具有兼容性，jq来给封装，获取元素方法统一标准【放到肚子里面去】
（1）格式

$('选择器')

（2）方法：和CSS样式获取选择器元素的方法一致

<body>
    <button>点击</button>
    <div id="box">
        <p>你好</p>
    </div>
    <p>外部你好</p>
    <script>
        console.log($('button'));
        $('button').click(function(){
            alert('点击成功')
        })
        console.log($('#box p'));
    </script>
</body>

2、隐式迭代：遍历内部的DOM元素（伪数组的形式存储）的过程【给匹配的元素进行循环遍历，方便调用】

（１）获取当前点击下标：$(this).index()

（２）获取指定元素：$('元素').eq(index)

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        $('li').click(function(){
            console.log($(this).index());
        })
        $('li').eq(1).click(function(){
            alert('点击成功')
        })
    </script>
</body>

3、样式操作：CSS()方法修改
（1）获取：参数只写属性名，返回值
（2）设置：参数是属性名和属性值
（3）参数是对象，键值对的形式【注意：属性名为复合属性时，写成驼峰的形式】

4、排他思想：当前元素设置样式，其他兄弟清除样式
（１）sibings()：返回其他同级元素对象
（２）结合第3点的样式操作：css('样式属性名','属性值') //修改样式方法

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        $('li').click(function(){
            $(this).css('background','red')
            $(this).siblings().css('background','')
            console.log($(this).siblings());
        })
    </script>
</body>

5、链式编程

<script>
    $('li').click(function(){
        $(this).css('background','red').siblings().css('background','')//链式
        console.log($(this).siblings());
    })
</script>

6、类的样式操作：添加类、删除类、切换类

代码例子：效果后续发表相关视频给小伙伴看🧐

<body>
    <div class="box"></div>
    <div>
        <button>添加</button>
        <button>删除</button>
        <button>切换</button>
    </div>
<script>
    $('button').eq(0).click(function(){
        $('.box').addClass('active')
    })
    $('button').eq(1).click(function(){
        $('.box').removeClass('active')
    })
    $('button').eq(2).click(function(){
        $('.box').toggleClass('active')
    })
</script>
</body>

7、动画
（1）显示隐藏
①显示：show(speed,callback)
②隐藏：hide(speed,callback)
③切换：toggle(speed,callback)
speed：时间
callback：回调函数，显示隐藏之后去做的事情

代码例子：效果后续发表相关视频给小伙伴看🧐

<script>
    $('button').eq(0).click(function(){
        $('.box').show(2000,function(){
            console.log('显示');
        })
    })
    $('button').eq(1).click(function(){
        $('.box').hide(2000,function(){
            console.log('隐藏');
        })
    })
    $('button').eq(2).click(function(){
        $('.box').toggle(2000,function(){
            console.log('切换');
        })
    })
</script>

（2）滑动

①滑下：sildeDown(speed,callback) //显示
②滑上：sildeUp(speed,callback) //隐藏
③切换sildetoggle(speed,callback)
speed：时间
callback：回调函数，显示隐藏之后去做的事情

（3）stop方法：

stop()：停止正在执行的动画

代码例子：效果后续发表相关视频给小伙伴看🧐

<body>
    <div class="box"></div>
    <div>
        <button>添加</button>
        <button>删除</button>
        <button>切换</button>
        <button>停止</button>
    </div>
<script>
    $('button').eq(0).click(function(){
        $('.box').slideDown(2000,function(){
            console.log('显示');
        })
    })
    $('button').eq(1).click(function(){
        $('.box').slideUp(2000,function(){
            console.log('隐藏');
        })
    })
    $('button').eq(2).click(function(){
        $('.box').slideToggle(2000,function(){
            console.log('切换');
        })
    })
    $('button').eq(3).click(function(){
        $('.box').stop()
    })
</script>
</body>

（4）淡入淡出

①fadeIn(speed,callback)
②fadeOut(speed,callback)
③fadetoggle(speed,callback)
speed：时间
callback：回调函数，显示隐藏之后去做的事情
④fadeTo(时间,透明度,callback)

代码例子：效果后续发表相关视频给小伙伴看🧐

<script>
    $('button').eq(0).click(function(){
        $('.box').fadeIn(2000,function(){
            console.log('淡入');
        })
    })
    $('button').eq(1).click(function(){
        $('.box').fadeOut(2000,function(){
            console.log('淡出');
        })
    })
    $('button').eq(2).click(function(){
        $('.box').fadeToggle(2000,function(){
            console.log('切换');
        })
    })
    $('button').eq(3).click(function(){
        $('.box').fadeTo(200,'0.3',function(){})
    })
</script>

（5）自定义动画：通过css样式将元素从一个状态改变成另一个状态，css属性值是逐渐改变的，这样就可以创建动画效果
①只有数字值可以创建动画（eg：width，margin），背景不会变
②animate(params,speed,easing,callback)
param：最终样式
easing：是否匀速，linear,swing
callback：回调函数，动画做完然后执行的事件
代码例子：效果后续发表相关视频给小伙伴看🧐

<body>
    <div class="box"></div>
    <button>点击</button>
<script>
    //注意animate()无法修改背景颜色
    $('button').click(function(){
        $('div').animate({height:'500px',background:'red'},1000,'linear',function(){
            console.log('执行完成');
        })
    })
</script>
</body>

JS及JQuery框架文章被收录于专栏

JavaScript的基本语法（变量、数据类型、运算符等等），流程控制（顺序、分支、循环），数组，函数（作用域、预解析），对象（自定义、内置），DOM（节点操作、获取元素），BOM（定时器、回调函数、同步异步） JQuery框架的入口函数，隐式迭代，排他思想，链式编程，样式操作，属性操作，事件监听