前端部分知识学习笔记

来源:互联网 发布:淘宝优惠券的公众号 编辑:程序博客网 时间:2024/05/18 01:50

html,css,javascript在网页开发中的定位

HTML 超文本标记语言 定义网页的结构
CSS 层叠样式表,用来美化页面
JavaScript主要用来验证表单,做动态交互(其中ajax)

Ajax

异步的javascript和xml
通过AJAX与服务器进行数据交换,AJAX可以使网页实现布局更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
怎么来实现Ajax XmlHttpRequest对象,使用这个对象可以异步向服务器发送请求,获取响应,完成局部更新。Open send responseText/responseXML 局部响应。
使用场景 登陆失败时不跳转页面,注册时提示用户名是否存在,二级联动等等使用场景

js和jQuery的关系

jQuery是一个js框架,封装了js的属性和方法。让用户使用起来更加便利。并且增强了js的功能。
使用原生js是要处理很多兼容性的问题(注册事件等),由jQuery封装了底层,就不用处理兼容性问题。
原生的js的dom和事件绑定和Ajax等操作非常麻烦,jQuery封装以后操作非常方便。

jQuery的常用选择器

ID选择器 通过ID获取一个元素
Class选择器 通过类(css)获取元素
标签选择器 通过标签获取元素
通用选择器(*) 获取所有的元素
div.myCls 获取有myCls这个类的div
层次选择器
儿子选择器 > 获取下面的子元素
后代选择器 空格 获取下面后代,包括儿子、孙子等后代
属性选择器
Tag[attrName=’test’] 获取有属性名为xxxx并且属性的值为test的所有xxx标签

    <input type=”checkbox” name=”hobby”/> 吃饭<br/>    <input type=”checkbox” name=”hobby”/> 睡觉<br/>

Input[name=’hobby’],表示获取属性名为name并且name属性值为hobby的的所有input标签元素

jQuery的页面加载完毕事件

很多时候我们需要获取元素,但是必须等到该元素被加载完成后才能获取。我们可以把js代码放到该元素的后面,但是这样就会造成js在我们的body中存在不好管理。所有页面加载完毕后所有的元素当然已经加载完毕。一般获取元素做操作都要在页面加载完毕后操作。

第一种:
(document).ready(function());(document)把原生的document这个dom对象转换为jQuery对象,转换完成后才能调用ready方法
ready(fn),表示的是页面结构被加载完毕后执行传入函数fn

第二种:
$(function(){
});
当页面加载完毕后执行里面的函数,这一种相对简单,用得最多。

window.onload的区别
1、jQuery中的页面加载完毕事件,表示的是页面结构被加载完毕。
2、window.onload 表示的是页面被加载完毕。
<img src=”htttp://baidu.com/1.jpg”/> onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。

Jquery的Ajax和原生Js实现Ajax的关系

jQuery中的Ajax也是通过原生的js封装的。封装完成后让我们使用起来更加便利,不用考虑底层实现或兼容性等处理。
如果采用原生js实现Ajax是非常麻烦的,并且每次都是一样的。如果我们不使用jQuery我们也要封装Ajax对象的方法和属性。有像jQuery这些已经封装完成,并经过很多企业实际的框架,比较可靠并且开源。我们就不需要封装,直接使用成熟的框架(jQuery)即可。

html5

Html5是最新版本的html,是在原来html4的基础上增强了一些标签。

Html增加一些像画板、声音、视频、web存储等高级功能。但是html5有一个不好的地方,那就是html5太强调语义了,导致开发中都不知道要选择那个标签。
在做页面布局是,无论头部、主题、导航等模块都使用div来表示,但是html5的规范,需要使用不同的标签来表示。(header footer等)

你对现在的哪些新技术有了解
Html5 css3等

css3

Css3是最新版本的css,是对原理css2的功能增强。
Css3中提供一些原来css2中实现起来比较困难或者不能实现的功能。
1、盒子圆角边框
2、盒子和文字的阴影
3、渐变
4、转换 移动、缩放、旋转等
5、过渡、动画都可以使用动画。
6、可以使用媒体查询实现响应式网站。
Css3最大缺点就是要根据不同的浏览器处理兼容性。对应有一些处理兼容性的工具。不用担心。

bootstrap

BootStrap是一个移动设备优先的UI框架。我们可以不用谢任何css,js代码就能实现比较漂亮的有交互性的页面。我们程序员对页面的编写是有硬伤的,所有要自己写页面的话就要使用类似于bootstrap这样的UI框架。

平时用得很多的:
1、模态框
2、表单,表单项
3、布局
4、删格系统

原创粉丝点击