HTML+CSS+JavaScripe+jQuery基础重点

平安喜乐..pry

已于 2022-09-11 19:37:13 修改

阅读量403

点赞数

文章标签： html css 前端

于 2022-09-11 14:55:24 首次发布

本文链接：https://blog.csdn.net/m0_67833891/article/details/126734551

版权

HTML+CSS

HTML基础重点
CSS基础重点
JavaScript
DOM&BOM
jQuery

HTML基础重点

作用：呈现基本的浏览界面

1. 知道HTML的文档结构

2. 知道HTML常用标签–常翻翻用用

标签可以自定义哟，用来给特定文字设置羊水外观
what is 单标签； what is 双标签
JS静态绑定的问题：元素还没有被创建，事件就执行完了，最好把JS代码写在后面比较好

<a> 的href:
          值为“#”--访问本地文档，点击链接无反应
          值为“www...”访问本域文档
          值为“https...”访问外域文档

$emnp 空格符：一个汉字宽度
$ensp空格符：一个英文字符宽度

3. what is 列表

4. what is 表格

5. what is 表单

在创建表单时，可以用div层标签、p段落标签分隔不同的表单控件。

CSS基础重点

作用：美观页面，修饰标签元素

1. CSS是一个样式表

2. how 在HTML文档中定义CSS样式表–作为行内元素，定义内部样式表，链入外部样式表文件

3. what is CSS的选择器及其定义语法格式 –标签选择器，类选择器，ID选择器，交集选择器，并集选择器

①标签选择器语法格式：标签名{ }
②类选择器语法格式：.自定义类名 { }
③ID选择器： #自定义ID名 { }
④交集选择器：前三个选择器自由组合，不用任何分隔符分隔 { }
⑤并集选择器：前三个选择器自由组合，用逗号分隔{ }

4. CSS选择器的作用–将CSS样式表作用到标签中的手段

5. CSS的样式属性–字体，文本，背景，表格，列表…

常翻翻用用，用多了就记住了

6. CSS的页面布局

JavaScript

作用：实现网页动态效果与人机交互的功能

1. JavaScript的引入方式–①在HTML文档中嵌入脚本程序：将script标签嵌入head标签或者body标签②链接js文件

2. JavaScript的语法：就是java语言的基础语法

3. JavaScript对象–object对象，string对象，date对象，浏览器对象，math对象（静态属性类），regexp对象，array对象

4. 知道浏览器对象–window对象（核心对象）：文档，地址，表单，历史记录对象

5. 使用window对象时可以直接调用方法

6. 学习要求：知道有什么方法与属性，并且怎么在网页中使用

应该主要是定义函数来实现什么功能与js对象本身嵌有个对象函数的使用（与Java的API挺像的）

DOM&BOM

1.DOM&BOM的介绍

DOM:文档器对象模型，提供了处理网页元素<标签>的方法与接口
BOM：浏览器对象模型，提供了与浏览器交互的方法与接口

？与js的基本对象有什么区别呢？
JS的三类对象：
（1）内建对象：如Array…（依赖Java语言的）
（2）宿主对象：由浏览器提供的对象，如BOM（依赖浏览器环境的）
（3）自定义对象：？怎么创建？

BOM模型有什么

（1）核心对象：Window对象
（2）最强大的功能，提供了一个访问HTML的一个接口： document对象
（3）location对象
（3）history对象
（4）screen对象
（5）navigator对象

DOM模型

总的来说，DOM表现为被加载到浏览器窗口的当前页面，背地里是一个家族树。
树上有元素节点，属性节点，文本节点，注释节点，document ，document切断。
外标签是内标签的父节点，属性，文本是对应标签的子节点…

使用DOM操作HTML标签

就是从树上按方法找节点，对对应节点进行操作。

DOM中的事件处理

？JS采用异步事件驱动编程模型？
JS用event对象来描述JS事件（与Java 同）
事件传播：浏览器决定哪个对象触发其事件处理程序的过程（涉及到了事件冒泡、事件捕获）
（1）注册事件处理程序

a.设置HTML标签属性来注册事件处理程序

              key:
                      这样的事件处理程序被转换成能存取全局变量的顶级函数而非任何本地变量
              语法：
                      <input type="button" onClick="alert('你点击了按钮！') "/>

b.设置JS DOM对象注册事件处理程序

          语法：
                 伪代码描述：
                                          firstly，取得一个操作对象，通常是文档里的
                                          某个标签对象
                                          secondly，将一个自定义的事件处理函数赋值
                                          给这个对象的属性即可完成绑定
                            （事件处理程序属性的名字以on开头，后面跟着对应的事件名组成的）
             格式：
             var btn=document.getElmentById("btn1");
             btn.onclick=function(){  alert("click!");  };            
       存在的问题：
                后面绑定的事件处理程序会覆盖前面的事件绑定程序，
                也就是说这种方法只能给元素绑定一个事件处理函数

c.使用addEventListener（）方法注册事件处理程序

       语法：
                function show(evnet){
                      x=event.clientX;
                      y=event.clientY;
                      var content="X坐标："+x+",Y标签:" +y;
                      document.getElmentById("span").innerHTML=content;
                      }
     感觉是自定义一个函数，在函数体里完成对某个元素的绑定与处理

（2）事件调用顺序
a.前两个事件处处理程序一直优先调用
b.通过addEventListener（）注册的事件处理程序，按照它们的注册顺序调用
补充：JS中，绑定的事件默认的执行时间是在冒泡阶段执行，JS在默认情况下获取事件后，就从根元素开始捕获所有该事件的监听元素，然后在冒泡阶段逐一执行
（3）
事件冒泡的原因：因为事件源本身可能并没有处理事件的能力，事件就必须从这个按钮传播出去，从而到达能够处理这个事件的地方中去。
事件冒泡：事件沿着DOM树依次向上
事件捕获：事件沿着DOM树依次向上
（4）事件类型
a.UI事件：当用户与页面上是元素交互时触发
b.焦点事件：元素获得或失去焦点时触发
c.鼠标事件
b.滚轮事件
d.文本事件
e.键盘事件

jQuery

jQuery语法

      基础语法：
            $(selector).action()
      (1)$  ： 定义了这是jQuery              
      (2)选择符  ： 查询&查找HTML元素
      (3)action()  ：执行对元素的操作

一段代码：
$(document).ready(function(){ });
为了防止文档在完全加载之前运行jQuery代码
区别于window.onload()的不同与相同之处

DOM对象与jQuery对象的对比

(1)获取jQuery对象的语法：

        $("#foo").HTML();  //获取id为foo的元素内的HTML代码
        仔细观察这个双引号里的结构： 是CSS中的id选择器的名字

（2）获取DOM对象的语法：
document.getElmentById(“foo”).innerHTML:
（3）jQuery对象无法使用DOM对象的任何方法，同样，DOM对象也无法使用jQuery对象的任何方法
（4）获取jQuery对象的变量定义语法：

var $variable= jQuery对象;

（5）获取DOM对象的变量定义语法:

var variable=DOM对象;

（6）jQuery对象转换成DOM对象的方法： [index] 或 .get(index)

var &cr=$ (“#cr”);
var cr=$ cr[0];
?why是用获取索引的方式呢，莫不是jQuery对象所获取的是满足要求的元素数组，然后DOM对象获取的是一个元素？
（7）DOM对象转换成jQuery对象的方法：只需用$（）把DOM对象包装起来
var cr=document.getElementById(“cr”);
var $cr= $ (cr);

JQuery选择器

作用：类似于CSS中的选择器，用来选取网页中元素
语法： $(selector).css(); [ css()为jQuery对象设置样式的方法 ]
分类：
基本选择器：标签选择器，类选择器，ID选择器，并积极选择器，交集选择器，全局选择器
层次选择器：后代选择器，子选择器，相邻元素选择器，同辈选择器（通过DOM元素之间的层次关系来获取元素）
属性选择器：[attribute] , [attribute^=value] , [attribute $=value] , [attribute * =value] , [selector1][selector2] [selectorN] （通过HTML元素的属性来选择元素， ^ , $ , *是正则符）
过滤选择器：基本过滤选择器，可见性过滤选择器，内容过滤选择器，子元素过滤选择器，表单元素过滤选择器等（通过特定的过滤规则来选择元素）

名称	语法构成
基本	:first
	:last
	:even
	:odd
	:eq
	:gt
	:It(indext)
	:not(selector
	:header
	:focus
内容	:contains(text)
	:empty
	:has(selector)
	:parent

属性操作

（1）获取属性–attr()
—>语法<— $ (selector).attr(attrbute);
（2）设置属性–attr()
—>语法<— $ (selector).attr(attribute,value);
—>语法<— $ (selsector),attr({attribute:value,attribute:value,…});
（3）attr()回调函数
—>语法<— $ (selector).attr(attribute,function(index,oldvalue))
回调函数：a方法调用b方法，b方法执行完主动调用a方法

样式操作

太多了，自行翻书

内容操作

(1)text() ：设置或返回所选元素的文本内容
(2)html() :设置或返回所选元素的内容（包括HTML标记）
(3)val() :设置或返回表单字段的值

jQuery事件处理

（1）事件模型
a.DOM第0级事件模型：就是DOM事件绑定方式的前两种
d.DOM第2级事件模型：就是DOM事件绑定的第三种
（2）jQuery事件模型
a.绑定事件处理程序: bind()命令或one命令（程序执行完后自动删除）
—>语法<—bind(eventType,data,listener)
$ (‘img’).bind(‘click’,function(event)(alert(“Hello world”)😉);
b.删除事件处理程序：unbind()
—>语法<—unbind(eventType,listener) 或 unbind(event)
c.常用事件分类：鼠标事件，键盘事件，表单事件，文档/窗口事件

jQuery文档

简单来说，就是对HTML元素进行一些创建、插入、复制、删除操作，使得DOM文档结构发生改变
（1）创建元素节点
a.创建两个新元素
工厂函数：$()
b.将这两个新元素插入文档中
append()
标记：动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中

var $li_1=$("<li></li>");
var $parent=$(".um_ul");
$parent.append($li_1);

(2)创建文本节点

var $li_1=$("<li>新增节点：数据结构</li>");
var $parent=$(".um_ul");
$parent.append($li_1);

(3)创建属性节点

var $li_1=$("<li title="新增节点属性值"></li>");
var $parent=$(".um_ul");
$parent.append($li_1);

(4)内部插入节点

方法	说明
append()	看书
appendTo
prepend(content)
prependTo()

（5）外部插入节点

方法	说明
after(content)	看书
before()
insertafter()
insertBefore()

(6)包裹节点

方法	说明
wrap(html)	看书
wrap(elem)
wrapAll(html)
wrapAll(elem)
wrapInner(html)
wrapInner(elem)

（7）复制节点

方法	说明
clone()	看书
clone(true)
(8)替换节点
方法	说明
–	–
replaceWith(content)	看书
replaceAll(selector)

(9)删除节点

方法	说明
empty()	看书
remove([expr])
(10)查找节点
方法	说明
–	–
children()	看书
next() , nextAll() , nextUntil() 区间查找
prev() , prevAll() , prevUntil()
siblings()
closet()
find()
eq()	索引下标从0开始
first()
last()
filter()
is()
map()
hasClass()
has()
not()
slice()
offsetParent()
parent()
parents()
parentUntil()
contents()
end()

(11)遍历节点
方法：each() ？为每个匹配元素规定运行的函数?
？提示：返回false可用于及早停止循环？
语法：$(selsector).each(function(index,element))

参数	描述	描述
function(index,element)	index–选择器的index位置	element–当前的元素，也可使用“this”选择器

this选择器：引用当前的DOM元素

jQuery动画效果

(1)元素的显示与隐藏

属性名	作用
display:none;	隐藏，不再占用文档位置
display:block;	显示，不再占用文档位置
visibility：visible	显示
visibility：hidden	隐藏
方法名	作用
show()	显示
hide()	隐藏
toggle()	开关， -------（显示则隐藏，隐藏则显示）

（2）滑动效果的显示与隐藏

方法名	作用
slideUp(speed,[callback])	向上滑动元素并最终隐藏
slideDown(speed,[callback])	向下滑动元素并最终显示
slideToggle(speed,[callback]

（3）淡入淡出效果

方法名	作用
fadeIn(speed,[callback])	淡入效果
fadeOut(speed,[callback])	淡出效果
fadeToggle(speed,[callback]	开关效果
fadeTo(speed,opacity,[callback])	把标签设置一定透明度（0~1）

（4）动画效果底层方法animate()
语法：$animate(css效果参数，[时间],[回调函数]);
提示：css（）方法执行完毕后会返回当前jQuery对象，因此jQuery的许多方法都可以链式调用
（5）累加累减动画

function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px"},3000);
})
}

(6)多重动画
具体怎么写，看书
a.同时执行多个动画
b.顺序执行动画
c.综合动画
（7）动画回调函数
（8）停止动画和判断是否处于动画状态

方法名	描述89	描述
stop([clearQueue],[gotoEnd]	clearQueue:代表是否清空为执行完的动画队列	gotoEnd:代表是否将执行的动画跳到末态

jQuery插件