前端

Posted 2023-04-19 juzixiong

前端(七)

jQuery

属性操作

# 属性操作就是给标签增加删除之类的
# js中如果是自带属性就是点语法不是自带属性就是div.setAttritube(\'k\',\'v\')
JQuery：
	1. attr(attrName);  # 获取匹配到的属性
    2. attr(attrName, value);  # 设置一个属性
    3. romoveAttr(attrName);  # 删除一个属性
操作CheckBox和radio
	prop(\'checked\',true);  # 增加一个属性
    removeProp(\'checked\');  # 删除一个属性
# 在处理CheckBox和radio的时候尽量使用prop不要使用attr
attr和prop的区别：
	1. 标签上有的和自定义的属性都使用attr
    2. 对于返回布尔值的如CheckBox，radio，option都使用prop

文档处理

# 也可叫节点操作
js创建一个标签：
	var a = document.createElement(\'a\');
jQuery创建一个标签：
	var a = $(\'<a>\');
    let pEle = $(\'<p>\')
    pEle.text(\'你好\')
    pEle.attr(\'id\',\'d1\')          
    $(\'#d1\').append($pEle)  # 内部尾部追加

克隆

.clong()  # 默认只克隆样子，不克隆事件
.clong(true)  # 加个true，就可以克隆事件了

常用事件

click(function()...)
hover(function()...)
blur(function()...)
focus(function()...)
change(function()...)
keyup(function()...)
input监控	

绑定事件

$(\'#btn\').click(function () 
	alert(123);
)

$(\'#btn\').on(\'click\', function ()   # 支持事件委托功能更加强大
    alert(123);
)

hover事件

<script>
    $("#p1").hover(function () 
        console.log(123);
    , function () 
        console.log(345);
    )
</script>
# 第一个参数是鼠标移进去触发的动作，第二个参数是鼠标移走触发的动作

input

<script>
    $(\'#d1\').on(\'input\', function () 
        console.log(this.value);
        // 只需要在这里向后端发起一个请求携带这此时的值后端给我返回一个结果，我放到页面上去
       // ajax朝后端发起请求----------->django中学
    )
</script>

阻止后续事件执行

<script>
    $("#btn").click(function (e) 
        $(\'.s1\').text(\'趁年轻，学技能\');
        return false;  // 阻止手续事件的执行
        e.preventDefault();  // 阻止手续事件的执行
    )
</script>

阻止事件冒泡

return false;  // 阻止事件冒泡1
e.stopPropagation();  // 阻止事件冒泡2

页面载入

# 等待页面加载完毕之后再执行的代码
# js中如何做的?
window.onload = function () 

# 在jquery中
# 1. 
$(document).ready(function()
	// 在这里写你的JS代码...
)

# 2. 
$(function()
	// 你在这里写你的代码
)

# 3.
# 把你的js代码放在body的最下面，最后加载就可以了

事件委托

$(\'body\').on(\'click\', \'.btn\', function ()    // 利用事件委托
    console.log(\'触发了\');
)

补充

1. each
2. data
$(\'div\');
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$(\'div\').each(function (value) console.log(value););
VM296:1 0
VM296:1 1
VM296:1 2
VM296:1 3
VM296:1 4
VM296:1 5
VM296:1 6
VM296:1 7
VM296:1 8
VM296:1 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$(\'div\').each(function (value, index) console.log(value,index););
VM430:1 0 <div>​1​</div>​
VM430:1 1 <div>​2​</div>​
VM430:1 2 <div>​3​</div>​
VM430:1 3 <div>​4​</div>​
VM430:1 4 <div>​5​</div>​
VM430:1 5 <div>​6​</div>​
VM430:1 6 <div>​7​</div>​
VM430:1 7 <div>​8​</div>​
VM430:1 8 <div>​9​</div>​
VM430:1 9 <div>​10​</div>​
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$(\'div\').each(function (index, value) console.log(value,index););
VM533:1 <div>​1​</div>​ 0
VM533:1 <div>​2​</div>​ 1
VM533:1 <div>​3​</div>​ 2
VM533:1 <div>​4​</div>​ 3
VM533:1 <div>​5​</div>​ 4
VM533:1 <div>​6​</div>​ 5
VM533:1 <div>​7​</div>​ 6
VM533:1 <div>​8​</div>​ 7
VM533:1 <div>​9​</div>​ 8
VM533:1 <div>​10​</div>​ 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]

# BBS项目中用
 var arr = [1, 2, 3, 4, 5];
    $.each(arr, function (index, value) 
        console.log(index, value);
)

##########data的用法
$(\'div\').data(\'username\', \'kevin\');
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$(\'div\').first().data(\'username\');
\'kevin\'
$(\'div\').last().data(\'username\');
\'kevin\'
$(\'div\').first().removeData(\'username\');
S.fn.init [div, prevObject: S.fn.init(10)]
$(\'div\').first().data(\'username\');

bootstarp

# 内部封装了很多的css样式和js代码。要用只需要下载内库文件，并引入文档中
"""
	我们在使用的时候，只需要对标签操作class类即可，就是增加class和删除class属性值来达到某个效果

    去百度中搜索bootstrap：https://www.bootcss.com/

    版本建议选择v3版本
"""

如何使用bootstrap

1. 在官网下载
2. 使用CDN
3. bootcdn
# 如果你只使用bootstrap 的css样式，直接引入一个css文件即可
# 如果你使用了bootstrap 的js代码，必须引入js代码和jQuery文件，因为bootstrap依赖于jQuery文件

布局容器

<div class="container">
      # 左右两边留空白
</div>

<div class="container-fluid">
  	# 不留空白
</div>

# 所以，以后我们在写页面的时候，上来先写一个div class=container,我在写页面的时候，会经常加class=container

栅格系统

<div class="row"></div>  # 把一个div等分成12份

# 如何兼容四种情况的设备呢？
# 给标签添加4个类

表格

table
<table class="table table-striped table-hover table-bordered"> # 务必记住

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

表单

# 针对于单选和复选不要加form-control

按钮

<a href="……" class="btn btn-primary btn-xs">角色</a>  # 通过class="btn"可变为按钮  btn-primary改变颜色  btn-xs改变大小

图标

# https://fontawesome.dashgame.com/------------->fontawesome图标库

什么是前端，后端，终端，有什么区别

参考技术A

一、什么是前端？

1、前端概念

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

2、前端特点

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

3、前端主要技术：HTML、CSS、JavaScript

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

（1）HTML

指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。

（2）CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

（3）JavaScript

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

二、什么是后端？

1、后端概念

多数后端开发人员从事于构建他们正在工作的应用程序背后的实际逻辑。前端开发人员构建用户界面，而后端开发人员编写代码，使其工作。后端开发人员写可使得按钮工作的代码，通过指出从数据库中提取哪些数据并将其传回到前端。后端开发人员也可能会大量参与系统架构，决定如何组织系统的逻辑，以便能够正常维护和运行。

可能会参与构建框架或系统架构，以便于更容易编写程序。后端开发人员比前端开发人员花费更多的时间在实现算法和解决问题上。通常前端开发工作更多的是关于创建用户界面和与之相关的内容，而不是实现实际的业务逻辑，使应用程序工作。

2、后端开发主要技术

前端开发人员需要知道一系列用于创建用户界面的工具，而后端开发人员通常使用的是一套完全不同的工具和技能，以便于高效地完成他们的工作。后端开发人员所需的一个重要技能与SQL和数据库有关。大多数后端系统需要连接到存储应用程序数据的数据库。

后端开发人员通常的工作是从数据库或其他数据源写入、读取和处理数据，因此拥有SQL等技能会非常重要。后端开发人员——至少对于Web开发——也需要擅长他们正在使用的技术栈的服务器端语言。

后端开发人员需要更多地了解应用程序架构，因为大多数情况下，后端开发人员需要去构建应用程序的体系结构和内部设计。一个好的后端开发人员得知道如何使用各种框架和库，如何将它们集成到应用程序中，以及如何构建代码和业务逻辑，用一种使系统更易于维护的方式。

前端用户可见的界面，网站前端页面就是网页的页面开发，前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容；后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

以上就是整理的前端和后端的具体区别。希望能帮到大家！