前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS基础第四课、JQ基础第一课(BOM、JQuery框架)

JS基础第四课、JQ基础第一课(BOM、JQuery框架)

原创
作者头像
申小兮
修改于 2023-04-15 15:47:43
修改于 2023-04-15 15:47:43
1.3K00
代码可运行
举报
文章被收录于专栏:前端开发基础前端开发基础
运行总次数:0
代码可运行

注意:

使用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参数

①登录框

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <form action="./try.html">
        <input type="text" name="user">
        <br>
        <input type="password" name="password">
        <br>
        <button>登录</button>
    </form>
</body>

②登录后跳转页面

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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对象:监听设备对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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)

代码例子:三个文件,效果后续发表相关视频给小伙伴看🧐

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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的引入及输出

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="../jquery-3.6.0.js"></script>
console.log(jQuery);

二、入口函数(类似于onload)

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

(1)写法一:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <script>
        $(document).ready(function(){
            var div = document.querySelector('div')
            console.log(div);
        })
    </script>
    <div></div>
</body>

(2)写法二

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <script>
        $(function(){
            var div = document.querySelector('div')
            console.log(div);
        })
    </script>
    <div></div>
</body>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <script>
        $(window).ready(function(){
            var div = document.querySelector('div')
            console.log(div);
        })
    </script>
    <div></div>
</body>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log($);//相当于console.log(jQuery);

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

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

三、常用API(jQuery 选择器 | 菜鸟教程

1、选择器

原生js获取方法有很多,且具有兼容性,jq来给封装,获取元素方法统一标准【放到肚子里面去】

(1)格式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('选择器')

(2)方法:和CSS样式获取选择器元素的方法一致

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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元素(伪数组的形式存储)的过程【给匹配的元素进行循环遍历,方便调用】

(1)获取当前点击下标:$(this).index()

(2)获取指定元素:$('元素').eq(index)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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、排他思想

当前元素设置样式,其他兄弟清除样式

(1)sibings():返回其他同级元素对象

(2)结合第3点的样式操作:css('样式属性名','属性值')  //修改样式方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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、链式编程

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    $('li').click(function(){
        $(this).css('background','red').siblings().css('background','')//链式
        console.log($(this).siblings());
    })
</script>

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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:回调函数,显示隐藏之后去做的事情

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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():停止正在执行的动画

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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)

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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:回调函数,动画做完然后执行的事件

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
JS基础第三课(定时器篇)
(1)概念:回调函数其实是一个参数,将这个函数作为参数传到别的函数里面,回调函数是最后执行的
申小兮
2023/04/14
2.1K0
JS基础第三课(定时器篇)
JS基础第二课(元素篇)
1、用于HTML和XML文档的编辑接口,给文档提供一种结构化的表示方法,可以修改文档的内容和结构
申小兮
2023/04/13
7580
JS基础第二课(元素篇)
我现在写jquery,你们会不会打我??
jquery在设计之初都是围绕着核心思想write less do more来设计的。整体使用思路与原生js没有太大区别,所以jquery做的最多的一件事情就是简化原生js的代码量。选择器在操作dom上使用非常频繁,所以jq一定会简化选择器使用方式。原生选择器使用如下:
王小婷
2020/11/19
4910
jQuery
jQuery选择器 <script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <body> <ul> <li>1</li> <li class="a">2</li> <li>3</li> <li class="b">4</li> <li>5</li> <li class="c">6</li> <li>7</li
ymktchic
2022/01/18
1.8K0
jQuery
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4K0
jq初始,选择器,事件,内容操作,样式操作
jq操作页面文档http://jquery.cuishifeng.cn/ jq初始 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq初始</title> </head> <body> <h1>jQuery就是js的工具库 - 一系列功能的集合体</h1> <h2>jq内部语法采用的就是原生js</h2> <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2
小小咸鱼YwY
2019/09/11
7940
E026Web学习笔记-JQuery(四):动画、遍历、事件、插件
訾博ZiBo
2025/01/06
770
E026Web学习笔记-JQuery(四):动画、遍历、事件、插件
从零开始学习DOM-BOM(二)
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情
虎妞先生
2022/10/27
3090
jQuery基础
一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。 [2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! [3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 [4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdo
用户1214487
2018/01/24
2.2K0
什么是BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
清出于兰
2020/10/26
1.1K0
什么是BOM
JSON基础、原生的ajax及JQuery.ajax
(1)从服务器上读取JSON数据,将json数据转化成js对象,然后在网页中使用数据
申小兮
2023/04/19
9510
JSON基础、原生的ajax及JQuery.ajax
JQuery 实现开发常用功能
标签克隆的两种实现方式: <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) {
王瑞MVP
2022/12/28
5.4K0
BOM
​ BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
梨涡浅笑
2022/05/08
1.4K0
BOM
jQuery基础
使用jQuery时, $ 是访问jQuery的标志,但是如果有其他方法与jQuery中的 $冲突时,可以释放$的使用权 ,还可以自定义一个符号来代替 $使用。
不愿意做鱼的小鲸鱼
2022/08/24
1.8K0
jQuery基础
jQuery基础--动画操作
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title>
eadela
2019/09/29
4.3K0
jQuery基础--动画操作
「jQuery」基础 - 01
请注意,本文编写于 2075 天前,最后修改于 173 天前,其中某些信息可能已经过时。
曼亚灿
2023/05/17
7.1K0
「jQuery」基础 - 01
BOM大详解
了解: 1.BOM架构全局对象的使用. 2.根据案例来讲解 3:大总结。 4;效果.
贵哥的编程之路
2020/11/06
5220
01-老马jQuery教程-jQuery入口函数及选择器
前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html
老马
2017/12/20
2.5K0
jQuery基础系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
达达前端
2019/07/03
2.7K0
jQuery基础系列
jQuery
onload 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
小丞同学
2021/08/16
8.9K0
相关推荐
JS基础第三课(定时器篇)
更多 >
目录
  • 注意:
    • 回忆:
  • 一、location对象:解析URL
    • 1、url:proticol://host:post/pash/pash?query#fragment
    • 2、属性
    • 3、跳转获取
  • 二、navigator对象:监听设备对象
  •  三、history对象:与浏览器历史进行交互,修改对象包含用户(在浏览器窗口)访问过的url
    • 1、后退:back()
    • 2、前进:forward()
    • 3、前进和后退:go()
  •  四、本地存储:数据存储在浏览器中,设置、读取方便,甚至页面刷新也不会消失
    • 1、容器较大
    • 2、window.sessionStorge
    • 3、window.localStorage
  • 一、JQuery:一个快速、简洁的JavaScript库,设计的宗旨"write less,Do More"
    • 1、简介
    • 2、jq的引入及输出
  • 二、入口函数(类似于onload)
    • 1、文档加载完毕,图片不加载时候就可以执行函数
    • 2、文档加载完毕,图片加载完毕的时候执行该函数
    • 3、顶级对象$,JQuery的别称
  • 三、常用API(jQuery 选择器 | 菜鸟教程)
    • 1、选择器
    •  2、隐式迭代
    • 3、样式操作:CSS()方法修改
    • 4、排他思想
    • 5、链式编程
    • 6、类的样式操作:添加类、删除类、切换类
    • 7、动画
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档