首页 > 编程语言 >前端历程(包括html，JavaScript，jQuery，bootstrap)

前端历程(包括html，JavaScript，jQuery，bootstrap)

时间：2024-05-28 20:24:32浏览次数：35  
标签：jQuery JavaScript 标签 bootstrap js var pEle d1

前端学习历程

jQuery

"""
jQuery内部封装了原生的js代码(还额外添加了很多功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫"类库"

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨
	write less do more
	让你用更少的代码完成更多的事情
"""

HTTP协议

"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就专门下载你的APP才能使用
"""
# 四大特性
	1.基于请求响应
    2.基于TCP/IP作用于应用层之上的协议
    3.无状态
    	不保存用户的信息
        由于Http协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
        	cookie、session、token
    4.无/短链接
    	请求来一次我响应一次 之后我们两个没有任何链接和关系

# 请求数据格式
	请求首行(表示HTTP协议版本，当前请求方式)
    请求头(一大堆k,v键值对)
    
    请求体(get请求没有，post请求有，存放的是post请求提交的敏感数据)
    
# 响应数据格式
	请求首行(表示HTTP协议版本，响应状态码)
    请求头(一大堆k,v键值对)
    
    请求体(get请求没有，post请求有，存放的是post请求提交的敏感数据)
    
# 响应状态码
	用一串简单的数字来表示一些复杂的状态或者描述性信息


# 请求方式
	1.get请求
    	向服务端获取数据
    2.post请求
    	向服务端提交数据

特殊符号

 	空格
>	大于号
<	小于号
&	&
¥	￥
©	©
商标®  ®

变量

"""
js变量的命令规范
	1.变量名只能是
		数字 字母 下划线 $
	2.变量名命名规范
		1.js中推荐使用驼峰式命名
			useName
			dataOfDb
		2.python推荐使用下划线的方式
			user_name
			data_of_db
		3.不能用关键字作为变量名
			不需要记忆 后面遇到几个就稍微有个印象
"""

数据类型

数值类型(number)
var a = 11;
var b = 11.11;
// 如何查看当前数据类型
typeof a;
// 特殊的 NaN: 数值类型 表示的意思是"不是一个数字" NOT A NUMBER

// 类型转换
parseInt('11')
parseFloat()
字符串类型
// 模板字符串
var s3 = `
	adasd
	adasd
	vadasd
`
typeof s3
"string"
// 模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作
var name='hhhl'
var age = 19
var ss = `
 my name is ${name} and my age is ${age}
`

ss
'\n my name is hhhl and my age is 19\n'

// 字符串拼接
// 在python中不推荐你使用+做拼接 推荐join
// 在js中推荐你使用+做拼接
null与undefined
"""
null
	表示值为空 一般都是指定或者清空一个变量适使用
		name = 'jason'
		name = null
undefined
	表名声明了一个变量，但是没有做初始化操作
"""
对象
  • 数组(类似于python里面的列表) []
  • 自定义对象(类似于python里面的字典) {}
运算符
var x = 10;
var res1 = x++;
var res2 = ++x;
res1 = 10
res2 = 12

# 比较运算符
1 == '1'   # 弱等于  内部自动转换成相同的数据类型比较了
true

1 === '1'  # 强等于  内部不做类型转换
流程控制
// if判断
var age = 28;
if (age<18){
    console.log("很好")
}else if(age<24){
    console.log('我是你的粉丝')
}else{
    console.log('nice')
}

# switch语法
var num = 2;
switch(num){
        case 0;
        	console.log('very good')
        	break;
        case 1;
        	console.log('very good')
        	break;
        case 2;
        	console.log('very good')
        	break;
        case 3;
        	console.log('very good')
        	break;
        case 4;
        	console.log('very good')
        	break;
    	default:
        	console.log('条件都没有匹配上')
        
}

# for循环
# 打印0-9数字
for(int i=0;i<10;i++){
    console.log(i)
}

// 三元运算
res = 1 > 2?1:3

函数

// 在js中多传参数跟少传参数都不会报错
// 关键字arguments
function func2(a,b){
    console.log(arguments)  // 能够获取到函数接受到的所有参数
}
自定义对象
# 时间对象具体方法
var d = new Date();
d.getDate()			# 获取日
d.getMonth()		# 获取月份(0-11)
d.getFullYear()		# 获取年份
d.getHours()		# 获取小时
d.getMinutes()		# 获取分
d.getSeconds()		# 获取秒
d.getMilliseconds()	# 获取毫秒秒
d.getTime()			# 获取时间戳
JSON对象
"""
在Python中序列化反序列化
	dumps	序列化
	loads	反序列化
	
在JS中也有序列化反序列化
	JSON.stringify()	dumps
	JSON.parse()		loads
"""
let d7 = {'name':'jason','age':18}
RegExp对象

正则

# 第一种创建正则对象
let reg1 = new RegExp(/^[a-zA-Z][a-zA-Z0-9]{5,11})/g

# 第二种创建
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11})/g

# 后面加上g代表全局匹配
reg1.match(/s/g)

# 全局匹配模式吐槽点
reg1.test('ensada')    # 全局模式有一个lastIndex属性
true
reg1.test('ensada')
false
reg1.test('ensada')
true


# 吐槽点二
reg4.test()   # 什么都不传  默认就是传undefined
BOM与DOM操作
"""
BOM
	浏览器对象模型		Browser Object Model
		js代码操作浏览器
DOM
	文档对象模型		Document Object Model
		js代码操作标签

"""
window.innerHeight
695
window.innerWidth
1536
window.open('https://www.mzitu.com/','','height=400px,width=400px')

BOM操作（浏览器操作模型）

history对象
window.history.back()	# 回退到上一页
window.history.forward()	# 前进到下一页
localtion对象(掌握)
window.localtion.href	# 获取当前页面的url
window.localtion.href = url		# 跳转到指定的url
window.localtion.reload()		# 刷新页面
警告框
alert('很帅气')
undefined
confirm("你确定？？？") 	// 确定取消框，确定返回true，取消返回false
false
prompt('输入框:')			// 文本输入框，返回输入的文本
'很满意'
计时器相关

  • 过一段时间之后触发(一次)

    • // 定时器
function func1(){
    alert('很牛')
}

var t = setInterval(func1,3000)  // 毫秒

clearInterval(t)

  • 每隔一段时间触发一次(循环)

    • // 循环定时器
function func2(){
    alert(123)
}

function show(){
    let t = setInterval(func2,3000);
    function inner(){
        clearInterval(t)
    }
    setTimeout(inner,9000)
}
show()

DOM操作（文档对象模型）

查找标签

  • 直接查找(掌握)

  • 间接查找(熟悉)

    • // 直接查找
domcument.getElementsById()
domcument.getElementsByClassName()
domcument.getElementsByTagName()


// 间接查找
var pEle = domcument.getElementsByTagName('div')
// 查找父标签和子标签
pEle.parentElement
pEle.children

// 下面的兄弟标签  div下面的div
pEle.nextElementSibling
// div上面的div
pEle.previousElementSibling

节点操作

/* 
通过DOM操作动态的创建img标签
并且给标签添加属性
最后将标签添加到文本中
*/
let imgEle = document.createElement('img')
undefined

imgEle
<img>

imgEle.src = '111.png'
'111.png'

imgEle.setAttribute('username','rencai1')
undefined

imgEle
<img src="111.png" username="rencai1">
   
// 将标签插入到网页端,先查找到标签
var divEle = document.getElementById('mydiv')
divEle.appendChild(imgEle)
获取值操作
# 获取用户数据标签内部的数据
seEle.value

# 获取用户上传的文件数据
fileEle.files
class操作、css操作
let divEle = document.getElementById('mydiv')
# 查看当前获取标签的所有class
divEle.classList
# 删除标签名
divEle.classList.remove('bg_red')
# 添加
divEle.classList.add('bg_red')
# 查看属性是否存在 返回
divEle.classList.contains('c1')
# 有这个属性则删除，没有则给他添加
divEle.classList.toggle('bg_red')

jQuery(封装了js的前端框架(模块))

"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码  完成js操作
类似于Python里面的模块 在前端模块叫做 类库

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨
	write less do more
	让你用更少的代码完成更多的事情
"""

jQuery内容：

  1. 选择器
  2. 筛选器
  3. 样式操作
  4. 文本操作
  5. 属性操作
  6. 文档处理
  7. 事件
  8. 动画效果
  9. 插件
  10. each、data、Ajax

jquery中文官方文档

针对导入问题
# 1.文件下载到本地

# 2.直接引入jquery提供的CDN服务(基于网络直接请求加载)
CDN: 内容分发网络
	CDN有免费的也有收费的
    前端免费的cdn网站：
    	bootcdn: https://www.bootcdn.cn/jquery/
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
jQuery基本语法
jQuery(选择器).action()
jQuery简写 $
jQuery() == $()

# jq跟原生js的对比
// 原生js代码操作标签
var pEle = document.getElementById('d1')
pEle.style.color = 'red'

// jQuery操作标签
$('p').css('color','blue')
let和var的区别(let只有在最新版js中支持)
var i = 10;
for (var i=0;i<5;i++){
    console.log(i)
}
i = 5

let n = 10;
for (let n=0;n<5;n++){
    console.log(n)
}
n = 10

// 区别
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效

学会如何查找标签

基本选择器
// id选择器
$('#d1')
// class选择器
$('.d2')
// 标签选择器
$('span')
// 结果都是jQuery对象
$('#d1')[0]  跟 document.getElementById('d1')  是一样的

// 标签对象转jQuery对象
$(document.getElementById('d1'))
筛选器方法
# 拿到ID为d1 同级的下一个标签
$('#d1').next()
# 拿到ID为d1下面的所有同级标签
$('#d1').nextAll()
# 拿到当前标下下的标签 直到哪里结束 不包含
$('#d1').nextUntil('.c1')

# 拿到ID为d1 同级的上一个标签
$('#d1').prev()
# 拿到ID为d1上面的所有同级标签
$('#d1').prevAll()
# 拿到当前标上的标签 直到哪里结束 不包含
$('#d1').prevUntil('.c1')

$('#d1').parent()   # 拿到父标签

$('#d1').parentUntil('.c1') # 拿到父标签 直到什么什么

$('#d1').children()  # 拿到子标签

$('#d1').siblings()  # 拿到同级别所有兄弟标签
标签操作

image-20240523193850635

# jQuery链式操作
# jQuery对象调用jQuery方法之后返回的还是jQuery对象 可以继续调用
$('p').first().css('color','red').next().css('color','green')

# 文本操作
"""
操作标签内部文本
js
innerText
innerHTML
"""
$('div').text()   # 拿到内部文本

$('div').html()   # 拿到内部文本加标签

# 获取值操作
"""
括号内不加参数就是获取值，加参数就是设置值
js						jQuery								
.value					.val()

jq获取上传的文件信息: $('#d2')[0].files[0]
"""


# 属性操作
"""
js中								jQuery
setAttribute()					 attr(name,value)
getAttribute()					 attr(name)
removeAttribute()				 removeAttr(name)

在用变量存储对象的时候 js中推荐使用
	xxxEle
jQuery中推荐使用
	$xxxEle
"""
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
"""
$('#d2').prop('checked',false)   # 设置为false取消勾选

$('#d2').prop('checked',true)    # 设置为true勾选上



# 文档处理
"""
js									jQuery
createElement('p')					$('<p>')
appendChild()						append()
"""
let $pEle = $('<p>')
$pEle.text('你好啊，买水果')
$pEle.attr('id','d1')
$('#d1').append($pEle)		# 内部尾部追加
$pEle.appendTo($('#d1'))

$('#d1').prepend($pEle)		# 内部头部追加

$pEle.prependTo($('#d1'))

$('#d2').after($pEle)		# 放在某个标签后面

$pEle.insertAfter($('#d1')) 

$('#d1').before($pEle)		# 把我放在谁的前面

$pEle.insertBefore($('#d2'))

$('#d1').remove()			# 将标签从DOM树中删除
$('#d1').empty*()			# 清空标签内部所有的内容
克隆事件

<button id='d1'>点击事件</button>

<script>
	$('#d1').on('click', function(){
        // console.log(this)   // this指代是当前被操作的标签对象
        // $(this).clone().insertAfter($'body') // clone默认情况下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件
    })
</script>
自定义模态框
左侧菜单
<script>
    $('.title').click(function(){
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
input实时监控
<input type="text" id='d1'>

<script>
	$('#d1').on('input',funciton(){
                console.log(this.value)
    })
</script>
hover事件
<script>
	$('#d1').hover(
    	function(){
            alert('来了')	  // 悬浮
        },
        function(){
            alert('溜了')	   // 移开
        }
    )
</script>
键盘按键事件
<script>
	$(window).keydown(function(event){
        console.log(event.keyCode)
        if(event.keyCode === 16){
            alert('你按了shift键 ')
        }
    })
</script>
阻止标签后续事件执行
<script>
	$('#d2').click(function (e){
        $('#d1').text('你能看到我吗')
        // 方式1  这种方式技能阻止后续事件执行，也能阻止标签冒泡
        return false 
        // 方式2
        e.preventDefault()
    })
</script>
事件委托
<button>是兄弟，就来砍我！！！</button>
<script>
	// 事件委托
    $('body').on('click','button',funciton(){
                 alert(123)  // 在指定范围内 将事件委托给某个标签 无论该标签是否事先写好的还是后面动态创建的
                 })
    
</script>
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
	// js代码
}

# jQuery中等待页面加载完毕
# 第一种
$(document).ready(function(){
	// js代码
})
# 第二种
$(function(){
	// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
// 隐藏ID为'd1'的元素，动画持续时间为5000毫秒（即5秒）  
$('#d1').hide(5000);  
  
// 显示ID为'd1'的元素，动画持续时间为5000毫秒（即5秒）  
$('#d1').show(5000);  
  
// 将ID为'd1'的元素以滑动方式向上隐藏，动画持续时间为5000毫秒（即5秒）  
$('#d1').slideUp(5000);  
  
// 将ID为'd1'的元素以滑动方式向下显示，动画持续时间为5000毫秒（即5秒）  
$('#d1').slideDown(5000);  
  
// 将ID为'd1'的元素以淡出效果隐藏，动画持续时间为5000毫秒（即5秒）  
$('#d1').fadeOut(5000);  
  
// 将ID为'd1'的元素以淡入效果显示，动画持续时间为5000毫秒（即5秒）  
$('#d1').fadeIn(5000);  
  
// 将ID为'd1'的元素的透明度更改为指定的级别（但此行代码缺少了指定透明度的参数），动画持续时间为5000毫秒（即5秒）  
// 注意：此行代码应该像这样使用：$('#d1').fadeTo(5000, 0.5); 其中0.5是透明度级别（0是完全透明，1是完全不透明）  
//$('#d1').fadeTo(5000);

前端框架Bootstrap

bootstrapV3版本: https://v3.bootcss.com/

在线引入bootstrap

需要先引入jQuery

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
布局容器
<div class="container">
    左右两侧有留白
</div>

<div class="container-fluid">
    左右两侧没有留白
</div>
# 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
栅格系统
// 将一个row所在的区域分成12份
<div class="container">
    <div class="row">
        <div class="col-md-6 c1"></div>
        <div class="col-md-6 c1"></div>
    </div>
</div>
栅格参数
.col-xs-	.col-sm-	.col-md-	.col-lg-
# 针对不同的显示器 bootstrap会选择不同的参数
# 如果你想要兼容所有的显示器 就全部加上去即可

# 如果你只要8个不满12个 又想要居中 可以再加参数
col-md-offset-2
表格
<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <table class="table table-hover table-striped table-bordered">
            <thead>
            <tr>
                <th >ID</th>
                <th class="text-center">username</th>
                <th>password</th>
                <th>hobby</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">
                <td>1</td>
                <td>jasd</td>
                <td>123</td>
                <td>adhajdh</td>
            </tr>
            <tr class="activet">
                <td>2</td>
                <td>jaasdsd</td>
                <td>asvasd</td>
                <td>ghfdfd</td>
            </tr>
            <tr class="warning">
                <td>2</td>
                <td>jaasdsd</td>
                <td>asvasd</td>
                <td>ghfdfd</td>
            </tr>
            <tr class="danger">
                <td>2</td>
                <td>jaasdsd</td>
                <td>asvasd</td>
                <td>ghfdfd</td>
            </tr>
             <tr class="info">
                <td>2</td>
                <td>jaasdsd</td>
                <td>asvasd</td>
                <td>ghfdfd</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
表单
<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登录页面</h2>
        <form action="">
            <p>username:<input type="text" class="form-control"></p>
            <p>password:<input type="text" class="form-control"></p>
            <p>
                <select name="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select>
            </p>
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            <input type="submit">
        </form>
    </div>
</div>
弹框
https://lipis.github.io/bootstrap-sweetalert/
点击进度条增加
<script>
	function func(i){
        let tempWidth = 'width:' + i + '%'  // style
        let contentText = i + '%'   // 文本
        $('#d2').attr('style',tempWidth).text(contentText)
    }
    $('#d1').click(function() {
        for(let i = 0;i<101;i++){
            setInerval(func(i), 5000  )
        }
    })
</script>

标签：jQuery,JavaScript,标签,bootstrap,js,var,pEle,d1
From： https://www.cnblogs.com/it-cyj/p/18218768/qindaun

相关文章

  • 《你不知道的JavaScript》三卷读后感
    《你不知道的JavaScript》三卷读后感 本系列的作者是Kyle Simpson，上卷译者赵望野、梁杰，中卷译者单业，下卷译者单业、姜南。我个人觉得第一卷是本系列最好的(必读)，而第二卷虽然也讲解了很多知识点，但是对于异步和性能的那部分提及了信任问题上，我不敢苟同，毕竟开源的大......
  • ⭐⭐⭐⭐⭐《JavaScript忍者秘籍》关键技术分享
    链接：pan.baidu.com/s/199LHxxIlMixw3gYSY8tyPw?pwd=ywxg提取码：ywxg基础语法与数据类型：介绍JavaScript的基本语法结构，包括变量、数据类型、运算符、条件语句、循环等。函数与高阶函数：深入讲解函数的定义、调用以及高阶函数的概念，如回调函数、闭包等。对象与原型链：解析JavaScri......
  • 持续性学习-Day16（前端基础JavaScript）
    LearnJavaScript参考教学视频：秦疆参考知识UI框架Ant-design:阿里巴巴出品，基于React的UI框架ElementUI、iview、ice：饿了吗出品，基于VUE的UI框架BootStrap：Twitter推出的一个用于前端开发的开源工具包AmazeUI：一款HTML5跨屏前端框架JavaScript构建工具Babel：JS编译......
  • 前端小白必知必会：JavaScript的作用域
    文章导读：AI辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是JavaScript的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。这篇文章瑶琴带大家学习 javascript中关于变量作用域的相关知识点。在JavaScript中，变量的作用......
  • 你不知道的JavaScript（上中下合集） (作者 [美] Kyle Simpson 译者 赵望野 梁杰 单业 姜
    书：pan.baidu.com/s/199LHxxIlMixw3gYSY8tyPw?pwd=ywxg提取码：ywxg作用域与闭包：详细解释了词法作用域、动态作用域以及闭包的概念，展示了它们如何影响变量和函数的可访问性。函数作用域与块作用域：区分了函数作用域和块作用域，并解释了let和const等关键字如何引入块级作用域。变量......
  • 在JavaScript中如何移除数组中的特定项
    在日常开发中，我们经常需要从数组中移除某个特定的元素。在JavaScript中，存在多种不同的方法来完成这一任务，本文将总结几种常见的处理方式，并介绍它们的优缺点。常规情况1.使用.splice()方法按值移除数组元素是否修改原数组:是是否移除重复项:是（使用循环）,否（使用i......
  • 代码雨（coderain)源码（html5+css3+javascript,原创)
     大家看过黑客帝国的代码雨吗？本人自己写了一个，效果还可以。演示效果请见https://www.lanbaoshi.site/coderain.htm下面上代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="htt......
  • JavaScript 控制网页行为
    UI框架Ant-Design：阿里巴巴出品，基于React的UI框架ElementUI、iview、ice：饿了么出品，基于Vue的UI框架Bootstrap：Twitter推出的一个用于前端的开源工具包AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架1.基本使用1.1.引入JavaScript内部标签使用<script>//........
  • JavaScript 中 toString 的奇妙使用
    JavaScript中的toString()方法，我们通常会一些其他类型的变量，转为字符串类型。但这里还有一些其他奇妙的用法。不同的类型调用toString()会得到不同的结果。我们来一一分析下。1.函数类型我们开发者自定义的函数，和JavaScript官方内置的函数，在调用toString时，输出是不一样......
  • （读后分享）移动Web前端高效开发实战：HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接：pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码：jqsoHTML5新特性与应用：介绍HTML5的新特性，包括语义化标签、本地存储、设备兼容、连接特性等，并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计：详细讲解CSS3的样式设计和动画效果，包......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99